Para criar um jogo da velha com HTML, CSS e JavaScript, você pode seguir a estrutura
abaixo.
HTML ([Link])
Este é o esqueleto do jogo. Ele define a estrutura da página, incluindo o título, o tabuleiro
do jogo (uma grade de 3x3) e uma área para exibir o status do jogo (quem venceu, de
quem é a vez, etc.).
<!DOCTYPE html>
<html lang="pt-br">
<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="[Link]">
</head>
<body>
<h1>Jogo da Velha</h1>
<div class="game-board">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<div class="status"></div>
<button class="restart">Reiniciar Jogo</button>
<script src="[Link]"></script>
</body>
</html>
CSS ([Link])
O CSS é responsável pela aparência do jogo. Ele define o layout do tabuleiro, o estilo
das células, a fonte, as cores e a forma como as peças 'X' e 'O' são exibidas.
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #2c3e50;
color: #ecf0f1;
}
h1 {
margin-bottom: 20px;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
background-color: #34495e;
border: 5px solid #34495e;
border-radius: 5px;
}
.cell {
width: 100px;
height: 100px;
background-color: #ecf0f1;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
cursor: pointer;
border-radius: 3px;
transition: background-color 0.3s ease;
}
.cell:hover {
background-color: #bdc3c7;
}
.cell.x {
color: #e74c3c;
}
.cell.o {
color: #3498db;
}
.status {
margin-top: 20px;
font-size: 1.5em;
font-weight: bold;
}
.restart {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background-color: #27ae60;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.restart:hover {
background-color: #2ecc71;
}
JavaScript ([Link])
O JavaScript é o cérebro do jogo. Ele lida com toda a lógica, como:
• Identificar qual jogador está na vez.
• Manipular os cliques nas células do tabuleiro.
• Verificar se há um vencedor ou um empate após cada jogada.
• Atualizar o status do jogo para o usuário.
• Reiniciar o jogo quando o botão for clicado.
const cells = [Link]('.cell');
const statusDisplay = [Link]('.status');
const restartButton = [Link]('.restart');
let gameActive = true;
let currentPlayer = 'X';
let gameState = ['', '', '', '', '', '', '', '', ''];
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
const handleCellPlayed = (clickedCell, clickedCellIndex) => {
gameState[clickedCellIndex] = currentPlayer;
[Link] = currentPlayer;
[Link]([Link]());
};
const handlePlayerChange = () => {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
[Link] = `É a vez do jogador ${currentPlayer}`;
};
const handleResultValidation = () => {
let roundWon = false;
for (let i = 0; i < [Link]; i++) {
const winCondition = winningConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break;
}
}
if (roundWon) {
[Link] = `O jogador ${currentPlayer} venceu!`;
gameActive = false;
return;
}
let roundDraw = ;
if (roundDraw) {
[Link] = 'O jogo empatou!';
gameActive = false;
return;
}
handlePlayerChange();
};
const handleCellClick = (event) => {
const clickedCell = [Link];
const clickedCellIndex = parseInt([Link]('data-index'));
if (gameState[clickedCellIndex] !== '' || !gameActive) {
return;
}
handleCellPlayed(clickedCell, clickedCellIndex);
handleResultValidation();
};
const handleRestartGame = () => {
gameActive = true;
currentPlayer = 'X';
gameState = ['', '', '', '', '', '', '', '', ''];
[Link] = `É a vez do jogador ${currentPlayer}`;
[Link](cell => {
[Link] = '';
[Link]('x', 'o');
});
};
[Link](cell => [Link]('click', handleCellClick));
[Link]('click', handleRestartGame);
[Link] = `É a vez do jogador ${currentPlayer}`;