const canvas = document.getElementById("gameCanvas");  
    const ctx = canvas.getContext("2d");  
  
    const gridSize = 20;  
    const tileCount = canvas.width / gridSize;  
  
    let snake = [{ x: 10, y: 10 }];  
    let direction = { x: 1, y: 0 };  
    let nextDirection = { x: 1, y: 0 };  
    let food = spawnFood();  
    let score = 0;  
  
    function spawnFood() {  
      let newFood;  
      while (true) {  
        newFood = {  
          x: Math.floor(Math.random() * tileCount),  
          y: Math.floor(Math.random() * tileCount)  
        };  
        if (!snake.some(part => part.x === newFood.x && part.y === newFood.y)) {  
          return newFood;  
        }  
      }  
    }  
  
    function draw() {  
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "red";  
      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);  
  
      // Draw snake  
      snake.forEach((part, index) => {  
        ctx.fillStyle = index === 0 ? "lime" : "green";  
        ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize, gridSize);  
      });  
    }  
  
    function update() {  
      direction = nextDirection;  
  
      const head = {  
        x: snake[0].x + direction.x,  
        y: snake[0].y + direction.y  
      };  
  
      // Wall collision  
      if (  
        head.x < 0 || head.x >= tileCount ||  
        head.y < 0 || head.y >= tileCount  
      ) {  
        resetGame();  
        return;  
      }  
  
      // Self collision  
      if (snake.some(part => part.x === head.x && part.y === head.y)) {  
        resetGame();
        return;  
      }  
  
      snake.unshift(head);  
  
      // Eat food  
      if (head.x === food.x && head.y === food.y) {  
        score++;  
        document.getElementById("score").textContent = score;  
        food = spawnFood();  
      } else {  
        snake.pop();  
      }  
  
      draw();  
    }  
  
    function resetGame() {  
      snake = [{ x: 10, y: 10 }];  
      direction = { x: 1, y: 0 };  
      nextDirection = { x: 1, y: 0 };  
      food = spawnFood();  
      score = 0;  
      document.getElementById("score").textContent = score;  
    }  
  
    draw();  
    setInterval(update, 120);