jQuery - Criando um simples jogo da velha
Ensinarei como criar um simples jogo da velha feito em jQuery. É um modo divertido, até para aprender, criando jogos online.
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:
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>
<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.
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/