Resumo do Curso de Jogo da Vera em HTML, CSS e JavaScript

Fala pessoal chegamos no final do nosso curso para fazer o jogo da Vera em HTML, CSS e JavaScript. Usamos a implementação de objeto aqui para fazer o jogo. Bem legal. Tá, vitória jogador. Então, vamos dar uma revisada em tudo que a gente fez aqui. Tá? Começamos lá de cima, definindo tabuleiro como objeto. Devido à estrutura de HTML que tem um adiv, com 9 divs para cada classe de espaço e um ID único para cada um desses caras. Definimos o quadrante usando a convenção de esquerda, centro e direita. Esquerda a cima seria aqui, por exemplo, esquerda esse cara aqui. Esquerda a cima, esquerda a baixo. Centro, centro a cima, centro a baixo. Direita, direita a cima, direita a baixo. Então, usamos essa convenção para poder definir o tabuleiro. Definimos variáveis constantes para x e o. Iniciamos o jogador para ter cada turno jogador muda. Tem um vencedor para dizer se tem vencedor ou não e deu empate a essa flag aqui. Começa tudo lá, você adiciona um event lessoner para cada um desses espaços. Quando você clica, ele chama a função jogar que a gente definiu aqui. Função jogar vai fazer o seguinte, checa primeiro se tiver um vencedor ou um empate e retorna da função e o jogo não dá para jogar mais. Aí, o que é que ele faz? Se o jogo continuar, ele checa que se o espaço já está marcado, se já estiver marcado, a gente não faz nada, retorna e o jogador tem que marcar outro local. Se não estiver preenchido ainda, a gente vai marcar o tabuleiro no espaço. A gente definiu a função lá em cima, é só modificar o tabuleiro. Pega o tabuleiro, crie uma copy e redefinha o tabuleiro. Naquele espaço, ponha o x ou o dependendo do jogador. Adiciona uma classe para que ele meta HTML, essa classe que marcador x ou marcador traço o para poder mostrar o o ou o x que a gente adicionou usando o piseu do seleto after, que vai incluir esse content, que é o conteúdo, um caractere com uma fonte de bem grande. Nessa div que tem classes de espaço e marcador x ou marcador o, lembre-se que o after vai incluir esse conteúdo dentro da div, logo após o conteúdo no final, mas não é fora. Depois de adicionar a classe, marcar o tabuleiro, a gente checa se tem algum vencedor. A gente checa pela vitória, essa função que a gente fez, checa lá um monte de coisas. Tem simples algoritmo, vai checar primeiro nas linhas, se tiver alguma vitória, depois checa na vertical, depois chega a diagonal e a anti-diagonal. A gente fez um monte de coisa aqui e para checar a vitória retorna no, se não for vitória, se for vitória retorna no lista com as três posições dos idês do selo HTML, para poder se relacionar e mudar a codifunga. Aí, depois, se tiver a posição de vitória, define o vencedor, mostra a mensagem na tela vitória jogador e finalmente muda a codifunga desses caras. Aí, se não for vitória, pode ter que checar por empate. Checar por empate só significa checar o tabuleiro se todas as posições estiverem preenchidas e a gente já sabe que não teve vitória inicialmente, mas a gente checa por empate. E se tiver todos preenchidos, significa que teve empate, não tem nenhuma jogada que pode fazer. Então, o jogo acabou com empate. Aí, mostra o mensagem de empate. Tá bom? A mensagem tem COVID, mas você pode mudar depois, tá? E, finalmente, muda o jogador, que só faz mudar o jogador de X para O e de O para X. A gente fez aqui bem simples. Tá bom? Então, esse é o nosso jogo da vela. Tem muita coisa que você poderia melhorar com um exercício, né? Eu deixo aí com um exercício. Muita coisa pode aprimorar. Tem várias coisas no código para refatorizar e usar outros métodos. Pode até tentar usar uma lista em vez de um objeto, um algoritmo mais eficiente para checar a vitória. Não usar variáveis globais. Tentar até usar uma classe ou alguma coisa, outra maneira de organizar o código, essas coisas, tá? E muda o estilo, aprimora esse estilo e várias coisas a fazer, tá? Então, por isso que eu só espero que tenha gostado e até a próxima. Obrigado.