Shefarol Soluções Web

Jogo da velha - Voltar

Placar Zerar

Vitórias X: 0
Vitórias O: 0
Empates: 0

Velha
Código em HTML
<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>

 

Código em CSS
.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; 
}

 

Código em Javascript
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);