Olá! Mundo…(mais um blog de um programador no ar)
Como todo mundo na programação já passou por este clichê, aqui não poderia ser diferente então o primeiro post desse... Leia mais
Jogo da Velha com HTML, CSS e JavaScript
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:
<!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
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
// 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:
