Neste artigo, veremos como montar um simples tabuleiro de damas com as peças do jogo utilizando as chamadas Web Standards, ou seja, HTML, CSS e JavaScript (mais precisamente a biblioteca JQuery). Não trataremos, aqui, da funcionalidade prática do jogo (movimento das peças, pontuação, etc), isso ficará para um próximo artigo.

Primeiramente, precisamos entender a estrutura do tabuleiro e como as peças são posicionadas nas casas.

O tabuleiro é composto por 64 casas (8x8) alternadas entre duas cores (o mais comum é serem usadas as cores preto e branco), de forma que nos cantos opostos as casas possuem a mesma cor. Bem, caso existam dúvidas quanto à formação do tabuleiro, veremos isso na prática logo adiante.

São utilizadas 24 peças (12 para cada jogador) divididas em duas cores distintas (aqui usaremos duas imagens simples que podem ser encontradas no código-fonte disponível para download no topo dessa página). As peças são distribuídas nas casas pretas das três primeiras linhas de cada lado, ou seja, considerando que as linhas são numeradas de 0 a 7, as peças serão organizadas nas casas pretas das linhas 0,1,2, 5, 6, e 7. É importante observar que as linhas 3 e 4 ficam livres para a movimentação inicial do jogo.

Então, mão à obra. Primeiramente vamos definir a estrutura do arquivo HTML, vejamos a Listagem 1:

Listagem 1: Estrutura do código HTML


<html>
<head>
	<link rel="stylesheet" href="estilo.css" type="text/css"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="montarTabuleiro.js"></script>
</head>
<body>
	<div id="tabuleiro">
	</div>
	<div id="info">
		<ul>
			<li>Casa selecionada: <span id="info_casa_selecionada"/></li>
			<li>Peca selecionada: <span id="info_peca_selecionada"/></li>
		</ul>
	</div>
</body>
</html>

No código HTML fazemos referência à biblioteca JQuery e outros dois arquivos: montarTabuleiro.js e estilo.css. Estes contêm as funções que responsáveis por estruturar o tabuleiro e os estilos que garantirão a aparência da página.

O corpo do documento é bastante simples: temos uma div que será o tabuleiro propriamente dito e outra para exibir algumas informações úteis, no caso, mostraremos a casa e a peça selecionadas.

Agora vamos à formatação contida no arquivo “estilo.css”.

Listagem 2: Folha de estilos responsável pela formatação da página


#tabuleiro{
	width:400px;
	height:400px;
	border:solid 1px;
}

.linha{	
	height:50px;
}

.casa{
	width:50px;
	height:100%;	
	float:left;
	cursor: pointer;
}

.casa_branca{
	background-color: #fff;
}

.casa_preta{
	background-color: #000;
}

.casa_selecionada{
	background-color: #FF0000;
}

Inicialmente formatamos a div “tabuleiro”, definindo suas dimensões como 400x400 px. As demais classes definidas nesse arquivo serão utilizadas ao montar as casas e peças do jogo, os nomes são auto-descritivos.

Até agora, preparamos a página para receber os elementos principais do código estudado nesse artigo: o tabuleiro e as peças. Vejamos então como colocar esses itens na tela.

As casas do tabuleiro serão nomeadas da seguinte forma: casa_”I”_”J”, onde I é o número da linha e J é o número da coluna, ambas numeradas de 0 a 7, da esquerda para a direita e d

e cima para baixo.

As peças, por sua vez, serão nomeadas como peca_”cor”_”I”_”J”, onde “cor” terá dois valores possíveis: “branca” para as peças de baixo e “preta” para as peças de cima. O I e o J são os mesmos da casa onde a peça é inicialmente posicionada.

Então vamos ao código. O nosso arquivo montarTabuleiro.js utilizará JQuery, então precisará ter a sguinte estrutura:

Listagem 3: Estrutura geral do arquivo montarTabuleiro.js


$(function(){
//variáveis globais
//funções
});

A função responsável por criar as linhas e colunas é a MontarTabuleiro, definida na Listagem 4.

Listagem 4: Função MontarTabuleiro


