SNAKE GAME USING JAVASCRIPT  ( #213)

<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <canvas id="game-board" width="400" height="400"></canvas>
    <script>
      // Get the canvas element and its context
      const canvas = document.getElementById("game-board");
      const ctx = canvas.getContext("2d");

      // Define the size of the snake's grid and the size of each cell
      const gridSize = 20;
      const cellSize = canvas.width / gridSize;

      // Initialize the snake
      let snake = [
        { x: 10, y: 10 },
        { x: 9, y: 10 },
      ];

      // Initialize the food
      let food = { x: 5, y: 5 };

      // Initialize the direction
      let direction = "right";

      // Function to draw a cell
      function drawCell(x, y, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
      }

      // Function to update the game
      function update() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Move the snake
        let newX = snake[0].x;
        let newY = snake[0].y;

        if (direction === "right") newX++;
        if (direction === "left") newX--;
        if (direction === "up") newY--;
        if (direction === "down") newY++;

        // Check for collision with the food
        if (newX === food.x && newY === food.y) {
          snake.unshift({ x: food.x, y: food.y });
          food = {
            x: Math.floor(Math.random() * gridSize),
            y: Math.floor(Math.random() * gridSize),
          };
        } else {
          snake.pop();
        }

        // Check for collision with walls or itself
        if (
          newX < 0 ||
          newX >= gridSize ||
          newY < 0 ||
          newY >= gridSize ||
          snake.some((segment) => segment.x === newX && segment.y === newY)
        ) {
          // Game over
          clearInterval(gameLoop);
          alert("Game Over!");
          location.reload();
        }

        // Update the snake array
        snake.unshift({ x: newX, y: newY });

        // Draw the snake
        snake.forEach((segment) => drawCell(segment.x, segment.y, "green"));

        // Draw the food
        drawCell(food.x, food.y, "red");
      }

      // Handle key presses to change direction
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowRight" && direction !== "left") {
          direction = "right";
        } else if (event.key === "ArrowLeft" && direction !== "right") {
          direction = "left";
        } else if (event.key === "ArrowUp" && direction !== "down") {
          direction = "up";
        } else if (event.key === "ArrowDown" && direction !== "up") {
          direction = "down";
        }
      });

      // Start the game loop
      const gameLoop = setInterval(update, 100);
    </script>
  </body>
</html>