Juegos/4-en-raya/script.js

const ROWS = 6;
const COLS = 7;
const HUMAN = '🟡';
const AI = '❌';
const boardDiv = document.getElementById('board');
const statusDiv = document.getElementById('status');
const restartBtn = document.getElementById('restart-btn');
let board, gameOver, currentPlayer;

function initGame() {
  board = Array.from({length: ROWS}, () => Array(COLS).fill(''));
  gameOver = false;
  currentPlayer = HUMAN;
  statusDiv.textContent = "Tu turno (🟡)";
  renderBoard();
}

function renderBoard() {
  boardDiv.innerHTML = '';
  // Creamos todas las celdas primero
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      const cellDiv = document.createElement('div');
      cellDiv.className = 'cell';
      cellDiv.textContent = board[row][col];
      // Si es turno humano y no está terminado el juego
      if (!gameOver && currentPlayer === HUMAN && board[row][col] === '') {
        let lowestRow = getLowestEmptyRow(col);
        if (lowestRow === row) {
          cellDiv.style.cursor = "pointer";
        }
      }
      // El evento click siempre llama para la columna
      cellDiv.onclick = () => {
        if (!gameOver && currentPlayer === HUMAN) {
          playerMove(col);
        }
      };
      boardDiv.appendChild(cellDiv);
    }
  }
}

function getLowestEmptyRow(col) {
  for (let r = ROWS - 1; r >= 0; r--) {
    if (board[r][col] === '') return r;
  }
  return -1;
}

function playerMove(col) {
  if (gameOver || currentPlayer !== HUMAN) return;
  let row = getLowestEmptyRow(col);
  if (row === -1) return; // columna llena
  board[row][col] = HUMAN;
  renderBoard();
  if (checkWinner(HUMAN)) {
    statusDiv.textContent = "¡Has ganado! 🎉";
    gameOver = true;
    return;
  }
  if (isFull()) {
    statusDiv.textContent = "¡Empate!";
    gameOver = true;
    return;
  }
  currentPlayer = AI;
  statusDiv.textContent = "Turno de la máquina (❌)";
  setTimeout(machineMove, 450);
}

function machineMove() {
  if (gameOver || currentPlayer !== AI) return;
  // IA sencilla: elige columna aleatoria libre
  let validCols = [];
  for (let c = 0; c < COLS; c++) {
    if (board[0][c] === '') validCols.push(c);
  }
  if (validCols.length === 0) return;
  let col = validCols[Math.floor(Math.random() * validCols.length)];
  let row = getLowestEmptyRow(col);
  board[row][col] = AI;
  renderBoard();
  if (checkWinner(AI)) {
    statusDiv.textContent = "¡La máquina gana! 🤖";
    gameOver = true;
    return;
  }
  if (isFull()) {
    statusDiv.textContent = "¡Empate!";
    gameOver = true;
    return;
  }
  currentPlayer = HUMAN;
  statusDiv.textContent = "Tu turno (🟡)";
}

function isFull() {
  return board[0].every(cell => cell !== '');
}

function checkWinner(player) {
  // Horizontal
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS - 3; c++) {
      if (
        board[r][c] === player &&
        board[r][c + 1] === player &&
        board[r][c + 2] === player &&
        board[r][c + 3] === player
      ) return true;
    }
  }
  // Vertical
  for (let c = 0; c < COLS; c++) {
    for (let r = 0; r < ROWS - 3; r++) {
      if (
        board[r][c] === player &&
        board[r + 1][c] === player &&
        board[r + 2][c] === player &&
        board[r + 3][c] === player
      ) return true;
    }
  }
  // Diagonal descendente \
  for (let r = 0; r < ROWS - 3; r++) {
    for (let c = 0; c < COLS - 3; c++) {
      if (
        board[r][c] === player &&
        board[r + 1][c + 1] === player &&
        board[r + 2][c + 2] === player &&
        board[r + 3][c + 3] === player
      ) return true;
    }
  }
  // Diagonal ascendente /
  for (let r = 3; r < ROWS; r++) {
    for (let c = 0; c < COLS - 3; c++) {
      if (
        board[r][c] === player &&
        board[r - 1][c + 1] === player &&
        board[r - 2][c + 2] === player &&
        board[r - 3][c + 3] === player
      ) return true;
    }
  }
  return false;
}

restartBtn.onclick = initGame;
initGame();