Jogo da Velha Online | HTML, CSS, JavaScript - Aprenda a Jogar

Introdução

Neste projeto, você aprenderá como criar um jogo da velha (Tic-Tac-Toe) usando HTML, CSS e JavaScript. O jogo da velha é um jogo para dois jogadores onde os jogadores se revezam marcando X ou O em uma grade 3x3. O objetivo é obter três marcas em linha, seja horizontalmente, verticalmente ou diagonalmente. Você criará os arquivos HTML, CSS e JavaScript necessários e implementará a lógica do jogo passo a passo.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura básica do jogo da velha usando HTML.
Como adicionar estilos CSS para definir a aparência dos elementos do jogo.
Como implementar a lógica do jogo usando JavaScript.
Como lidar com as interações do usuário, verificar vitórias ou empates e atualizar as pontuações.
Como renderizar o tabuleiro do jogo e atualizar o indicador de turno.
Como permitir que os jogadores reiniciem o jogo e comecem uma nova rodada.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Estruturar um arquivo HTML para uma aplicação web.
Estilizar elementos usando classes CSS.
Implementar a lógica do jogo usando JavaScript.
Lidar com as interações do usuário e atualizar a interface do usuário (UI) de acordo.
Renderizar o tabuleiro do jogo e atualizar o indicador de turno.
Criar ouvintes de eventos (event listeners) e lidar com eventos em JavaScript.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível avançado com uma taxa de conclusão de 38.46%.

Criar o Arquivo HTML

Crie um novo arquivo chamado index.html e adicione o seguinte código a ele.

cd ~/project
touch index.html

Este código configura a estrutura básica do jogo da velha (Tic-Tac-Toe).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* Estilos CSS para o jogo */
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="text-3xl font-bold mb-4 text-gray-900">Tic-Tac-Toe</h1>
      <div id="board" class="grid grid-cols-3 gap-4 mb-4">
        <!-- Células do tabuleiro do jogo -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Pontuações dos jogadores -->
      </div>
      <div
        id="turn-indicator"
        class="text-2xl font-bold mb-4 text-gray-900"
      ></div>
      <button
        id="reset-button"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Reset Game
      </button>
    </div>

    <script>
      // Código JavaScript para a lógica do jogo
    </script>
  </body>
</html>

✨ Verificar Solução e Praticar

Adicionar Estilos CSS

Dentro da tag <style> na seção <head> do arquivo HTML, adicione os estilos CSS necessários para o jogo. Esses estilos definem a aparência dos elementos do jogo, como o tabuleiro, as células, as pontuações e os botões.

<style>
  .board-cell {
    width: 100px;
    height: 100px;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #app {
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    font-size: 32px;
    color: #333;
  }

  .text-gray-900 {
    color: #333 !important;
  }

  .text-2xl {
    font-size: 24px;
  }

  .bg-blue-500 {
    background-color: #4267b2;
  }

  .bg-blue-500:hover {
    background-color: #3b5ca0;
  }

  .bg-blue-700 {
    background-color: #385898;
  }

  .text-white {
    color: #fff !important;
  }

  .rounded {
    border-radius: 4px;
  }

  .highlight {
    background-color: #ffed4a;
  }
</style>

Você também pode adicionar style.css ao projeto e vinculá-lo ao arquivo HTML usando a tag <link>.

<link rel="stylesheet" href="style.css" />

Escolha o método que preferir.

✨ Verificar Solução e Praticar

Adicionar o Código JavaScript da Lógica do Jogo

Dentro da tag <script> no final do arquivo HTML, adicione o código JavaScript que lida com a lógica do jogo. Este código acompanha o estado do jogo, lida com as interações do usuário, verifica se há uma vitória ou empate, atualiza as pontuações e renderiza o tabuleiro do jogo.

<script>
  // Código da lógica do jogo
</script>

✨ Verificar Solução e Praticar

Inicializar as Variáveis do Jogo

Declare as variáveis necessárias no início do código JavaScript. Essas variáveis armazenarão o estado do jogo, as pontuações dos jogadores e outras informações relevantes.

// Lógica do jogo
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];

✨ Verificar Solução e Praticar

Lidar com o Clique na Célula

Crie uma função chamada handleCellClick que será chamada quando uma célula no tabuleiro do jogo for clicada. Esta função lidará com a lógica principal do jogo, como atualizar o tabuleiro, verificar se há uma vitória, atualizar as pontuações e mudar o jogador atual.

function handleCellClick(index) {
  if (gameEnded || board[index] !== "") return;
  board[index] = currentPlayer;
  renderBoard();

  if (checkWin()) {
    updateScore();
    highlightWinningCells();
    alert(`Player ${currentPlayer} wins!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("It's a tie!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}

✨ Verificar Solução e Praticar

Verificar se Há uma Vitória

Crie uma função chamada checkWin que verifica se há uma condição de vitória no tabuleiro do jogo. Esta função compara os valores no array board com as combinações vencedoras para determinar se um jogador ganhou o jogo.

function checkWin() {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (let i = 0; i < winningCombinations.length; i++) {
    const [a, b, c] = winningCombinations[i];
    if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
      winningCells = [a, b, c];
      return true;
    }
  }
  return false;
}

✨ Verificar Solução e Praticar

Reiniciar o Jogo

Crie uma função chamada resetGame que reinicia o estado do jogo para seus valores iniciais. Esta função é chamada quando o botão de reinício é clicado e limpa o tabuleiro, reinicia o jogador atual, limpa as células vencedoras, atualiza o indicador de turno e renderiza o tabuleiro.

function resetGame() {
  board.fill("");
  currentPlayer = "X";
  gameEnded = false;
  winningCells = [];
  updateTurnIndicator();
  renderBoard();
}

✨ Verificar Solução e Praticar

Atualizar as Pontuações dos Jogadores

Crie uma função chamada updateScore que atualiza as pontuações dos jogadores. Esta função é chamada quando um jogador ganha um jogo. Ela incrementa a pontuação do jogador correspondente e atualiza a exibição da pontuação na página.

function updateScore() {
  if (currentPlayer === "X") {
    playerXScore++;
    document.getElementById("player-x-score").textContent = playerXScore;
  } else {
    playerOScore++;
    document.getElementById("player-o-score").textContent = playerOScore;
  }
}

✨ Verificar Solução e Praticar

Atualizar o Indicador de Turno

Crie uma função chamada updateTurnIndicator que atualiza o indicador de turno na página para mostrar o turno do jogador atual.

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Turno Atual: Jogador ${currentPlayer}`;
}

✨ Verificar Solução e Praticar

Destacar as Células Vencedoras

Crie uma função chamada highlightWinningCells que adiciona uma classe de destaque (highlight) às células vencedoras no tabuleiro do jogo. Esta função é chamada quando um jogador ganha o jogo.

function highlightWinningCells() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    if (winningCells.includes(index)) {
      cell.classList.add("highlight");
    }
  });
}

✨ Verificar Solução e Praticar

Renderizar o Tabuleiro do Jogo

Crie uma função chamada renderBoard que atualiza o tabuleiro do jogo na página de acordo com o estado atual do array board. Esta função é chamada após cada jogada do jogador para atualizar os visuais.

function renderBoard() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    cell.textContent = board[index];
    cell.classList.remove("highlight");
  });
}

✨ Verificar Solução e Praticar

Adicionar Event Listeners

Adicione event listeners às células do tabuleiro do jogo e ao botão de reset. Estes event listeners chamam as funções correspondentes quando os eventos ocorrem.

// Event listeners
const cells = document.querySelectorAll(".board-cell");
cells.forEach((cell, index) => {
  cell.addEventListener("click", () => handleCellClick(index));
});

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", resetGame);

✨ Verificar Solução e Praticar

Renderização Inicial

No final do código JavaScript, adicione o código para a renderização inicial. Este código configura o estado inicial do jogo, atualiza o indicador de turno e renderiza o tabuleiro do jogo.

// Initial render
updateTurnIndicator();
renderBoard();

✨ Verificar Solução e Praticar

Executar o Projeto

Agora você pode executar o projeto e jogar o Jogo da Velha!

Clique no botão Go Live no canto inferior direito da WebIDE para executar o projeto.

Isso abrirá o projeto na aba Web 8080.

Clique nas células para fazer suas jogadas e clique no botão de reset para iniciar um novo jogo.

✨ Verificar Solução e Praticar

Resumo

Parabéns! Você criou com sucesso um jogo da velha usando HTML, CSS e JavaScript. O projeto abordou a criação do arquivo HTML, a adição de estilos CSS, a implementação da lógica do jogo e o tratamento das interações do usuário. O jogo permite que dois jogadores se revezem, verifica se há uma vitória ou empate, atualiza as pontuações e destaca as células vencedoras. Agora você pode executar o projeto e se divertir jogando Jogo da Velha!

Crie um Jogo da Velha Web

Introdução

👀 Pré-visualização

🎯 Tarefas

🏆 Conquistas

Criar o Arquivo HTML

Adicionar Estilos CSS

Adicionar o Código JavaScript da Lógica do Jogo

Inicializar as Variáveis do Jogo

Lidar com o Clique na Célula

Verificar se Há uma Vitória

Reiniciar o Jogo

Atualizar as Pontuações dos Jogadores

Atualizar o Indicador de Turno

Destacar as Células Vencedoras

Renderizar o Tabuleiro do Jogo

Adicionar Event Listeners

Renderização Inicial

Executar o Projeto

Resumo