jQuery - Criando um simples jogo da velha

klone1

Ensinarei como criar um simples jogo da velha feito em jQuery. É um modo divertido, até para aprender, criando jogos online.

[ Hits: 30.251 ]

Por: Clauber Cesario em 25/06/2014

2 0

Denuncie Favoritos Indicar Impressora

Verificações

Verificação na horizontal

Chegamos na parte meio que complicada: criar as funções que ficarão responsáveis por verificar o ganhador.

Haverá, praticamente, três verificações. São elas: Horizontal, Vertical e Diagonal.

Vamos começar pela horizontal:

Então, vamos para a explicação disso tudo:

Primeiro de tudo, é bom saber que o jogo da velha é, nada mais, que uma matriz bidimensional.

Você deve estar se perguntando onde está nossa variável bidimensional. Nesse caso, vamos usar os botões como nossa matriz. E como toda matriz, devemos controlar usando for. Como é uma bidimensional, vamos usar dois for ou pode ser outro loop (while).

1. Primeiro for:

Serve para controlar as colunas e cada vez que passa nesse for, muda o símbolo x,y,z que representam os botões.

2. Segundo for:

Controlamos as linhas, perceba que ele vai armazenando todos os dados das linhas e depois de armazenar 3 vezes cada linha de coluna, verifica se tem alguma sequência de XXX ou OOO, para verificar se existe algum ganhador. Se existir, já dá o return para acabar com a função.

Verificação na vertical

Essa é a parte mais fácil: a da verificação na parte vertical.

Vamos ao código:

O que muda, é que precisamos apenas de um for, apenas para verificar, pois só queremos saber se o número da linha corresponde à alguma sequência. O for apenas controla a coluna.

Verificação na diagonal

Vamos para a última verificação, que é na diagonal:

Verifica apenas duas vezes, pois existe apenas duas diagonais, sem a necessidade de for. Usando o if, já conseguimos saber se existe alguma sequência de X ou O.

Página anterior Próxima página

Páginas do artigo

   1. Introdução / Design
   2. Verificação / Cliques nos botões
   3. Verificações
   4. Chamando os métodos de verificação

Outros artigos deste autor

Introdução ao Java - Hello World

Gerando logs em Java

Leitura recomendada

Como minimizar CSS e Javascript via linha de comando

Google Maps API - Criando e interagindo com seus próprios mapas

Jakarta JMeter - Testando o desempenho de seus sites

ExtJS: Um excelente framework de JavaScript

Diferenças de sites Web Standards

Comentários

[1] Comentário enviado por hugoeustaquio em 25/06/2014 - 01:33h

Legal. Certa vez eu queria escrever algo rápido e que não fosse legal pra me familiarizar com o GWT. Fiz um campo minado, e depois refiz o mesmo com jquery simples.
Meu intuito seria mensurar com qual ambiente eu desenvolveria mais rápido/melhor. Concluí que com o jQuery desenvolvo muito mais rápido, mas tenho convicção que com o GWT reutilizarei muito mais o código. E se o projeto ficar "amarrado" no estilo 'google' de fazer as coisas, fica muito mais 'integrado' com seu código server side também. Além de ser fácil marcar um código de validação pra rodar tanto no lado cliente quanto no servidor.

Caso haja interesse posso escrever um tutorial pra postar aqui no vol.

http://campminado.appspot.com/

0 0

[2] Comentário enviado por klone1 em 25/06/2014 - 13:18h

hugoeustaquio muito bacana jogo feito em GWT, nunca utilizei mas creio que deve ser mto legal trabalhar com essa ferramenta. Puxa escreve
um artigo aqui no VOL ,sempre é bom compartilhar conhecimento

Abraços

0 0

[3] Comentário enviado por Lisandro em 07/07/2014 - 15:51h

Muito legal! Favoritei.

0 0

[4] Comentário enviado por klone1 em 08/07/2014 - 09:48h

Mto obrigado LisandroGuerra. Em breve farei muitos artigo relacionado a programação

0 0

[5] Comentário enviado por removido em 20/07/2014 - 01:19h

Olá Clauber,

Parabéns pela inciativa, gostaria de fazer duas observações:

Você disse:

No jQuery existe uma função que fica em loop infinito na página, como se fosse while (true), quando programamos para microcontrolador e essa função é $(document).ready(function()

O $(document).ready é executado após a página ser carregada e apenas uma vez. JQuery facilita muito a manipulação de eventos dos elementos DOM, como o click do button. Porém para manipular estes elementos eles já precisam existir na página, dai o $(document).ready. No seu jogo você manipula o evento click dos botões.

No fim do artigo você disse:

Mas, NADA substitui o uso da Lógica de Programação. Mesmo com jQuery, o uso da lógica continua.

E na segunda parte você disse:

Não se assuste pelo tamanho do código, pois é tudo parecido. O que muda mesmo, é o nome do botão que estamos nos referindo.

Posso presumir que você é inciante, entusiasta ou estudante universitário (aposto no último). Tente refinar seu código, como prática de lógica mesmo. Você codificou o click de todos os botões da sua página quando era necessário apenas faze-lo uma vez. Lembre-se, código menor e mais simples é sempre melhor.

[code]
$( 'button' ).click(function()
{
//seu código vai aqui

//o muda o texto do button cujo evento click foi disparado
$(this).text(simbolo);

//seu código vai aqui
});
[/code]

Por fim deixo a recomendação de outra api que associada ao JQuery vai te auxiliar a desenvolver aplicações cada vez melhores, o knockout.js:

http://knockoutjs.com/

0 0

[6] Comentário enviado por klone1 em 21/07/2014 - 21:04h

Olá wdmatheus, sim hoje sou universitário mas ja tenho 3 anos de experiencia , que posso dizer que primeiramente obrigado pelo comentário e pela sugestão. Aqui nesse exemplo, não me preocupei usa muito a logica aprofundada, apenas queria demostra o funcionamento do jquery. A parte do click nos botoes vc ta certo em apenas usar uma vez mas queria ser detalhista, como disse ,existe milhares de maneira de chegar ao resultado

0 0