Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leon's Snake Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    #gameContainer {
      border: 1px solid black;
      background-color: #f0f0f0;
    }
    .row {
      display: flex;
    }
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
    .snake {
      background-color: green;
    }
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Leon's Snake Game</h1>
  <div id="gameContainer"></div>
  <div id="score"></div>
  <script>
    const container = document.getElementById('gameContainer');
    const scoreDisplay = document.getElementById('score');
    const grid = [];
    const rows = 20;
    const cols = 20;
    let snake = [{x: 9, y: 10}]; // Initial position of the snake
    let food = {x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows)}; // Initial position of the food
    let score = 0;
    let highestScore = localStorage.getItem('highestScore') || 0;
    let direction;

    scoreDisplay.textContent = `Score: ${score} | Highest Score: ${highestScore}`;

    // Create grid
    for (let i = 0; i < rows; i++) {
      const row = document.createElement('div');
      row.classList.add('row');
      grid.push([]);
      for (let j = 0; j < cols; j++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        grid[i].push(cell);
        row.appendChild(cell);
      }
      container.appendChild(row);
    }

    // Event listener for arrow key presses
    document.addEventListener('keydown', directionHandler);

    function directionHandler(event) {
      if (event.keyCode === 37 && direction !== 'RIGHT') {
        direction = 'LEFT';
      } else if (event.keyCode === 38 && direction !== 'DOWN') {
        direction = 'UP';
      } else if (event.keyCode === 39 && direction !== 'LEFT') {
        direction = 'RIGHT';
      } else if (event.keyCode === 40 && direction !== 'UP') {
        direction = 'DOWN';
      }
    }

    // Function to draw on grid
    function draw() {
      // Clear grid
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          grid[i][j].classList.remove('snake', 'food');
        }
      }

      // Draw snake
      snake.forEach((segment) => {
        grid[segment.y][segment.x].classList.add('snake');
      });

      // Draw food
      grid[food.y][food.x].classList.add('food');

      // Move snake
      let snakeX = snake[0].x;
      let snakeY = snake[0].y;

      if (direction === 'LEFT') snakeX -= 1;
      if (direction === 'UP') snakeY -= 1;
      if (direction === 'RIGHT') snakeX += 1;
      if (direction === 'DOWN') snakeY += 1;

      // If snake eats the food
      if (snakeX === food.x && snakeY === food.y) {
        score++;
        if (score > highestScore) {
          highestScore = score;
          localStorage.setItem('highestScore', highestScore);
        }
        food = {x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows)};
      } else {
        snake.pop();
      }

      // Create new head of the snake
      const newHead = {
        x: snakeX,
        y: snakeY
      };

      // Game over conditions
      if (
        snakeX < 0 || snakeX >= cols || 
        snakeY < 0 || snakeY >= rows ||
        collision(newHead, snake)
      ) {
        clearInterval(game);
        alert('Game Over! Your score: ' + score);
        location.reload();
      }

      snake.unshift(newHead);
      scoreDisplay.textContent = `Score: ${score} | Highest Score: ${highestScore}`;
    }

    // Function to check collision
    function collision(head, array) {
      return array.some((segment) => {
        return (head.x === segment.x && head.y === segment.y);
      });
    }

    // Game loop
    let game = setInterval(draw, 100);
  </script>
</body>
</html>