×
Outbyte PC Repair
Outbyte Driver Updater

Crie um jogo da velha para dois jogadores usando JavaScript, HTML e CSS

2023/01/27
Crie um jogo da velha para dois jogadores usando JavaScript, HTML e CSS

Tic-tac-toe é um jogo popular que usa uma grade 3 × 3. O objetivo do jogo é ser o primeiro jogador a colocar três símbolos em uma linha reta horizontal, vertical ou diagonal.

Você pode criar um jogo da velha que seja executado em um navegador da Web usando HTML, CSS e JavaScript. Você pode usar HTML para adicionar o conteúdo que contém a grade 3 × 3 e CSS para adicionar algum estilo ao design do jogo.

Você pode então usar JavaScript para a funcionalidade do jogo. Isso inclui colocar símbolos, revezando-se entre os jogadores e decidindo quem ganha.

Como criar a interface do usuário para o jogo Tic-Tac-Toe

Tic-tac-toe é um dos muitos jogos que você pode fazer ao aprender a programar. É bom praticar um novo idioma ou ambiente, como o mecanismo de desenvolvimento de jogos PICO-8.

Para criar um jogo Tic-tac-toe executado em um navegador da Web, você precisará adicionar HTML ao conteúdo da página. Você pode estilizar isso usando CSS.

  1. Crie um novo arquivo chamado “index.html”.
  2. Dentro de “index.html”, adicione a estrutura básica de um arquivo HTML: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Tic Tac Toe Game</title>
      </head>
      <body>

      </body>
    </html>

  3. Dentro da tag body do HTML, adicione uma tabela que contenha três linhas, com três células em cada linha: <div class="container">
      <table>
        <tr>
          <td id="1"></td>
          <td id="2"></td>
          <td id="3"></td>
        </tr>
        <tr>
          <td id="4"></td>
          <td id="5"></td>
          <td id="6"></td>
        </tr>
        <tr>
          <td id="7"></td>
          <td id="8"></td>
          <td id="9"></td>
        </tr>
      </table>
    </div>
  4. Na mesma pasta do seu arquivo HTML, crie um novo arquivo chamado “styles.css”.
  5. Dentro do arquivo CSS, adicione um pouco de estilo à sua grade 3 por 3: table {
      border-collapse: collapse;
      margin: 0 auto;
    }

    td {
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid black;
    }

  6. Vincule o arquivo CSS ao seu arquivo HTML adicionando-o à tag head: <link rel="stylesheet" type="text/css" href="styles.css">

Como se revezam adicionando símbolos ao tabuleiro de jogo

No jogo, haverá dois jogadores, cada um com um símbolo “X” ou “O”. Você pode adicionar um símbolo “X” ou “O” clicando em uma das células da grade. Isso continuará até que um de vocês tenha criado uma linha reta horizontal, vertical ou diagonal.

Você pode adicionar essa funcionalidade usando JavaScript.

  1. Na mesma pasta que seus arquivos HTML e CSS, crie um arquivo JavaScript chamado “script.js”.
  2. Vincule o arquivo JavaScript ao seu arquivo HTML adicionando o script na parte inferior da tag body: <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  3. Dentro do arquivo JavaScript, adicione uma string para representar o símbolo do jogador. Pode ser “X” ou “O”. Por padrão, o primeiro jogador colocará um “X”: let playerSymbol = "X";
  4. Adicione outra variável para acompanhar se o jogo terminou: let gameEnded = false
  5. Cada célula na tabela HTML possui um ID entre 1 e 9. Para cada célula na tabela, adicione um event listener que será executado sempre que um usuário clicar na célula: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {

        }
      );
    }

  6. Dentro do ouvinte de eventos, altere o HTML interno para exibir o símbolo atual. Certifique-se de usar uma instrução condicional JavaScript para primeiro garantir que a célula esteja vazia e que o jogo ainda não tenha terminado: if (this.innerHTML === "" &&! gameEnded) {
      this.innerHTML = playerSymbol;
    }
  7. Adicione uma classe ao elemento HTML para estilizar o símbolo que será exibido na grade. O nome das classes CSS será “X” ou “O”, dependendo do símbolo: this.classList.add(playerSymbol.toLowerCase());
  8. Dentro do arquivo “styles.css”, adicione essas duas novas classes para os símbolos “X” e “O”. Os símbolos “X” e “O” serão exibidos em cores diferentes: .x {
      color: blue;
      font-size: 80px;
    }

    .o {
      color: red;
      font-size: 80px;
    }

  9. No arquivo JavaScript, após alterar o innerHTML para exibir o símbolo, troque o símbolo. Por exemplo, se o jogador acabou de colocar um “X”, mude o próximo símbolo para “O”: if (playerSymbol === "X")
      playerSymbol = "O"
    else
      playerSymbol = "X"
  10. Para executar o jogo, abra o arquivo “index.html” em um navegador da Web para exibir a grade 3 por 3:
    Grade vazia Tic-Tac-Toe no navegador
  11. Comece colocando símbolos na grade clicando nas células. O jogo alternará entre os símbolos “X” e “O”:
    Jogo Tic-Tac-Toe no navegador mostrando os símbolos

Como determinar o vencedor

No momento, o jogo continuará mesmo que um jogador tenha colocado três símbolos consecutivos. Você precisará adicionar uma condição final para verificar isso após cada turno.

  1. Dentro do seu arquivo JavaScript, adicione uma nova variável para armazenar todas as possíveis posições “vencedoras” para a grade 3 por 3. Por exemplo, “[1,2,3]” é a linha superior ou “[1,4,7]” é uma linha diagonal. let winPos = [
      [1, 2, 3], [4, 5, 6],
      [7, 8, 9], [1, 4, 7],
      [2, 5, 8], [3, 6, 9],
      [1, 5, 9], [3, 5, 7]
    ];
  2. Adicione uma nova função chamada checkWin(): function checkWin() {

    }

  3. Dentro da função, percorra cada uma das possíveis posições vencedoras: for (let i = 0; i < winPos.length; i++) {

    }

  4. Dentro do loop for, verifique se todas as células contêm o símbolo do jogador: if (
      document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][2]).innerHTML === playerSymbol
    ) {

    }

  5. Se a condição for verdadeira, todos os símbolos estarão em uma linha reta. Dentro da instrução if, exiba uma mensagem para o usuário. Você também pode alterar o estilo do elemento HTML adicionando uma classe CSS chamada “win”: document.getElementById(winPos[i][0]).classList.add("win");
    document.getElementById(winPos[i][1]).classList.add("win");
    document.getElementById(winPos[i][2]).classList.add("win");
    gameEnded = true;

    setTimeout(function() {
      alert(playerSymbol + "wins!");
    }, 500);

  6. Adicione esta classe CSS “win” ao arquivo “styles.css”. Quando o jogador vencer, ele mudará a cor de fundo das células vencedoras para amarelo: .win {
      background-color: yellow;
    }
  7. Chame a função checkWin() toda vez que um jogador jogar, dentro do manipulador de eventos adicionado nas etapas anteriores: for (let i = 1; i <= 9; i++) {
      // Whenever a player clicks on a cell
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {
          if (this.innerHTML === "" &&! gameEnded) {
            // Display either "X"or "O"in the cell, and style it
            this.innerHTML = playerSymbol;
            this.classList.add(playerSymbol.toLowerCase());

            // Check if a player has won
            checkWin();

            // Swap the symbol to the other one for the next turn
            if (playerSymbol === "X")
              playerSymbol = "O"
            else
              playerSymbol = "X"
          }
        }
      );
    }

Como Redefinir o Tabuleiro de Jogo

Depois que um jogador ganha o jogo, você pode redefinir o tabuleiro de jogo. Você também pode redefinir o tabuleiro de jogo em caso de empate.

  1. No arquivo HTML, após a tabela, adicione um botão de reset: <button id="reset">Reset</button>
  2. Adicione um pouco de estilo ao botão de redefinição: .container {
      display: flex;
      flex-direction: column;
    }

    #reset {
      margin: 48px 40%;
      padding: 20px;
    }

  3. No arquivo JavaScript, adicione um manipulador de eventos que será executado sempre que o usuário clicar no botão de reinicialização: document.getElementById("reset").addEventListener(
      "click",
      function() {

      }
    );

  4. Para cada célula na grade, obtenha o elemento HTML usando a função getElementById(). Redefina o innerHTML para remover os símbolos “O” e “X” e remova todos os outros estilos CSS: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).innerHTML = "";
      document.getElementById(i.toString()).classList.remove("x");
      document.getElementById(i.toString()).classList.remove("o");
      document.getElementById(i.toString()).classList.remove("win");
      gameEnded = false;
    }
  5. Execute o jogo abrindo o arquivo “index.html” em um navegador da web.
  6. Comece colocando os símbolos “X” e “O” na grade. Tente fazer um dos símbolos vencer.
    Vencedor do Tic Tac Toe
  7. Pressione o botão de reset para redefinir o tabuleiro de jogo.
    Tic-tac-toe com botão de reset

Aprendendo JavaScript fazendo jogos

Você pode continuar melhorando suas habilidades de programação criando mais projetos em JavaScript. É fácil criar jogos e ferramentas simples em um ambiente da Web, usando tecnologias abertas e multiplataforma, como JavaScript e HTML.

Não há melhor maneira de melhorar sua programação do que praticar a escrita de programas!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *