pages/secret/snake/game.js

"use strict";

const upButton = document.getElementById("up");
const downButton = document.getElementById("down");
const leftButton = document.getElementById("left");
const rightButton = document.getElementById("right");
const startButton = document.getElementById("start");
const grid = document.createElement("div");
grid.id = "grid";
document.querySelector(".game").appendChild(grid);

let snake = [{ x: 5, y: 5 }];
let apple = { x: 8, y: 5 };
let direction = { x: 0, y: 0 };
let gameInterval = null;
let isGameRunning = false;
const gridSize = 10;

function initGame() {
  grid.style.display = "grid";
  grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
  grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
  grid.style.width = "350px";
  grid.style.height = "350px";
  document.getElementById("title").style.display = "none";
  document.getElementById("description").style.display = "none";

  isGameRunning = true;
  snake = [{ x: 5, y: 5 }];
  apple = spawnApple();
  direction = { x: 0, y: 0 };

  clearInterval(gameInterval);
  gameInterval = setInterval(gameLoop, 200);
  render();
}

function spawnApple() {
  let newApple;
  do {
    newApple = {
      x: Math.floor(Math.random() * gridSize),
      y: Math.floor(Math.random() * gridSize),
    };
  } while (
    snake.some(
      (segment) => segment.x === newApple.x && segment.y === newApple.y
    )
  );
  return newApple;
}

function updateSnake() {
  const newHead = {
    x: snake[0].x + direction.x,
    y: snake[0].y + direction.y,
  };

  if (newHead.x < 0) newHead.x = gridSize - 1;
  if (newHead.y < 0) newHead.y = gridSize - 1;
  if (newHead.x >= gridSize) newHead.x = 0;
  if (newHead.y >= gridSize) newHead.y = 0;

  if (
    snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
  ) {
    gameOver();
    return;
  }

  snake.unshift(newHead);

  if (newHead.x === apple.x && newHead.y === apple.y) {
    apple = spawnApple();
  } else {
    snake.pop();
  }
}

function render() {
  grid.innerHTML = "";

  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const cell = document.createElement("div");
      cell.classList.add("cell");

      if ((x + y) % 2 === 0) {
        cell.classList.add("light-green");
      } else {
        cell.classList.add("dark-green");
      }

      if (snake.some((segment) => segment.x === x && segment.y === y)) {
        cell.classList.add("snake");
      }

      if (apple.x === x && apple.y === y) {
        cell.classList.add("apple");
      }

      grid.appendChild(cell);
    }
  }
}

function gameLoop() {
  if (!isGameRunning) return;
  updateSnake();
  render();
}

function gameOver() {
  alert("Game Over!");
  clearInterval(gameInterval);
  isGameRunning = false;
}

function handleDirectionInput(key) {
  switch (key) {
    case "ArrowUp":
    case "w":
      if (direction.y === 0) direction = { x: 0, y: -1 };
      break;
    case "ArrowDown":
    case "s":
      if (direction.y === 0) direction = { x: 0, y: 1 };
      break;
    case "ArrowLeft":
    case "a":
      if (direction.x === 0) direction = { x: -1, y: 0 };
      break;
    case "ArrowRight":
    case "d":
      if (direction.x === 0) direction = { x: 1, y: 0 };
      break;
  }
}

upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
startButton.addEventListener("click", () => {
  if (!isGameRunning) initGame();
});

document.addEventListener("keydown", (event) => {
  handleDirectionInput(event.key);
});