function MontarTabuleiro(){
	var i;
	for (i=0; i<8; i++){
		$("#tabuleiro").append("<div id='linha_"+i.toString()+"' class='linha' >");		

		for (j=0; j<8; j++){
			var nome_casa ="casa_"+i.toString()+"_"+j.toString();
			var classe = (i%2==0?(j%2==0?"casa_branca":"casa_preta"):(j%2!=0?"casa_branca":"casa_preta"));
			$("#linha_"+i.toString()).append("<div id='"+nome_casa+"' class='casa "+classe+"' />");

			if(classe == "casa_preta"){
				if(i < 3){
					$("#"+nome_casa).append("<img src='peca_preta.png' class='peca' id='"+nome_casa.replace("casa", "peca_preta")+"'/>");
				}
				else
				if(i > 4){
					$("#"+nome_casa).append("<img src='peca_branca.png' class='peca' id='"+nome_casa.replace("casa", "peca_branca")+"'/>");	
				}

			}
		}
	}
}	

O funcionamento do código é o seguinte: fazemos um loop para adicionar as linhas e, dentro dessa linha, fazemos um loop para adicionar as colunas, definindo de a casa é branca ou preta. Caso a casa seja preta, verificamos em que linha ela se encontra para então inserir as peças em suas devidas posições.

Nas tags que são inseridas, utilizamos as classes que já foram definidas no arquivo estilo.css.

Pronto, o tabuleiro está montado. Trabalhemos então para que se possa selecionar uma casa e/ou uma peça. Para isso usaremos o evento onclick da classe “casa” que, em algumas posições, contém um elemento que representa a peça. Antes de codificar este evento, precisamos declarar duas variáveis globais e as inicializamos como null, como consta na Listagem 5:

Listagem 5: Declaração das variáveis globais utilizadas


var casa_selecionada = null;
	var peca_selecionada = null;

Listagem 6: Evento onclick das casas do tabuleiro


$(".casa").click(function(){
	$("#"+casa_selecionada).removeClass("casa_selecionada");
	casa_selecionada = $(this).attr("id");
	$("#"+casa_selecionada).addClass("casa_selecionada");
	$("#info_casa_selecionada").text(casa_selecionada);

	peca_selecionada = $("#"+casa_selecionada).children("img:first").attr("id");
	if(peca_selecionada==null){
		peca_selecionada = "NENHUMA PECA SELECIONADA";
	}
	$("#info_peca_selecionada").text(peca_selecionada.toString());
});

Ao clicar em uma casa, recuperamos seu nome para depois a referenciarmos usando o seletor JQuery $. Para selecionar um determinado elemento pelo id, utilizamos um # antes do nome dentro do seletor, por exemplo: $(“#elemento”). Isso explica o $("#"+casa_selecionada). Quando uma casa é selecionada, a variável casa_selecionada recebe o nome da casa, por exemplo, “casa_0_0”,“casa_3_5”., etc.

Tendo localizado a casa, verificamos se há uma imagem dentro dela e, em caso positivo, passamos o nome desta imagem para a variável peca_selecionada . Ainda na casa selecionada, adicionamos a classe casa_selecionada para destacá-la das demais.

Para observarmos qual casa e peça foram selecionadas, exibimos logo abaixo do tabuleiro os respectivos nomes nos elementos destinados a este fim, definidos na Listagem 1.

Listagem 7: Estrutura final do arquivo montarTabuleiro.js


$(function(){
	var casa_selecionada = null;
	var peca_selecionada = null;
	function MontarTabuleiro(){...}
	MontarTabuleiro();
$(".casa").click(function(){...}

});

Onde aparecem as reticências (...), indica que ali deve estar o corpo da função, conforme visto anteriormente.

O resultado obtido deve ser o seguinte:

Resultado do código: o tabuleiro com as peças

Figura 1: Resultado do código: o tabuleiro com as peças

Com isso finalizamos nosso artigo. O código não é complicado, uma vez que não foi nosso objetivo, aqui, trabalhar a funcionalidade de jogo propriamente dita. Isso será abordado em um próximo artigo.

Espero que tenham gostado. Um abraço a todos e até a próxima!