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.894 ]

Por: Clauber Cesario em 25/06/2014

2 0

Denuncie Favoritos Indicar Impressora

Chamando os métodos de verificação

Acho que você já deve estar se perguntando: "como vou chamar essas verificações para ver se existe um ganhador e para verificar se existe VELHA no jogo?"

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().

Fica em loop infinito e através desse método, vamos ficar verificando se existe um ganhador:

$(document).ready(function()
{

    $("button").click(function()
    {
    var click = $("input[type='hidden']").val();

    vereficaVencendorHorizontal();

    vereficaVencendorVertical();

    if(parseInt(click) >= 9 )
    {
        alert("Deu velha");
    }

    });
});

Bom, podem ver que chamo todas as verificações e também pego o último valor do nosso botão hidden.

Ele irá verificar se todos os botões foram clicados. Nesse caso, como é uma matriz 3x3, então haverá 9 cliques. Se ocorrerem 9 cliques, significa que não houve vencedor e sim VELHA.

Conclusão

Bem, vimos aqui como utilizar, chamar um evento e como implementar o jQuery.

O jQuery é uma mão na roda para quem já programa para WEB. Posso dizer com experiência, que vi como o jQuery facilitou minha vida.

Mas, lógico que o jQuery é uma ferramenta para que você programador seja mais produtivo nas suas páginas que está desenvolvendo. Mas, NADA substitui o uso da Lógica de Programação. Mesmo com jQuery, o uso da lógica continua.

Obs.: se existir algum erro no código, ou mesmo dúvida, comentem por favor.

Ou, quem quiser pode mandar um e-mail para tirar dúvidas referentes a esse ou qualquer assunto envolvendo computação.
É sempre bom compartilhar experiências e lembrar que estamos sempre aprendendo.

E-mail: klone.linux[at]bol.com.br

Página anterior

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

Gerando logs em Java

Introdução ao Java - Hello World

Leitura recomendada

ExtJS: Um excelente framework de JavaScript

Diferenças de sites Web Standards

Jakarta JMeter - Testando o desempenho de seus sites

Como minimizar CSS e Javascript via linha de comando

XSS - Cross Site Scripting

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