Mejoras y optimizaciones en general.
This commit is contained in:
@@ -1,52 +1,184 @@
|
||||
'use strict';
|
||||
|
||||
const boardDiv = document.getElementById('board');
|
||||
const statusDiv = document.getElementById('status');
|
||||
const restartBtn = document.getElementById('restart-btn');
|
||||
let board, currentPlayer, gameOver;
|
||||
const firstPlayerSelect = document.getElementById('first-player');
|
||||
const scoreXSpan = document.getElementById('score-x');
|
||||
const scoreOSpan = document.getElementById('score-o');
|
||||
const scoreDrawSpan = document.getElementById('score-d');
|
||||
|
||||
function initGame() {
|
||||
board = Array(9).fill('');
|
||||
currentPlayer = 'X';
|
||||
gameOver = false;
|
||||
statusDiv.textContent = "Turno de " + currentPlayer;
|
||||
renderBoard();
|
||||
}
|
||||
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
|
||||
];
|
||||
|
||||
function renderBoard() {
|
||||
boardDiv.innerHTML = '';
|
||||
board.forEach((cell, idx) => {
|
||||
const cellDiv = document.createElement('div');
|
||||
cellDiv.className = 'cell';
|
||||
cellDiv.textContent = cell;
|
||||
cellDiv.onclick = () => handleCellClick(idx);
|
||||
boardDiv.appendChild(cellDiv);
|
||||
});
|
||||
}
|
||||
let board = Array(9).fill('');
|
||||
let currentPlayer = 'X';
|
||||
let gameOver = false;
|
||||
let scores = { X: 0, O: 0, D: 0 };
|
||||
|
||||
function handleCellClick(idx) {
|
||||
if (gameOver || board[idx] !== '') return;
|
||||
board[idx] = currentPlayer;
|
||||
renderBoard();
|
||||
if (checkWinner(currentPlayer)) {
|
||||
statusDiv.textContent = `¡${currentPlayer} gana! 🎉`;
|
||||
gameOver = true;
|
||||
} else if (board.every(cell => cell !== '')) {
|
||||
statusDiv.textContent = "¡Empate!";
|
||||
gameOver = true;
|
||||
} else {
|
||||
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
|
||||
statusDiv.textContent = "Turno de " + currentPlayer;
|
||||
function loadScores() {
|
||||
try {
|
||||
const raw = localStorage.getItem('ttt_scores');
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw);
|
||||
if (parsed && typeof parsed === 'object') {
|
||||
scores.X = Number(parsed.X) || 0;
|
||||
scores.O = Number(parsed.O) || 0;
|
||||
scores.D = Number(parsed.D) || 0;
|
||||
}
|
||||
}
|
||||
} catch (_) {
|
||||
// Ignorar errores de parsing o acceso
|
||||
}
|
||||
}
|
||||
|
||||
function checkWinner(player) {
|
||||
const winCases = [
|
||||
[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
|
||||
];
|
||||
return winCases.some(combo => combo.every(i => board[i] === player));
|
||||
function saveScores() {
|
||||
try {
|
||||
localStorage.setItem('ttt_scores', JSON.stringify(scores));
|
||||
} catch (_) {
|
||||
// Ignorar errores de almacenamiento
|
||||
}
|
||||
}
|
||||
|
||||
restartBtn.onclick = initGame;
|
||||
function updateScoreUI() {
|
||||
if (scoreXSpan) scoreXSpan.textContent = String(scores.X);
|
||||
if (scoreOSpan) scoreOSpan.textContent = String(scores.O);
|
||||
if (scoreDrawSpan) scoreDrawSpan.textContent = String(scores.D);
|
||||
}
|
||||
|
||||
initGame();
|
||||
function initBoardDom() {
|
||||
// Crear la cuadrícula de 3x3 solo si no existe
|
||||
if (boardDiv.children.length === 9) {
|
||||
// limpiar estado de clases win previas
|
||||
Array.from(boardDiv.children).forEach(c => c.classList.remove('win'));
|
||||
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('aria-label', `Casilla ${idx + 1}`);
|
||||
cell.setAttribute('role', 'gridcell');
|
||||
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 cellEl = boardDiv.children[i];
|
||||
if (!cellEl) continue;
|
||||
cellEl.textContent = board[i];
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(msg) {
|
||||
statusDiv.textContent = msg;
|
||||
}
|
||||
|
||||
function checkWinner(player) {
|
||||
for (const combo of WIN_COMBOS) {
|
||||
const [a, b, c] = combo;
|
||||
if (board[a] === player && board[b] === player && board[c] === player) {
|
||||
return { win: true, combo };
|
||||
}
|
||||
}
|
||||
return { win: false, combo: null };
|
||||
}
|
||||
|
||||
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 === 'X' || result === 'O') {
|
||||
setStatus(`¡${result} gana! 🎉`);
|
||||
scores[result] += 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;
|
||||
if (board[idx] !== '') return;
|
||||
|
||||
board[idx] = currentPlayer;
|
||||
render();
|
||||
|
||||
const { win, combo } = checkWinner(currentPlayer);
|
||||
if (win) {
|
||||
endGame(currentPlayer, combo);
|
||||
return;
|
||||
}
|
||||
|
||||
// Comprueba empate
|
||||
if (board.every(cell => cell !== '')) {
|
||||
endGame('D', null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Cambiar turno
|
||||
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
|
||||
setStatus(`Turno de ${currentPlayer}`);
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
board = Array(9).fill('');
|
||||
gameOver = false;
|
||||
|
||||
// Determinar primer jugador desde el selector si existe
|
||||
if (firstPlayerSelect && (firstPlayerSelect.value === 'X' || firstPlayerSelect.value === 'O')) {
|
||||
currentPlayer = firstPlayerSelect.value;
|
||||
} else {
|
||||
currentPlayer = 'X';
|
||||
}
|
||||
|
||||
boardDiv.setAttribute('aria-disabled', 'false');
|
||||
initBoardDom();
|
||||
// Remover cualquier resaltado previo
|
||||
Array.from(boardDiv.children).forEach(c => c.classList.remove('win'));
|
||||
render();
|
||||
setStatus(`Turno de ${currentPlayer}`);
|
||||
}
|
||||
|
||||
// Listeners
|
||||
restartBtn.addEventListener('click', startGame);
|
||||
if (firstPlayerSelect) {
|
||||
firstPlayerSelect.addEventListener('change', () => {
|
||||
// Solo afecta si la partida no ha empezado o si no ha terminado aún
|
||||
if (!gameOver && board.every(v => v === '')) {
|
||||
currentPlayer = firstPlayerSelect.value;
|
||||
setStatus(`Turno de ${currentPlayer}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Init
|
||||
loadScores();
|
||||
updateScoreUI();
|
||||
startGame();
|
||||
Reference in New Issue
Block a user