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

Por: Clauber Cesario em 25/06/2014

2 0

Denuncie Favoritos Indicar Impressora

Introdução / Design

Introdução

O jQuery, ultimamente, sem dúvida nenhuma é uma das bibliotecas mais usadas para programadores WEB.

Através do jQuery, facilita-se o uso do JavaScript, fora que ganha-se em produtividade. jQuery nada mais é, do que varias bibliotecas escritas em JavaScript para uso rápido e prático.

Através dela fica fácil, por exemplo, validar um campo ou verificar se o usuário existe pesquisando na base de dados.

Para que se comecem os "jogos", antes de tudo, precisamos baixar o jQuery, que nada mais é do que um arquivo com extensão .js.

O jQuery pode ser abaixado aqui:

http://code.jquery.com/jquery-2.1.1.min.js

Para falar a verdade, existe duas maneiras de se implementar o jQuery no seu código:

Usando arquivo local;
Ou, usando de outro endereço da Internet.

Design da página

Você que está usando o GNU/Linux, sabe que o Dreamweaver não funciona no GNU/Linux e nem existe para GNU/Linux. Uma alternativa, é usar um programa chamado Aptana Studio, que nada mais é do que um Eclipse modificado.

Link do download do Aptana Studio: http://www.aptana.com/products/studio3/download

Caso não goste do Aptana, pode usar nosso velho amigo bloco de notas, serve qualquer um.

Bom, o design do nosso jogo da velha é bem simples, pois meu objetivo é ensinar a usar o jQuery.

O formato da página HTML, ficará assim:

btn1 btn2 btn3
btn4 btn5 btn6
btn7 btn8 btn9

O jogo da velha, nada mais é, do que uma matriz bidimensional, 3x3. Agora, vamos ao código HTML:

<html>
<body>
<h1>
    Jogo da velha
</h1>
<table>
<tr>
    <td><button value="" name="x1">X1 </button></td>
    <td><button value="" name="x2">X2 </button></td>
    <td><button value="" name="x3">X3</button></td>
</tr>
<tr>
    <td><button value="Y1" name="y1">Y1 </button></td>
    <td><button value="Y2" name="y2">Y2 </button></td>
    <td><button value="Y3" name="y3">Y3</button></td>
</tr>
<tr>
    <td><button value="Z1" name="z1">Z1</button></td>
    <td><button value="Z2" name="z2">Z2 </button></td>
    <td><button value="Z3" name="z3">Z3</button></td>
</tr>
<input type="hidden" value="0" name="click_valida" />
<td><tr>Proximo jogador: <label id="jogador">X</label> </tr></td>
</table>
</body>
</html>

Se observarem bem, estou usando a tag <table> para os buttons poderem ficar mais organizados.

Também existe um botão hidden, que terá a função de dizer se o jogo deu "VELHA". Mais para frente, fará sentido na programação.

Também existe uma tag <label>, que tem a função de dizer qual o próximo jogador.

Além de colocar todas as tags, a parte fundamental é colocar ID e "names" para cada tag que você está usando , pois, são eles que farão a comunicação para JavaScript e o HTML.

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

Jakarta JMeter - Testando o desempenho de seus sites

MathML - Mathematical Markup Language

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

ExtJS: Um excelente framework de JavaScript

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