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.
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.
