Resumo do Transcript

Fala pessoal, estamos de volta. Então vamos começar a falar de como a gente vai fazer lógica desse jogo. A gente já fez a estrutura de HTML, aplicou os estilos e a gente já sabe como é que põe o X, uma bola na tela, é só aplicar a classe marcador O ou marcador traço X, que tem a classe espaço. Agora vamos pensar de como a gente vai fazer esse jogo. Então vou usar a implementação do jogo da velha e vou manter o tabuleiro dentro de um objeto, tá certo? Então há várias maneiras que a gente já falei no começo do curso de você implementar isso. Pode usar um array, uma lista, né? E outras maneiras. Vou usar um objeto, tá? Dentro desse objeto eu vou armazenar nove propriedades, uma para cada quadrante, né? Nesses casos vou usar o mesmo nome desses ideios, tá certo? Então vai ser um objeto com nove propriedades. O valor vai ser primeiro no, se não tiver nada marcado, ou vai ser X, ou vai ser O, dependendo do que for marcado, tá? Agora, em termos de evento de JavaScript, o jogo vai ser assim, você vai começar sempre com o jogador X, tá certo? Então vai ter dois jogadores, jogador 1, jogador 2. O jogador 1 é X, o jogador 2 é o bola ou O, tá? Então você vai começar aqui, você vai adicionar um evento, um click para cada um desse espaço, e quando você clicar em um desses caras, você vai passar o ID do espaço que foi clicado para poder identificar qual quadrante você clicou, tá bom? Qual dos espaços você clicou? Aí a gente vai fazer o movimento. A gente vai checar se já está marcado, tá? Se já estiver marcado, a gente não vai fazer nada, tá? O usuário vai ter que clicar em algum outro local. Mas se tiver espaço em branco, você vai marcar com o caractere do jogador, do turno que, do jogador que estiver no turno, tá bom? Nesse caso, vai ser o X primeiramente. Aí você clica aqui, por exemplo, ele vira um... A gente vai mostrar. Se eu clicar... Se eu começar com X, vou clicar no centro, quando eu clicar no centro, ele vai adicionar aqui marcado X, tá? Aí depois você adicionar isso, que está em branco, ele vai checar pela vitória, vai checar se o jogo acabou, vai ver se o jogador X ganhou ou não, tá? É só verificar, tem as possibilidades de vitória. A gente vai falar disso depois. Aí, se não for vitória, né? E pode ser que seja um empate. Então a gente vai checar por um empate. Aí depois disso, você vai ver se acabou o jogo, ou não, tá? E é isso. A gente vai falar mais detalhes disso depois. Então, vamos começar e criar nosso arquivo de JavaScript. Eu vou voltar ao editor de texto. Eu vou criar um arquivo aqui chamado script.js. Para poder injetar esse script no nosso documento de HTML, normalmente você põe o script antes do final do fechamento da bola. Então depois do tabuleiro, antes do fechamento de body, vou abrir um tag script. Se você quiser pôr o tipo text JavaScript, pode pôr. Opa. Tá procurando auto completar. Aí tem o src, que vai ser o nome do arquivo script.js. Abre a zona tag de fechamento dessa maneira, tá? Tá bom? Eu tenho auto complet. Agora vamos ver se funciona. Volta no arquivo script.js e vou falar console log. Iniciando o jogo, só para ver se realmente o script foi injetado. Primeiro o console é mensagem de iniciar no jogo. Se eu for aqui no inspector e for na aba do console, o web console, apareceu iniciando o jogo e o script foi injetado com sucesso. Com isso vamos lá. Então a gente tem que adicionar, fazer uma função aqui. Tem várias etapas. Então vamos fazer a variável aqui, começar com a variável aqui. Então vamos ter que ter variável para manter, armazenar o tabuleiro. Agrade. Então para isso eu vou usar um objeto, implementação que vou usar de objeto. Vou definir uma variável chamada tabuleiro, que vai ser um objeto. Esse objeto vai ter nove propriedades. A primeira vai ser o nome do ID desse cara, o primeiro cara que vai ser a esquerda acima. Eu vou estar dentro de aspas, tá? Esquerda, traço acima. E essa propriedade vai ter valor novo porque vai estar em branco inicialmente. Vou fazer isso para as oito outras. Quero que você pause e vide e faça por si mesmo. E aí, deu tudo certo? Na próxima vai ser a centro acima, vai ser no, valor da propriedade. Depois vai ser direita acima, vai ser no, valor da propriedade. E aí pode eu vou duplicar a sua linha porque vai ser a mesma coisa. E vou fazer esquerda, centro e direita. E vou fazer isso assim. E faz a mesma coisa para a esquerda abaixo. E vou selecionar a seleção dupla e digitar abaixo para esses caras. Esquerda abaixo, centro abaixo, direita abaixo, tá? Então, criamos o tabuleiro, tá? Agora, com esse cara aqui, a gente vai modificar, por exemplo, se eu clicar no do meio, é o centro, ele vai pegar esse tabuleiro, modificar essa propriedade, o valor vai virar o x ou o, tá? X ou o, dependendo do jogador que for para encher aquele quadrado, tá? E assim por diante, tá? X ou o. Para poder, não tem que digitar x ou o, todo o tempo vou criar duas constantes para o jogador 1 e para o jogador 2. Jogador 1, vou digitar tudo em letra maiúscula, vai ser o jogador com x, tá? Vai ser a constante com o carácter x. E o jogador 2, vai ser a constante com o carácter o, letra o, tá? Representado bola ou circo. Então, vou usar essas constantes, em vez de digitar x ou o, tá? Pode até mudar para o jogador x ou o jogador, sei lá, depende de você. Vou usar 1 ou 2, porque eu posso mudar, quem vai começar, poderia ser o, o que iria começar, então eu poderia mudar assim e não iria afetar os caras. Tá bom? Então, eu vou manter uma variável aqui para saber quem é o jogador desse turno. Eu vou digitar a variável jogador e vou inicializar com o jogador 1. Ah, eu tenho que digitar letra, tá? Para poder modificar as variáveis, vai ficar mudando. Para o jogador 1, jogador 2, jogador 1, jogador 2, sim por diante. Vou iniciar quem vai começar o jogador 1, tá? Que é o x. Se lembra que esse cara é somente uma variável constante para substituir o valor que vai ser, na verdade, x, tá? Então, é o jogador 1 que vai começar. Então, vamos começar assim. Depois, a gente adiciona mais variáveis quando precisar. Variáveis para dizer se teve empate, se o jogo acabou, quem for vencedor é sim por diante, tá bom? Então, vamos por essa aula só e até a próxima.