Snake

(() => {
  // ===== i18n =====
  const es = {};
  const en = {};
  const T =
    window.APP_LOCALE === "en"
      ? { ...en }
      : { ...es };
  // ===== DOM =====
  const canvas =
    document.getElementById("gameCanvas");
  const ctx =
    canvas.getContext("2d");
  const countdownEl =
    document.getElementById("countdown");
  const gameOverMessage =
    document.getElementById(
      "gameOverMessage"
    );
  const scoreValueEl =
    document.getElementById(
      "scoreValue"
    );
  const bestValueEl =
    document.getElementById(
      "bestValue"
    );
  const btnRestartMobile =
    document.getElementById(
      "btnRestartMobile"
    );
  const btnRestartDesktop =
    document.getElementById(
      "btnRestartDesktop"
    );
  const btnStartSnake =
    document.getElementById(
      "btnStartSnake"
    );
  const btnUp =
    document.getElementById("btnUp");
  const btnDown =
    document.getElementById("btnDown");
  const btnLeft =
    document.getElementById("btnLeft");
  const btnRight =
    document.getElementById("btnRight");
  // ===== Configuración =====
  const GRID = 20;
  canvas.width = 560;
  canvas.height = 360;
  const BEST_KEY = "snake_best";
  let bestScore = parseInt(
    localStorage.getItem(BEST_KEY) ||
      "0",
    10
  );
  bestValueEl.textContent =
    String(bestScore);
  // ===== Estado =====
  let snake;
  let dx;
  let dy;
  let food;
  let score;
  let changingDirection = false;
  let running = false;
  let loopTimer = null;
  /*
   * Teclas controladas por el juego.
   * Se bloquea su comportamiento en el navegador.
   */
  const gameKeys = new Set([
    "ArrowUp",
    "ArrowDown",
    "ArrowLeft",
    "ArrowRight",
    "KeyW",
    "KeyA",
    "KeyS",
    "KeyD",
    "KeyR",
  ]);
  // ===== Fondo de estrellas =====
  const stars = Array.from(
    {
      length: 80,
    },
    () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      r: Math.random() * 1.6 + 0.2,
      a: Math.random() * 0.6 + 0.2,
    })
  );
  // ===== Modo táctil =====
  const isTouchMode = () => {
    return (
      window
        .matchMedia(
          "(max-width: 900px)"
        )
        .matches &&
      window
        .matchMedia(
          "(hover: none)"
        )
        .matches &&
      window
        .matchMedia(
          "(pointer: coarse)"
        )
        .matches
    );
  };
  // ===== Dirección =====
  function setDirection(direction) {
    if (changingDirection) {
      return;
    }
    changingDirection = true;
    const goingUp =
      dy === -GRID;
    const goingDown =
      dy === GRID;
    const goingRight =
      dx === GRID;
    const goingLeft =
      dx === -GRID;
    if (
      direction === "left" &&
      !goingRight
    ) {
      dx = -GRID;
      dy = 0;
    }
    if (
      direction === "up" &&
      !goingDown
    ) {
      dx = 0;
      dy = -GRID;
    }
    if (
      direction === "right" &&
      !goingLeft
    ) {
      dx = GRID;
      dy = 0;
    }
    if (
      direction === "down" &&
      !goingUp
    ) {
      dx = 0;
      dy = GRID;
    }
  }
  // ===== Cruceta táctil =====
  function bindTap(
    button,
    direction
  ) {
    if (!button) {
      return;
    }
    const press = (event) => {
      if (!isTouchMode()) {
        return;
      }
      event.preventDefault();
      if (!running) {
        return;
      }
      setDirection(direction);
    };
    button.addEventListener(
      "touchstart",
      press,
      {
        passive: false,
      }
    );
    button.addEventListener(
      "pointerdown",
      press
    );
  }
  bindTap(btnUp, "up");
  bindTap(btnDown, "down");
  bindTap(btnLeft, "left");
  bindTap(btnRight, "right");
  // ===== Swipe táctil =====
  let swipeStart = null;
  canvas.addEventListener(
    "touchstart",
    (event) => {
      if (
        !isTouchMode() ||
        !running
      ) {
        return;
      }
      event.preventDefault();
      const touch =
        event.touches[0];
      swipeStart = {
        x: touch.clientX,
        y: touch.clientY,
      };
    },
    {
      passive: false,
    }
  );
  canvas.addEventListener(
    "touchend",
    (event) => {
      if (
        !isTouchMode() ||
        !running ||
        !swipeStart
      ) {
        return;
      }
      event.preventDefault();
      const touch =
        event.changedTouches[0];
      const swipeX =
        touch.clientX -
        swipeStart.x;
      const swipeY =
        touch.clientY -
        swipeStart.y;
      swipeStart = null;
      const absoluteX =
        Math.abs(swipeX);
      const absoluteY =
        Math.abs(swipeY);
      if (
        Math.max(
          absoluteX,
          absoluteY
        ) < 18
      ) {
        return;
      }
      if (absoluteX > absoluteY) {
        setDirection(
          swipeX > 0
            ? "right"
            : "left"
        );
      } else {
        setDirection(
          swipeY > 0
            ? "down"
            : "up"
        );
      }
    },
    {
      passive: false,
    }
  );
  // ===== Reiniciar partida =====
  function resetGame() {
    snake = [
      {
        x: 200,
        y: 200,
      },
    ];
    dx = GRID;
    dy = 0;
    food = createFood();
    score = 0;
    scoreValueEl.textContent =
      String(score);
    changingDirection = false;
    gameOverMessage.style.display =
      "none";
  }
  function restartNow() {
    /*
     * Detiene el bucle anterior.
     * Evita que el juego se acelere al reiniciar
     * varias veces.
     */
    if (loopTimer) {
      clearTimeout(loopTimer);
      loopTimer = null;
    }
    countdownEl.style.display =
      "none";
    gameOverMessage.style.display =
      "none";
    running = true;
    changingDirection = false;
    resetGame();
    main();
  }
  // ===== Bucle del juego =====
  function main() {
    if (!running) {
      return;
    }
    if (didGameEnd()) {
      running = false;
      gameOverMessage.style.display =
        "grid";
      if (score > bestScore) {
        bestScore = score;
        localStorage.setItem(
          BEST_KEY,
          String(bestScore)
        );
        bestValueEl.textContent =
          String(bestScore);
      }
      if (window.GameScores) {
        GameScores.submit(
          "snake",
          score
        );
      }
      return;
    }
    changingDirection = false;
    loopTimer = setTimeout(() => {
      clearCanvas();
      drawStars();
      drawFood();
      moveSnake();
      drawSnake();
      main();
    }, 95);
  }
  // ===== Empezar partida =====
  function startGame() {
    countdownEl.style.display =
      "none";
    running = true;
    resetGame();
    main();
  }
  function startCountdown() {
    let countdown = 3;
    countdownEl.style.display =
      "grid";
    countdownEl.textContent =
      String(countdown);
    const interval =
      setInterval(() => {
        countdown--;
        if (countdown > 0) {
          countdownEl.textContent =
            String(countdown);
        } else {
          clearInterval(interval);
          startGame();
        }
      }, 1000);
  }
  // ===== Limpiar canvas =====
  function clearCanvas() {
    ctx.fillStyle = "#03060c";
    ctx.fillRect(
      0,
      0,
      canvas.width,
      canvas.height
    );
    const gradient =
      ctx.createRadialGradient(
        canvas.width * 0.5,
        canvas.height * 0.45,
        40,
        canvas.width * 0.5,
        canvas.height * 0.45,
        Math.max(
          canvas.width,
          canvas.height
        )
      );
    gradient.addColorStop(
      0,
      "rgba(255,255,255,0.03)"
    );
    gradient.addColorStop(
      1,
      "rgba(0,0,0,0.65)"
    );
    ctx.fillStyle = gradient;
    ctx.fillRect(
      0,
      0,
      canvas.width,
      canvas.height
    );
  }
  // ===== Dibujar estrellas =====
  function drawStars() {
    ctx.save();
    ctx.fillStyle = "white";
    for (const star of stars) {
      ctx.globalAlpha = star.a;
      ctx.beginPath();
      ctx.arc(
        star.x,
        star.y,
        star.r,
        0,
        Math.PI * 2
      );
      ctx.fill();
      star.y += 0.15;
      if (
        star.y >
        canvas.height + 2
      ) {
        star.y = -2;
        star.x =
          Math.random() *
          canvas.width;
      }
    }
    ctx.restore();
  }
  // ===== Dibujar serpiente =====
  function drawSnake() {
    ctx.save();
    ctx.shadowBlur = 10;
    ctx.shadowColor = "#7cff00";
    snake.forEach(
      (part, index) => {
        ctx.beginPath();
        ctx.fillStyle =
          index === 0
            ? "#7cff00"
            : "#4caf50";
        ctx.arc(
          part.x + GRID / 2,
          part.y + GRID / 2,
          9,
          0,
          Math.PI * 2
        );
        ctx.fill();
        if (index === 0) {
          ctx.shadowBlur = 0;
          ctx.fillStyle = "#0b0b0b";
          let eyeX1 = 6;
          let eyeY1 = 7;
          let eyeX2 = 14;
          let eyeY2 = 7;
          if (dx === GRID) {
            eyeX1 = 12;
            eyeY1 = 7;
            eyeX2 = 12;
            eyeY2 = 13;
          } else if (dx === -GRID) {
            eyeX1 = 8;
            eyeY1 = 7;
            eyeX2 = 8;
            eyeY2 = 13;
          } else if (dy === GRID) {
            eyeX1 = 7;
            eyeY1 = 12;
            eyeX2 = 13;
            eyeY2 = 12;
          } else if (dy === -GRID) {
            eyeX1 = 7;
            eyeY1 = 8;
            eyeX2 = 13;
            eyeY2 = 8;
          }
          ctx.beginPath();
          ctx.arc(
            part.x + eyeX1,
            part.y + eyeY1,
            2,
            0,
            Math.PI * 2
          );
          ctx.arc(
            part.x + eyeX2,
            part.y + eyeY2,
            2,
            0,
            Math.PI * 2
          );
          ctx.fill();
          ctx.fillStyle =
            "rgba(255,255,255,.7)";
          ctx.beginPath();
          ctx.arc(
            part.x + eyeX1 + 0.7,
            part.y + eyeY1 - 0.7,
            0.7,
            0,
            Math.PI * 2
          );
          ctx.arc(
            part.x + eyeX2 + 0.7,
            part.y + eyeY2 - 0.7,
            0.7,
            0,
            Math.PI * 2
          );
          ctx.fill();
        }
      }
    );
    ctx.restore();
  }
  // ===== Movimiento =====
  function moveSnake() {
    const head = {
      x: snake[0].x + dx,
      y: snake[0].y + dy,
    };
    snake.unshift(head);
    const didEatFood =
      snake[0].x === food.x &&
      snake[0].y === food.y;
    if (didEatFood) {
      score += 10;
      scoreValueEl.textContent =
        String(score);
      food = createFood();
    } else {
      snake.pop();
    }
  }
  // ===== Crear comida =====
  function createFood() {
    function randomGrid(
      min,
      max
    ) {
      return (
        Math.round(
          (
            Math.random() *
              (max - min) +
            min
          ) /
            GRID
        ) * GRID
      );
    }
    let foodX = randomGrid(
      0,
      canvas.width - GRID
    );
    let foodY = randomGrid(
      0,
      canvas.height - GRID
    );
    snake?.forEach((part) => {
      if (
        part.x === foodX &&
        part.y === foodY
      ) {
        foodX = randomGrid(
          0,
          canvas.width - GRID
        );
        foodY = randomGrid(
          0,
          canvas.height - GRID
        );
      }
    });
    return {
      x: foodX,
      y: foodY,
    };
  }
  // ===== Dibujar comida =====
  function drawFood() {
    ctx.save();
    ctx.shadowBlur = 12;
    ctx.shadowColor = "#ff3b3b";
    ctx.fillStyle = "#ff3b3b";
    ctx.beginPath();
    ctx.arc(
      food.x + GRID / 2,
      food.y + GRID / 2,
      7,
      0,
      Math.PI * 2
    );
    ctx.fill();
    ctx.shadowBlur = 0;
    ctx.fillStyle =
      "rgba(255,255,255,.55)";
    ctx.beginPath();
    ctx.arc(
      food.x +
        GRID / 2 -
        2,
      food.y +
        GRID / 2 -
        2,
      2,
      0,
      Math.PI * 2
    );
    ctx.fill();
    ctx.restore();
  }
  // ===== Controles del teclado =====
  function changeDirection(event) {
    /*
     * Impide que flechas, WASD y R
     * actúen sobre el navegador.
     */
    if (gameKeys.has(event.code)) {
      event.preventDefault();
    }
    if (
      event.key === "r" ||
      event.key === "R"
    ) {
      if (!event.repeat) {
        restartNow();
      }
      return;
    }
    if (changingDirection) {
      return;
    }
    changingDirection = true;
    const key = event.key;
    const goingUp =
      dy === -GRID;
    const goingDown =
      dy === GRID;
    const goingRight =
      dx === GRID;
    const goingLeft =
      dx === -GRID;
    if (
      (
        key === "ArrowLeft" ||
        key === "a" ||
        key === "A"
      ) &&
      !goingRight
    ) {
      dx = -GRID;
      dy = 0;
    }
    if (
      (
        key === "ArrowUp" ||
        key === "w" ||
        key === "W"
      ) &&
      !goingDown
    ) {
      dx = 0;
      dy = -GRID;
    }
    if (
      (
        key === "ArrowRight" ||
        key === "d" ||
        key === "D"
      ) &&
      !goingLeft
    ) {
      dx = GRID;
      dy = 0;
    }
    if (
      (
        key === "ArrowDown" ||
        key === "s" ||
        key === "S"
      ) &&
      !goingUp
    ) {
      dx = 0;
      dy = GRID;
    }
  }
  // ===== Comprobar derrota =====
  function didGameEnd() {
    for (
      let index = 4;
      index < snake.length;
      index++
    ) {
      if (
        snake[index].x ===
          snake[0].x &&
        snake[index].y ===
          snake[0].y
      ) {
        return true;
      }
    }
    const hitLeftWall =
      snake[0].x < 0;
    const hitRightWall =
      snake[0].x >
      canvas.width - GRID;
    const hitTopWall =
      snake[0].y < 0;
    const hitBottomWall =
      snake[0].y >
      canvas.height - GRID;
    return (
      hitLeftWall ||
      hitRightWall ||
      hitTopWall ||
      hitBottomWall
    );
  }
  // ===== Botones =====
  btnRestartMobile?.addEventListener(
    "click",
    (event) => {
      event.preventDefault();
      restartNow();
      event.currentTarget.blur();
    }
  );
  btnRestartDesktop?.addEventListener(
    "click",
    (event) => {
      event.preventDefault();
      restartNow();
      event.currentTarget.blur();
    }
  );
  btnStartSnake?.addEventListener(
    "click",
    (event) => {
      event.preventDefault();
      restartNow();
      event.currentTarget.blur();
    }
  );
  // ===== Eventos de teclado =====
  document.addEventListener(
    "keydown",
    changeDirection,
    {
      passive: false,
    }
  );
  document.addEventListener(
    "keyup",
    (event) => {
      if (
        gameKeys.has(event.code)
      ) {
        event.preventDefault();
      }
    },
    {
      passive: false,
    }
  );
  /*
   * Evita que los controles continúen activos
   * si el navegador pierde el foco.
   */
  window.addEventListener(
    "blur",
    () => {
      changingDirection = false;
    }
  );
  // ===== Inicio =====
  startCountdown();
})();