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

Por: Clauber Cesario em 25/06/2014

2 0

Denuncie Favoritos Indicar Impressora

Verificação / Cliques nos botões

Verifica se deu velha e colocando jQuery

Chegou a parte mais legal, que é a implementação do jQuery. Faremos também uma função para mudar o símbolo para o próximo jogador.

Antes de tudo, vamos implementar o jQuery:

→ <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Nesse caso, estou pegando o jQuery direto do site onde está hospedado, mas no atributo src, você pode colocar o caminho do arquivo jQuery local.

Os códigos jQuery são colocados dentro da tag <script> </script>. Então, a partir de agora, estarei colocando os código dentro dessa tag.

A primeira função que irei criar, é fazer com que mude o jogador, isto é, mudar o jogador que irá usar o X e o jogador que irá usar o O.

Isso fica fácil, pois na parte HTML colocamos um campo label com ID para receber essa mudança. Vamos à função:

O segredo dessa função está nessa linha: var simbolo = $( "label[id='jogador']").text();

Essa linha recebe o último jogador e depois disso, é feita a troca. Lembrando que quando usamos o $, estamos querendo dizer para fazer uma chamada de uma função ao jQuery.

Colocando os cliques nos botões usando jQuery

Lógico que para esse jogo da velha, existem milhares de formas de serem feitas, mas quero usar aqui nessa parte, eventos click no jQuery, para mostrar como o jQuery consegue capturar o evento.

Antes de mais nada, devemos lembrar que colocamos atributos name, para podemos identificar cada tag e assim podemos usar no jQuery. Essa é a parte fundamental.

Agora, devemos colocar uma função para que quando clicar nesse botão, marcar o texto para o símbolo do jogador que clicou. Para isso, devemos configurar um por um.

Vamos ao código:

$( "button[name='x1']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='x1']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='x2']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='x2']").text(simbolo);

    mudarSimbolo();

    click++;

});

    $( "button[name='x3']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='x3']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='y1']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='y1']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='y2']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='y2']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='y3']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='y3']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='z1']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='z1']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='z2']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='z2']").text(simbolo);

    mudarSimbolo();

});

$( "button[name='z3']" ).click(function()
{
    var simbolo =  $( "label[id='jogador']").text();

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

    click = parseInt(click) + 1;

    $("input[type='hidden']").val(click);

    $( "button[name='z3']").text(simbolo);

    mudarSimbolo();

});

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.

Bom, o que faz exatamente o click:

Pega o último símbolo do jogador;
Tenho a variável click que transforma em inteiro o número de click. Isso será usado mais para frente para ver se deu velha o jogo;
Coloca o símbolo X ou O no texto do botão:
Chama a função para mudar o símbolo para o próximo jogador.

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

ExtJS: Um excelente framework de JavaScript

Expressões Regulares - Entenda o que são Lookahead e Lookbehind

W3C - World Wide Web Consortium

MathML - Mathematical Markup Language

Por que o Javascript é ruim em matemática?

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