Jogos são uma ótima forma de aprender sobre uma linguagem, já que exigem a aplicação de diversos conceitos diferentes. Um clássico dos jogos para iniciantes é o jogo da velha, jogo que faremos nesse tutorial!

Mas, por onde começar? Bom, normalmente, a melhor forma de começar é quebrar nossa aplicação em pequenos pedaços.

Pensando na interface de usuário, temos:

• Título do nosso jogo

  

• Grid 3x3 com células clicáveis

  

• Mensagem informando de quem é o turno, quem é o ganhador ou se houve empate

  

• Botão de restart para recomeçar o jogo

  

Nossa telinha fica da forma:

Agora, vamos pensar sobre o fluxo do jogo para uma célula clicada:

• Identificar que uma célula foi clicada
• Identificar se a célula é válida (se a célula já foi ocupada)
• Atualizar o estado do jogo (adicionar jogada no tabuleiro)
• Validar o estado jogo
  • Verificar se o jogador ganhou
  • Verificar se o jogo terminou em empate
• Encerrar o jogo ou trocar o turno do jogador
• Voltar ao início

O fluxo ficaria algo parecido com isso:

Justamente por não ter uma lógica muito complicada, o jogo da velha é perfeito para dar seus primeiros passos no Javascript!

Agora, vamos para a parte divertida!