Desenvolvendo um Jogo da Velha / Parte 1
Que tal criar um Jogo da Velha e praticar ainda mais programação? Nesta primeira parte do artigo iremos ver um pouco mais de lógica e matrizes.
O jogo da velha é um jogo de tabuleiro muito antigo e simples, mas podemos considerar um desafio de implementação promissor para um programador iniciante. Com isso em mente, vamos ver os principais problemas e como solucioná-los passo a passo utilizando Javascript.
Primeiramente, vamos nos recordar de algumas das regras: o jogo da velha é um jogo de tabuleiro com 9 posições como uma tabela com 3 linhas e 3 colunas onde dois jogadores se alternam colocando um símbolo, normalmente X ou O, nos espaços vazios do tabuleiro com o objetivo de completar uma trilha em qualquer direção.
Criando o tabuleiro
Agora que sabemos as regras, vamos começar criando uma página HTML em branco. Para isso utilize um editor de texto como o bloco de notas(ou um editor de sua preferência) e adicione o seguinte conteúdo:
<html>
<head>
<meta charset='utf-8'>
<script>
</script>
</head>
<body>
</body>
</html>
Salve o arquivo como index.html e abra-o em seu navegador. Todo o código javascript que fizermos deve ficar dentro da tag <script></script>. Não esqueça também de atualizar a página sempre que fizer uma alteração no código.
Agora que já temos nosso cenário pronto, vamos começar a programar. Para começar vamos criar uma variável para representar o nosso tabuleiro com um array.
<script>
var tabuleiro = [];
</script>
Porém, precisamos representar o tabuleiro como uma tabela com 3 linhas e 3 colunas e, por esse motivo, vamos criar arrays dentro de arrays. No array principal tabuleiro iremos criar 3 arrays dentro dele para representar as linhas. Para as colunas, vamos adicionar 3 números de 0 até 8 para cada um dos arrays para identificarmos cada um dos espaços do tabuleiro:
<script>
var tabuleiro = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8]
];
</script>
Temos então um tabuleiro com 3 linhas e 3 colunas preenchido com números de 0 até 8:
Para acessar o array não muda muito do que já sabemos. Basta passar o índice da posição que queremos o valor. No nosso caso como temos array dentro de array, caso acessarmos o índice [0] iremos recuperar o array que está nesta posição:
//tabuleiro[linha]
tabuleiro[0];
Assim vamos ter acesso ao primeiro array dentro do nosso array, ou seja, vamos acessar a primeira linha do nosso tabuleiro.
Já para acessarmos o um valor específico, devemos além de passar o índice da linha, temos também que informar o índice da coluna:
//tabuleiro[linha][coluna]
tabuleiro[0][2];
Dessa forma acessamos a linha 1 e a coluna 3 do tabuleiro. Que teria a seguinte saída:
Essa é a nossa estrutura principal do nosso tabuleiro que nada mais é que uma Matriz bidimensional ou Array bidimensional.
Uma matriz é uma estrutura bidimensional capaz de armazenar dados de um mesmo tipo. Podemos considerar o conceito de matriz como uma extensão do conceito de vetores, onde vetores corresponderia a uma estrutura unidimensional. As matrizes (e vetores) só podem ser acessados através de índices inteiros, ou seja, a dimensão de uma matriz é definida através de 2 números, o número de linhas e o de colunas. INSTITUTO DE MATEMÁTICA E ESTATÍSTICA-USP - Introdução à Computação
Desenhando o tabuleiro na tela
Até aqui fizemos apenas a parte programática, ainda não estamos imprimindo nada na nossa página HTML, então temos que desenhar esse tabuleiro. Para desenhar o tabuleiro no navegador precisamos acessar cada uma de suas posições e imprimi-las na tela utilizando a função document.write(), mas acessar manualmente cada uma das posições dá muito trabalho, não é mesmo? Para resolver esse problema vamos criar uma função chamada desenharTabuleiro.
var desenharTabuleiro = function() {
}
Antes de continuar, vamos adicionar a função na nossa página. Queremos que ela seja executada ao carregarmos a página, para isso adicionamos no atributo onload da tag <body>:
<body onload="desenharTabuleiro()">
</body>
Dessa forma ao abrir a página HTML no navegador a função desenharTabuleiro() será executada. Isso vai facilitar um pouco o nosso trabalho pois agora não precisamos sempre ficar executando essa função manualmente no console.
Agora precisamos fazer o algoritmo que irá ser responsável em pegar os valores da nossa array dentro de array (matriz) e exibí-los na tela. Como estamos falando de arrays, claro que iremos utilizar um for.
var desenharTabuleiro = function() {
for(var linha = 0; linha < 3; linha++) {
console.log("linha: " + linha);
}
}
Repare na saída apresentada no console do modo de desenvolvedor com a função console.log:
Esse laço acima vai percorrer apenas as linhas do tabuleiro. Precisamos agora adicionar o loop que irá percorrer as colunas. Lembre-se que as colunas estão dentro das linhas, então teremos um loop dentro de um loop (for dentro de for):
var desenharTabuleiro = function() {
for(var linha = 0; linha < 3; linha++) {
for(var coluna = 0; coluna < 3; coluna++) {
console.log("linha: " + linha + " / coluna: " + coluna);
}
}
}
Colocar um for dentro do outro é uma ótima forma para percorrer o nosso tabuleiro, pois para cada execução do for das linhas iremos executar uma vez o for das colunas.
Mas não queremos imprimir os índices no console como no exemplo acima, queremos acessar cada espaço, ou seja, a posição do tabuleiro e imprimirmos na página HTML e já sabemos fazer isso. Basta informarmos qual índice da linha e qual índice da coluna: tabuleiro[linha][coluna] e passarmos para a função document.write():
var desenharTabuleiro = function() {
for(var linha = 0; linha < 3; linha++) {
for(var coluna = 0; coluna < 3; coluna++) {
document.write( "[" + tabuleiro[linha][coluna] + "]" );
}
}
}
Mas o resultado ainda não saiu como o esperado:
Observe que todas as posições ficaram em uma única linha e não é isso que queremos, afinal queremos ter algo mais parecido como um tabuleiro. Por isso adicionamos os [ ]colchetes para tentarmos desenhar as posições do tabuleiro, porém ainda não ficou legal, como vimos acima. Então precisamos dar um "enter" ou seja o <br> após finalizarmos cada linha, então para isso devemos colocar o trecho de código que irá dar esse "enter" no final do for principal.
var desenharTabuleiro = function() {
for(var linha = 0; linha < 3; linha++) {
for(var coluna = 0; coluna < 3; coluna++) {
document.write( "[" + tabuleiro[linha][coluna] + "]" );
}
document.write("<br>");
}
}
Só por questões de organização vamos extrair o trecho document.write("<br>"); para uma função:
var novaLinha() {
document.write("<br>");
}
Agora basta adicionar a função:
var desenharTabuleiro = function() {
for(var linha = 0; linha < 3; linha++) {
for(var coluna = 0; coluna < 3; coluna++) {
document.write( "[" + tabuleiro[linha][coluna] + "]" );
}
novaLinha();
}
}
Para cada linha que ele percorrer, no final dela ele irá adicionar um <br> fazendo com que a próxima linha fique abaixo dela, assim teremos uma estrutura que parece com um tabuleiro e suas posições:
Conclusão
Bem nesta primeira parte criamos um arquivo HTML para rodarmos nosso código JavaScript, aprendemos como desenhar um tabuleiro, utilizamos o conceito de Matriz para criá-lo e criamos uma função utilizando laços de repetição aninhados(for dentro de for) para percorrê-lo.
Assim chegamos ao fim da primeira parte da criação do nosso jogo da velha. Na próxima parte, veremos como melhorar a nossa interação com o tabuleiro para fazermos jogadas. ;)
Então o que achou? Deixe seu comentário ou sugestões. E se ficou interessado em aprender mais sobre JavaScript, lógica de programação, algoritmos etc da uma olhada no nosso curso de Lógica de Programação ;).
You might also be interested in these articles...
Desenvolvedores e Instrutores da TriadWorks
Posted in: codigocursodicasensinofortalezahtmlhtml5introducaojavascriptlogica de programacaológicotreinamentotriadworkstutorial