quarta-feira, 16 de junho de 2010

Algoritmo: Jogo da Velha em Javascript

Pessoal,

Resolvi criar este post para mostrar o joguinho da velha que coloquei aí do lado, na parte de cima. Segue o código abaixo:

var jogador = 0;
var jogoArray = new Array(3);
limpaTabuleiro();

function limpaTabuleiro() {
for (i = 0; i < 3; i++) {
jogoArray[i] = new Array(3);
for (j = 0; j < 3; j++) {
jogoArray[i][j] = "";
}
}
for (i = 1; i < 4; i++) {
for (j = 1; j < 4; j++) {
var botao = document.getElementById((i+"")+(j+""));
if (botao != null) {
botao.value = "";
}
}
}
}

function executa(id) {
var botao = document.getElementById(id);
var jogadorSpan = document.getElementById("jogador");
var linha = id.substring(0,1)-1;
var coluna = id.substring(1)-1;

if (botao.value != "") {
return;
}

if (jogador == 0) {
jogoArray[linha][coluna] = "X";
botao.value = "X";
jogador = 1;
jogadorSpan.innerText = "1";

} else {
jogoArray[linha][coluna] = "0";
botao.value = "0";
jogador = 0;
jogadorSpan.innerText = "0";
}

// Verifica se o cara ganhou
for (i = 0; i < 3; i++) {
if(jogoArray[i][0] == jogoArray[i][1] && jogoArray[i][1] == jogoArray[i][2]
&& jogoArray[i][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}
for (i = 0; i < 3; i++) {
if(jogoArray[0][i] == jogoArray[1][i] && jogoArray[1][i] == jogoArray[2][i]
&& jogoArray[0][i] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}
if(jogoArray[0][0] == jogoArray[1][1] && jogoArray[1][1] == jogoArray[2][2]
&& jogoArray[0][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
if(jogoArray[2][0] == jogoArray[1][1] && jogoArray[1][1] == jogoArray[0][2]
&& jogoArray[2][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}

Como este jogo funciona??
Primeiramente, mapeamos o tabuleiro num Array bidimensional. Por conveniência, os botões da matriz do tabuleiro têm o id semelhante ao índice bidimensional do Array (11, 12, 13, 21, 22, 23, 31, 32, 33). A cada jogada, o jogo faz basicamente 3 coisas:

1- Verifica se a casa está vazia, ou seja, se um jogador ainda não jogou nesta casa:
if (botao.value != "") {
return;
}

2- Escolhe o jogador e preenche o campo com o seu marcador correto ("X" ou "O", que são marcadores tradicionais no jogo da velha);

3- Verifica se este último jogador que jogou ganhou o jogo. Caso tenha ganhado, o jogo é encerrado e o tabuleiro é limpado.

Um incremento a mais seria ter um botão para limpar o tabuleiro (a função já está aí) e uma verificação para saber se deu velha.
Bom, divirtam-se!!

Nenhum comentário: