Publicidade

Criando o Jogo da Velha com jQuery - Parte 1

18/01/2016 » jQuery » Intermediário

Fala moçada, tudo blz?

Para o primeiro post do ano vamos ver mais um tutorial de jQuery, agora um Jogo da Velha, ótimo para exercitar a lógica. Para o tutorial vamos ter a seguinte estrutura:

  • css (pasta)
  • images (pasta)
  • js (pasta)
  • index.html

Vamos começar pelo HTML, criem o arquivo index.html desta forma:

Agora vamos ao CSS, criem com o mesmo nome que foi chamado no HTML acima:

Próximo passo e o mais importante, o JS, aqui é onde o jogo acontece então vamos indo por partes para facilitar o entendimento, primeiro eu defini as variáveis que o jogo precisa:

Algumas explicações:

  • A variével whoStart define quem começa jogando, se é você ou o CPU, setada como "0" quem começa é você (circulo) e setada como "1" é o CPU (X).
  • A variável whoPlayed define quem fez a última jogada, "0" para o circulo e "1" para o X.
  • A variável winner define o vencedor da partida, "-1" para empate, "0" para o circulo vencendo e "1" para o X.

Algumas funcões básicas que serão usadas no game, a "rand" para sortear um número aleatório e a "alertMsg" para exibir mensagens na tela.

Agora as funções do game

O resultado final deve ser assim:

 

Por enquanto vamos parar por aqui, na parte 2 vamos tentar colocar mais inteligência artificial para o CPU jogar melhor.

Os arquivos usados podem ser baixados clicando aqui.

Vlw e até o próximo.

Publicado por:

Rogério Mantoanelli @rmantoanelli
166 artigo(s) publicado(s)
Fundador do site "RogérioMaster", programador web desde 2002, especialista em PHP, jQuery. Comecei a programar server-side no ASP 3.0 e depois migrei para PHP onde estou até hoje. Já me aventurei em Action Script mas o mercado se afunilou muito e me dediquei ao PHP e jQuery.

Avalie esse post:

Comentários:

© Copyright 2018. Todos direitos reservados.