307 lines
7.7 KiB
JavaScript
307 lines
7.7 KiB
JavaScript
'use strict';
|
|
|
|
// Referencias DOM
|
|
const boardDiv = document.getElementById('board');
|
|
const statusDiv = document.getElementById('status');
|
|
const restartBtn = document.getElementById('restart-btn');
|
|
const playerSideSelect = document.getElementById('player-side');
|
|
const scorePlayerSpan = document.getElementById('score-player');
|
|
const scoreAiSpan = document.getElementById('score-ai');
|
|
const scoreDrawSpan = document.getElementById('score-d');
|
|
|
|
// Constantes
|
|
const WIN_COMBOS = [
|
|
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Filas
|
|
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columnas
|
|
[0, 4, 8], [2, 4, 6] // Diagonales
|
|
];
|
|
|
|
let board = Array(9).fill('');
|
|
let gameOver = false;
|
|
let playerSide = 'X';
|
|
let aiSide = 'O';
|
|
let scores = { player: 0, ai: 0, D: 0 };
|
|
|
|
function loadScores() {
|
|
try {
|
|
const raw = localStorage.getItem('ttt_ai_scores');
|
|
if (raw) {
|
|
const parsed = JSON.parse(raw);
|
|
if (parsed && typeof parsed === 'object') {
|
|
scores.player = Number(parsed.player) || 0;
|
|
scores.ai = Number(parsed.ai) || 0;
|
|
scores.D = Number(parsed.D) || 0;
|
|
}
|
|
}
|
|
} catch (_) {
|
|
// Ignorar errores
|
|
}
|
|
}
|
|
|
|
function saveScores() {
|
|
try {
|
|
localStorage.setItem('ttt_ai_scores', JSON.stringify(scores));
|
|
} catch (_) {
|
|
// Ignorar errores
|
|
}
|
|
}
|
|
|
|
function updateScoreUI() {
|
|
if (scorePlayerSpan) scorePlayerSpan.textContent = String(scores.player);
|
|
if (scoreAiSpan) scoreAiSpan.textContent = String(scores.ai);
|
|
if (scoreDrawSpan) scoreDrawSpan.textContent = String(scores.D);
|
|
}
|
|
|
|
function initBoardDom() {
|
|
// Si ya existen 9 hijos, reutilizarlos (mejor rendimiento)
|
|
if (boardDiv.children.length === 9) {
|
|
Array.from(boardDiv.children).forEach(c => {
|
|
c.classList.remove('win');
|
|
c.textContent = '';
|
|
c.setAttribute('aria-label', 'Casilla');
|
|
c.removeEventListener('click', onCellClick);
|
|
c.addEventListener('click', onCellClick);
|
|
c.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') onCellClick(e);
|
|
});
|
|
});
|
|
boardDiv.setAttribute('aria-disabled', 'false');
|
|
return;
|
|
}
|
|
|
|
boardDiv.textContent = '';
|
|
for (let idx = 0; idx < 9; idx++) {
|
|
const cell = document.createElement('button');
|
|
cell.type = 'button';
|
|
cell.className = 'cell';
|
|
cell.setAttribute('data-idx', String(idx));
|
|
cell.setAttribute('role', 'gridcell');
|
|
cell.setAttribute('aria-label', `Casilla ${idx + 1}`);
|
|
cell.addEventListener('click', onCellClick);
|
|
cell.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') onCellClick(e);
|
|
});
|
|
boardDiv.appendChild(cell);
|
|
}
|
|
boardDiv.setAttribute('aria-disabled', 'false');
|
|
}
|
|
|
|
function render() {
|
|
for (let i = 0; i < 9; i++) {
|
|
const el = boardDiv.children[i];
|
|
if (!el) continue;
|
|
el.textContent = board[i];
|
|
}
|
|
}
|
|
|
|
function setStatus(msg) {
|
|
statusDiv.textContent = msg;
|
|
}
|
|
|
|
function getWinCombo(b, player) {
|
|
for (const combo of WIN_COMBOS) {
|
|
const [a, m, c] = combo;
|
|
if (b[a] === player && b[m] === player && b[c] === player) {
|
|
return combo;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function isDraw(b) {
|
|
return b.every(cell => cell !== '') &&
|
|
!getWinCombo(b, 'X') && !getWinCombo(b, 'O');
|
|
}
|
|
|
|
function highlightCombo(combo) {
|
|
if (!combo) return;
|
|
combo.forEach(i => {
|
|
const el = boardDiv.children[i];
|
|
if (el) el.classList.add('win');
|
|
});
|
|
}
|
|
|
|
function endGame(result, combo) {
|
|
gameOver = true;
|
|
boardDiv.setAttribute('aria-disabled', 'true');
|
|
|
|
if (result === playerSide) {
|
|
setStatus('¡Tú ganas! 🎉');
|
|
scores.player += 1;
|
|
highlightCombo(combo);
|
|
} else if (result === aiSide) {
|
|
setStatus('¡La máquina gana! 🤖');
|
|
scores.ai += 1;
|
|
highlightCombo(combo);
|
|
} else {
|
|
setStatus('¡Empate!');
|
|
scores.D += 1;
|
|
}
|
|
|
|
updateScoreUI();
|
|
saveScores();
|
|
}
|
|
|
|
function onCellClick(e) {
|
|
const target = e.currentTarget;
|
|
const idx = Number(target.getAttribute('data-idx'));
|
|
|
|
if (gameOver || !Number.isInteger(idx)) return;
|
|
// Solo permitir movimiento del jugador cuando sea su turno
|
|
const turn = nextTurn(board);
|
|
if (turn !== playerSide) return;
|
|
if (board[idx] !== '') return;
|
|
|
|
// Movimiento jugador
|
|
board[idx] = playerSide;
|
|
render();
|
|
|
|
// Comprobar fin
|
|
const combo = getWinCombo(board, playerSide);
|
|
if (combo) {
|
|
endGame(playerSide, combo);
|
|
return;
|
|
}
|
|
if (isDraw(board)) {
|
|
endGame('D', null);
|
|
return;
|
|
}
|
|
|
|
// Turno de la máquina
|
|
setStatus(`Turno de la máquina (${aiSide})`);
|
|
setTimeout(machineMove, 350);
|
|
}
|
|
|
|
function nextTurn(b) {
|
|
const xCount = b.filter(v => v === 'X').length;
|
|
const oCount = b.filter(v => v === 'O').length;
|
|
// En Tic-Tac-Toe empieza 'X'; si hay igual cantidad, le toca a 'X', si X > O, le toca 'O'
|
|
return xCount === oCount ? 'X' : 'O';
|
|
}
|
|
|
|
// Minimax con poda alfa-beta
|
|
function minimax(b, depth, isMaximizing, alpha, beta) {
|
|
const aiWin = getWinCombo(b, aiSide);
|
|
const playerWin = getWinCombo(b, playerSide);
|
|
|
|
if (aiWin) return 10 - depth;
|
|
if (playerWin) return depth - 10;
|
|
if (isDraw(b)) return 0;
|
|
|
|
if (isMaximizing) {
|
|
let best = -Infinity;
|
|
for (let i = 0; i < 9; i++) {
|
|
if (b[i] === '') {
|
|
b[i] = aiSide;
|
|
const score = minimax(b, depth + 1, false, alpha, beta);
|
|
b[i] = '';
|
|
best = Math.max(best, score);
|
|
alpha = Math.max(alpha, best);
|
|
if (beta <= alpha) break;
|
|
}
|
|
}
|
|
return best;
|
|
} else {
|
|
let best = Infinity;
|
|
for (let i = 0; i < 9; i++) {
|
|
if (b[i] === '') {
|
|
b[i] = playerSide;
|
|
const score = minimax(b, depth + 1, true, alpha, beta);
|
|
b[i] = '';
|
|
best = Math.min(best, score);
|
|
beta = Math.min(beta, best);
|
|
if (beta <= alpha) break;
|
|
}
|
|
}
|
|
return best;
|
|
}
|
|
}
|
|
|
|
function machineMove() {
|
|
if (gameOver) return;
|
|
|
|
// Si no es turno de la máquina, salir
|
|
const turn = nextTurn(board);
|
|
if (turn !== aiSide) return;
|
|
|
|
// Elegir mejor jugada con Minimax
|
|
let bestScore = -Infinity;
|
|
let move = null;
|
|
|
|
// Pequeña heurística: si está libre, prioriza centro (4) en primera jugada
|
|
if (board.every(c => c === '')) {
|
|
move = 4; // centro
|
|
} else {
|
|
for (let i = 0; i < 9; i++) {
|
|
if (board[i] === '') {
|
|
board[i] = aiSide;
|
|
const score = minimax(board, 0, false, -Infinity, Infinity);
|
|
board[i] = '';
|
|
if (score > bestScore) {
|
|
bestScore = score;
|
|
move = i;
|
|
}
|
|
}
|
|
}
|
|
// Si no encontró nada (no debería), elige primera libre
|
|
if (move === null) move = board.findIndex(c => c === '');
|
|
}
|
|
|
|
if (move !== null) {
|
|
board[move] = aiSide;
|
|
}
|
|
render();
|
|
|
|
// Comprobar fin
|
|
const combo = getWinCombo(board, aiSide);
|
|
if (combo) {
|
|
endGame(aiSide, combo);
|
|
return;
|
|
}
|
|
if (isDraw(board)) {
|
|
endGame('D', null);
|
|
return;
|
|
}
|
|
|
|
setStatus(`Tu turno (${playerSide})`);
|
|
}
|
|
|
|
function startGame() {
|
|
// Lado del jugador según selector
|
|
if (playerSideSelect && (playerSideSelect.value === 'X' || playerSideSelect.value === 'O')) {
|
|
playerSide = playerSideSelect.value;
|
|
} else {
|
|
playerSide = 'X';
|
|
}
|
|
aiSide = playerSide === 'X' ? 'O' : 'X';
|
|
|
|
// Reset
|
|
board = Array(9).fill('');
|
|
gameOver = false;
|
|
initBoardDom();
|
|
Array.from(boardDiv.children).forEach(c => c.classList.remove('win'));
|
|
render();
|
|
|
|
// Si empieza la IA (jugador eligió 'O'), IA mueve primero
|
|
const turn = nextTurn(board);
|
|
if (turn === aiSide) {
|
|
setStatus(`Turno de la máquina (${aiSide})`);
|
|
setTimeout(machineMove, 300);
|
|
} else {
|
|
setStatus(`Tu turno (${playerSide})`);
|
|
}
|
|
}
|
|
|
|
// Listeners
|
|
restartBtn.addEventListener('click', startGame);
|
|
if (playerSideSelect) {
|
|
playerSideSelect.addEventListener('change', () => {
|
|
// Reiniciar al cambiar de lado
|
|
startGame();
|
|
});
|
|
}
|
|
|
|
// Init
|
|
loadScores();
|
|
updateScoreUI();
|
|
startGame(); |