<div class="controls">
<label for="level">Nível:</label>
<select id="level">
<option value="easy">Fácil</option>
<option value="hard">Difícil</option>
</select>
<button id="reset">Reiniciar</button>
</div>
<div class="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>
<h2>Placar</h2>
<p>Vitórias X: <span id="scoreX">0</span></p>
<p>Vitórias O: <span id="scoreO">0</span></p>
<p>Empates: <span id="scoreDraw">0</span></p>
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 5px;
}
.cell {
width: 100px;
height: 100px;
font-size: 2rem;
text-align: center;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.controls {
margin-top: 10px;
}
const cells = document.querySelectorAll('.cell');
const resetButton = document.getElementById('reset');
const scoreX = document.getElementById('scoreX');
const scoreO = document.getElementById('scoreO');
const scoreDraw = document.getElementById('scoreDraw');
const levelSelect = document.getElementById('level');
let board = Array(9).fill(null);
let currentPlayer = 'X';
let scores = { X: 0, O: 0, Draw: 0 };
let difficulty = 'easy';
function checkWinner() {
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 combo of winningCombinations) {
const [a, b, c] = combo;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a];
}
}
return board.includes(null) ? null : 'Empate';
}
function computerMove() {
let emptyCells = board.map((v, i) => v === null ? i : null).filter(v => v !== null);
if (emptyCells.length > 0) {
let moveIndex;
if (difficulty === 'easy') {
moveIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
} else {
moveIndex = minimax(board, 'O').index;
}
board[moveIndex] = 'O';
cells[moveIndex].textContent = 'O';
}
}
function minimax(newBoard, player) {
let emptyCells = newBoard.map((v, i) => v === null ? i : null).filter(v => v !== null);
let winner = checkWinner();
if (winner === 'X') return { score: -10 };
if (winner === 'O') return { score: 10 };
if (emptyCells.length === 0) return { score: 0 };
let moves = [];
for (let i of emptyCells) {
let move = { index: i };
newBoard[i] = player;
let result = minimax(newBoard, player === 'O' ? 'X' : 'O');
move.score = result.score;
newBoard[i] = null;
moves.push(move);
}
return player === 'O' ? moves.reduce((best, m) => (m.score > best.score ? m : best), { score: -Infinity }) : moves.reduce((best, m) => (m.score < best.score ? m : best), { score: Infinity });
}
function handleClick(event) {
const index = event.target.dataset.index;
if (!board[index] && checkWinner() === null) {
board[index] = currentPlayer;
event.target.textContent = currentPlayer;
let winner = checkWinner();
if (winner) {
updateScore(winner);
alert(winner === 'Empate' ? 'Deu empate!' : `${winner} venceu!`);
return;
}
currentPlayer = 'O';
setTimeout(() => {
computerMove();
currentPlayer = 'X';
let winner = checkWinner();
if (winner) {
updateScore(winner);
alert(winner === 'Empate' ? 'Deu empate!' : `${winner} venceu!`);
}
}, 500);
}
}
function updateScore(winner) {
if (winner === 'Empate') {
scores.Draw++;
} else {
scores[winner]++;
}
scoreX.textContent = scores.X;
scoreO.textContent = scores.O;
scoreDraw.textContent = scores.Draw;
}
function resetGame() {
board.fill(null);
cells.forEach(cell => cell.textContent = '');
currentPlayer = 'X';
}
function changeLevel() {
difficulty = levelSelect.value;
}
cells.forEach(cell => cell.addEventListener('click', handleClick));
resetButton.addEventListener('click', resetGame);
levelSelect.addEventListener('change', changeLevel);