Jogo da Velha com HTML, CSS e JavaScript

Por Paulo RB em 31/05/2024

Vamos hoje desenvolver uma atividade que é comum em alguns testes de programação onde iremos desenvolver um simples jogo da velha usando apenas HTML, CSS e JavaScript.

Primeiramente vamos criar três arquivos chamados index.html, styles.css e game.js.

O Arquivo index.html irá conter a estrutura básica do nosso jogo, o arquivo styles.css irá conter o código responsável pela formatação do nosso jogo e o arquivo game.js será responsável por realizar toda a lógica.

Então vamos lá. Abra no seu editor de código o arquivo index.html e cole o seguinte conteúdo:

Copy Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo da Velha</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gameBoard" class="game-board"></div>
    <button class="btn-restart" onclick="startGame()">Reiniciar Jogo</button>
    <script src="game.js"></script>
</body>
</html>

Agora vamos montar o arquivo styles.css

Copy Code


body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

.cell:hover {
    background-color: #e1e1e1;
}

.btn-restart {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: background-color 0.3s;
}

.btn-restart:hover {
    background-color: #0056b3;
}

e por últimos vamos a parte mais interessante que é a lógica do nosso jogo

Copy Code


// Inicializa o tabuleiro como um array vazio.
const board = [];
// Obtém o elemento HTML onde o tabuleiro do jogo será exibido.
const gameBoard = document.getElementById('gameBoard');
// Define o número de linhas e colunas do tabuleiro.
const rows = 3;
const cols = 3;
// Define qual jogador começa o jogo. 'X' será o primeiro.
let currentPlayer = 'X';

// Função para iniciar ou reiniciar o jogo.
function startGame() {
    // Limpa o conteúdo do tabuleiro no HTML para um novo jogo.
    gameBoard.innerHTML = '';
    // Reinicia o jogador para 'X'.
    currentPlayer = 'X';
    // Preenche o tabuleiro com células vazias e adiciona elementos HTML para cada célula.
    for (let i = 0; i < rows; i++) {
        board[i] = [];
        for (let j = 0; j < cols; j++) {
            board[i][j] = '';
            const cell = document.createElement('div');
            // Adiciona a classe 'cell' para estilização.
            cell.classList.add('cell');
            // Armazena a posição da célula para uso posterior.
            cell.dataset.row = i;
            cell.dataset.col = j;
            // Adiciona um ouvinte de evento para tratar o clique na célula.
            cell.addEventListener('click', cellClicked);
            // Adiciona a célula ao tabuleiro no HTML.
            gameBoard.appendChild(cell);
        }
    }
}

// Função chamada quando uma célula é clicada.
function cellClicked() {
    // Obtém a linha e coluna da célula clicada.
    const row = this.dataset.row;
    const col = this.dataset.col;
    // Verifica se a célula já está ocupada.
    if (board[row][col] !== '') return;
    // Define o jogador atual na célula e atualiza o texto exibido.
    this.innerText = currentPlayer;
    board[row][col] = currentPlayer;
    // Verifica se o jogador atual ganhou.
    if (checkWinner(currentPlayer)) {
        alert(currentPlayer + ' ganhou!');
        startGame();
        return;
    }
    // Verifica se o jogo terminou em empate.
    if (checkDraw()) {
        alert('Empate!');
        startGame();
        return;
    }
    // Troca o jogador atual.
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}

// Função para verificar se há um vencedor.
function checkWinner(player) {
    // Verifica todas as linhas para ver se há uma vitória.
    for (let i = 0; i < rows; i++) {
        if (board[i].every(cell => cell === player)) return true;
    }
    // Verifica todas as colunas para ver se há uma vitória.
    for (let j = 0; j < cols; j++) {
        if (board.map(row => row[j]).every(cell => cell === player)) return true;
    }
    // Verifica as duas diagonais para ver se há uma vitória.
    if (board.map((row, idx) => row[idx]).every(cell => cell === player)) return true;
    if (board.map((row, idx) => row[cols - 1 - idx]).every(cell => cell === player)) return true;
    return false;
}

// Função para verificar se o jogo terminou em empate.
function checkDraw() {
    // Verifica se todas as células estão preenchidas e nenhuma condição de vitória foi atendida.
    return board.flat().every(cell => cell !== '');
}

// Evento que inicializa o jogo assim que o conteúdo do DOM estiver carregado.
document.addEventListener('DOMContentLoaded', startGame);

E por fim o resultado da nossa atividade: