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

• Estudar pela apostila em PDF

O Jogo da Velha em JavaScript

Esse exercício serve, principalmente, para treinarmos duas importantes seções de nossa apostila de JavaScript:

1. Funções
2. Arrays

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.

Código COMPLETO do Jogo da Velha em JavaScript (Código HTML e JS)

Neste tutorial, vamos mostrar para vocês o código completo do Jogo da Velha em JavaScript.

Vamos te mostrar tanto o código HTML da sua página, quanto o script em JS.

Coloque o código HTML em um arquivo de nome, por exemplo: velha.html

Já o script, salve no arquivo: velha.js

Ambos na mesma pasta!
No próximo tutorial, vamos comentar o código abaixo inteiro.

Código comentado do Jogo da Velha em JavaScript

• Estudar pela Apostila JavaScript Progressivo em PDF

Código HTML do Jogo da Velha

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="velha.js"></script>
 </head>
 <body onload=inicia()>
  <div id='board'></div><br />
  Linha :.<input id="lin" type="number" min="1" max="2"> <br />
  Coluna:<input id="col" type="number"min="1" max="2"> <br />
  <button onclick="jogar()">Marcar</button><br />
  <div id='aviso'></div><br />
 </body>
</html>

Código JavaScript: velha.js

var tabuleiro;
var board;
var aviso;
var jogador;
var lin, col;

function inicia()
{
 tabuleiro = new Array(3);
 board = document.getElementById('board');
 aviso = document.getElementById('aviso');
 jogador = 1;

 for(let i=0 ; i<3 ; i++)
  tabuleiro[i] = new Array(3);
 
 for(let i=0; i<3 ; i++)
  for(let j=0 ; j<3 ; j++)
   tabuleiro[i][j]=0;
 exibe();

}

function exibe()
{
 HTML = '<table  cellpadding="10" border="1">';
 for(let i=0; i<3 ; i++){
  HTML += '<tr>';
  for(let j=0 ; j<3 ; j++)
   if(tabuleiro[i][j]==0)
    HTML +='<td>  __  </td>';
   else 
    if(tabuleiro[i][j]==1)
     HTML +='<td> X </td>';
    else
     HTML +='<td> O </td>';
  HTML += '</tr>';
 }
 HTML += '</table><br />';
 board.innerHTML = HTML
 
}

function jogar()
{
 aviso.innerHTML='Vez do jogador: ' + ((jogador)%2 + 1);
 lin = parseInt(document.getElementById("lin").value)-1;
 col = parseInt(document.getElementById("col").value)-1;

 if(tabuleiro[lin][col]==0)
  if(jogador % 2)
   tabuleiro[lin][col] = 1;
  else
   tabuleiro[lin][col] = -1;
 else{
  aviso.innerHTML='Campo ja foi marcado!'
  jogador--;
 }

 jogador++;
 exibe();
 checa();
}

function checa()
{
 var soma;

 //Linhas
 for(let i=0 ; i<3 ; i++){
  soma=0;
  soma=tabuleiro[i][0]+tabuleiro[i][1]+tabuleiro[i][2];

  if(soma==3 || soma==-3)
   aviso.innerHTML="Jogador " + ((jogador)%2 + 1) + " ganhou! Linha " + (i+1) + " preenchida!";
 }

 //Colunas
 for(let i=0 ; i<3 ; i++){
  soma=0;
  soma=tabuleiro[0][i]+tabuleiro[1][i]+tabuleiro[2][i];

  if(soma==3 || soma==-3)
   aviso.innerHTML="Jogador " + ((jogador)%2 + 1) + " ganhou! Coluna " + (i+1) + " preenchida!";
 }

 //Diagonal
 soma=0;
 soma = tabuleiro[0][0]+tabuleiro[1][1]+tabuleiro[2][2];
 if(soma==3 || soma==-3)
   aviso.innerHTML="Jogador " + ((jogador)%2 + 1) + " ganhou! Diagonal preenchida!";

 //Diagonal
 soma=0;
 soma = tabuleiro[0][2]+tabuleiro[1][1]+tabuleiro[2][0];
 if(soma==3 || soma==-3)
   aviso.innerHTML="Jogador " + ((jogador)%2 + 1) + " ganhou! Diagonal preenchida!";
}