Jogo da Velha em JavaScript - Código comentado

Neste tutorial, vamos comentar todo o código do Jogo da Velha em JavaScript, linha por linha e função por função.

Veja:
Código HTML e JS do Jogo da Velha

O Jogo da Velha em JavaScript


Esse exercício serve, principalmente, para treinarmos duas importantes seções de nossa apostila de JavaScript:
Vai funcionar assim: o primeiro jogador fornece uma linha e uma coluna, marcamos X pra ele no local, então checamos se alguém ganhou.

Se não, é a vez do jogador 2 fornecer uma linha e uma coluna, então marcamos O no tabuleiro.
Checamos novamente.

E assim vai...fornece a posição, marcamos no tabuleiro e checamos se alguém ganhou.
Bem simples.

Código HTML do Jogo da Velha

Primeiro, vamos comentar o HTML.
Ele é bem simples.
Assim que inicia a <body> (corpo da página), ele já chama a função inicia() de nosso script.
Depois, temos uma div, a board.
É nessa DIV que iremos printar na página o tabuleiro do jogo da velha.

Depois, temos dois formulários de input, onde o usuário vai fornecer a linha e a coluna que ele deseja marcar. Você deve escolher números de 1 até 3, pois o tabuleiro de um jogo da velha é 3x3.

Quando o jogador escolher linha e coluna, então ele clica no botão Marca, que chama a função jogar().

Embaixo, tem a div aviso, é lá que exibiremos os avisos: vez do jogador tal, campo já marcado, fulano ganhou, linha tal foi preenchida etc.

Agora vamos deixar o bom e velho HTML de lado, ver onde o bicho pega: na programação JavaScript.

Código JavaScript do Jogo da Velha

Primeiro, vamos declarar todas as variáveis que vamos usar, fora do escopo de qualquer função, para que estas variáveis fiquem 'visíveis' e acessíveis a qualquer função.


A variável tabuleiro, que vai armazenar a matriz 3x3, inicializada com todos elementos iguais a 0.
Quando o primeiro jogador marca uma posição, mudamos de 0 pra 1.
Quando o segundo jogador marca uma posição, mudamos de 0 pra -1.
Já já você vai entender o motivo disso.

A variável board é que vai se ligar com a div board, e a variável aviso vai se ligar com a div aviso.

A variável jogador vai ser incrementada a cada jogada. Vamos usar o resto da divisão dela por 2 pra sabermos de quem é a vez de jogar (o resto da divisão de qualquer número por 2 vai sempre dar 0 ou 1, basta somar 1 que teremos sempre os valores 1 e 2 se alternando).

Por fim, as variáveis lin e col, que vão pegar as posições de linha e coluna que o usuário digitou.

Quando o HTML roda, a tag <body> 'chama' a função inicia().
Essa função só roda uma vez, quando carregamos a página.

Ela vai criar a o array de arrays, e depois inicializar todos os elementos com o número 0, na variável tabuleiro.
Linkamos as variáveis board e aviso com o HTML, e inicializamos o jogador como 1 (resto da divisão por 2 vai dar 1, logo o jogador 1 é o primeiro a jogar).

Agora a função exibe().
Ela vai pegar o tabuleiro tabuleiro e em vez de exibir 0, 1 e -1, vai exibir:
campo vazio: ___
os X
os O

Toda vida que se depara com o número 0, ela escreve no HTML: _
Quando encontra o número 1 no tabuleiro, ela escreve no HTML: X
Quando encontra o número -1, ela escreve: O

Colocamos todo o desenho no tabuleiro na variável HTML e mandamos pra nossa página, via board.innerHTML

Toda vez que você digita a linha, a coluna e clica no botão Marca, a função jogar() é acionada.
Primeira ela mostra o aviso de qual jogador é a vez.

Depois, pega as strings com os números de linha e coluna que o usuário digitou, e transforma em inteiros.

Lembrando que o usuário digita: 1, 2, ou 3
Mas nosso tabuleiro tem posições: 0, 1 e 2 para linhas e colunas, por isso é necessário subtrair 1 do valor digitado pelo usuário.

Agora vamos marcar X ou O no tabuleiro.
Primeiro verificamos se ele está vazio: tabuleiro[lin][col]==0

Se tiver 0 lá, tá vazio.
Se for o primeiro jogador, colocamos o número 1 nessa posição.
Se for a vez do segundo jogador, colocamos o número -1 nessa posição.

Se não tiver 0 no local, cai no ELSE e avisa que o campo já foi marcado (e subtraímos 1 da variável jogador).

Quando terminar esse tratamento de IF e ELSE, incrementamos a variável jogador, para ser a vez do próximo.

Depois, exibimos novamente o tabuleiro (agora atualizado com a mudança).
E também chamamos a função checa().

A função checa() vai chegar se alguém ganhou o jogo.
Pra isso, ela primeiro percorre todas as linhas (primeiro FOR), e olha se a soma de alguma linha dá 3 ou -3.

Depois faz o mesmo para as colunas (segundo FOR).

Depois testamos se as diagonais tem soma 3 ou -3.

Se sim, exibimos qual linha, coluna ou diagonal está preenchida e venceu, bem como o vencedor.

Prontinho, temos nosso jogo da Velha em JavaScript.

Nenhum comentário:

Postar um comentário