Um momento
Aula 14
Cursos / Jogo da Velha com HTML, CSS, e JavaScript
Refatorização e Possibilidades de Vitória no Jogo da Velha (Aula HTML, CSS, JavaScript)

Summary

Resumo da Aula sobre Reestruturação de Código

Nesta aula, discutimos a necessidade de reestruturação do código devido à complexidade crescente que já existe em produção. Aqui estão os principais pontos abordados:

Objetivos da Aula

  • Criar uma função para demarcar o tabuleiro.
  • Mudar a lógica de mudança do jogador.
  • Abordar o uso de variáveis globais, embora se opte por mantê-las temporariamente.

Estrutura do Código

  1. Criar Função marcarTabuleiro:

    • A função receberá um argumento que indicará o espaço selecionado.
    • Movimentar parte do código que modifica o tabuleiro para dentro dessa função.
    • Em vez de usar a variável global target, passaremos space como parâmetro.
  2. Função mudarJogador:

    • Uma função simples que alterará o jogador atual, também utilizando a variável global jogador.

Verificação de Vitória

  • Discutimos as condições de vitória em um jogo de tabuleiro.
  • As vitórias podem ocorrer nas seguintes configurações:
    • Linhas horizontais (3 maneiras).
    • Linhas verticais (3 maneiras).
    • Diagonais (2 maneiras).
  • Um algoritmo simples sugerido para checar a vitória envolve:
    • Verificar cada linha para ver se todas as posições estão preenchidas por um jogador.
    • Depois verificar as colunas.
    • Finalmente, checar as diagonais.

Após revisar essas ideias, a intenção é começar a implementação na próxima aula.

Video Transcript

Vamos voltar aqui, nessa aula vamos fazer a repartorização aqui, porque já tem muito código na produção jogar. Eu sei que essa parte aqui define uma... pode ser a sua própria função para demarcar tabuleiro. E essa aqui também pode ser para mudar o jogador. Eu sei que a gente está usando variáveis globais, eu não gosto muito dessa prática, mas vou deixar assim por enquanto. Então vamos criar uma função aqui de fora function, marcar tabuleiro, que vai levar com o argumento o... Vamos ver aqui o espaço, tá? Então a gente vai pegar e só mover essa parte aqui, que modifica o tabuleiro, e adiciona uma classe ao agradi. Vou recortar e colar aqui, vou chamar a função aqui, marcar tabuleiro, vou passar o espaço, que é o event.target, com um argumento. E esse marcar tabuleiro, pega o tabuleiro, que é um variável global, e faz um nova... define com um novo tabuleiro. Em vez de target, na ideia, vou falar o espaço, que está vindo da parâmetro da função. E o jogador é global agora, poderia também passar um variável para não ter acesso global. Posso fazer isso também, deixa assim mesmo, você pode modificar a sua maneira. Então tem o list, target class, então vamos ver se não deu problema. Event, no define, então deu problema aqui na linha 21. Porque eu usei event.target, tem que usar o espaço, que vem na variável do parâmetro da função. Salvar, iniciou, clicar, clicar, deu certo, tá? Vamos fazer a mesma coisa aqui para esse cara, falar mudar a jogador. E vou fazer uma função aqui em cima, chamar function, mudar a jogador, e vai ser bem simples, só aquela coisa. Usando o variável global, jogador. Tá bom? Então, o que a gente vai fazer agora? Vamos ver que... vamos checar pela vitória? Vamos começar a falar disso? Então você note que, quando a gente marca, faz o movimento do jogador x, a gente pode ter que checar pela vitória. Aí a gente... qual é a possibilidade de vitória? Vou dizer aqui. Essa é uma possibilidade aqui, deixa eu mostrar. Eu quero criar esse cara aqui para você ver. Então, olha aqui o... a grade aqui. Deixa eu remover esses caras. Então, se eu estivesse jogando com bola, por exemplo, eu poderia jogar e poderia ganhar dessa maneira aqui. Na linha. Essa é a primeira maneira, número um. Número dois é assim, poderia ganhar dessa maneira. Se a bola tivesse na esquerda, centro e direita, ou se tivesse a esquerda abaixo, centra abaixo, direita abaixo. Então, três até agora. Aí poderia também fazer dessa maneira aqui. Poderia ser verticalmente, né? Deixa eu copiar esse cara. Então, poderia também ganhar... Deixa eu mover um pouco aqui. E aí, poderia ganhar dessa maneira aqui. Número quatro, ou dessa maneira, com o centro acima, centro e centro abaixo, número cinco, ou dessa maneira aqui, número seis. Também poderia ganhar na diagonal, né? Na diagonal, seria... Aqui, aqui e aqui. Número sete, ou aqui, aqui e aqui, número oito. Então, um maneira bem simples, um algoritmo para poder checar a vitória, seria você checar se a bola tivesse para a enchida, em cada uma dessas oito possibilidades. Você pode primeiro checar as linhas, linha um, linha dois, linha três, fica verificando se toda a linha for para a enchida, significa a vitória. Se não, continua checando, continua checando. Depois, verifica as verticais, se todas são para a enchida, se não, continua checando, checando e verifica a diagonal e a anti-diagonal, tá? É um maneira simples. Então, eu já disse que tem várias maneiras de implementar isso, o algoritmo eficiente, aquelas coisas, vou fazer de maneira bem simples, tá? Então, a gente vai começar na próxima aula. Até lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: