Fix this: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snake Game (Swipe Only)</title>
  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #000;
      color: #fff;
      font-family: sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    canvas {
      background: #111;
      margin-top: 10px;
      touch-action: none;
    }
    #score {
      font-size: 18px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h2>Snake Game</h2>
  <div id="score">Score: 0</div>
  <canvas id="game" width="300" height="300"></canvas>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const box = 15;
    const rows = canvas.height / box;
    const cols = canvas.width / box;
    const scoreText = document.getElementById('score');

    let snake = [{x: 5, y: 5}];
    let direction = 'right';
    let apples = spawnApples(3);
    let score = 0;

    function spawnApples(count) {
      let result = [];
      while (result.length < count) {
        let apple = {
          x: Math.floor(Math.random() * cols),
          y: Math.floor(Math.random() * rows)
        };
        if (!result.some(a => a.x === apple.x && a.y === apple.y) &&
            !snake.some(s => s.x === apple.x && s.y === apple.y)) {
          result.push(apple);
        }
      }
      return result;
    }

    function changeDirection(dir) {
      if (dir === 'up' && direction !== 'down') direction = 'up';
      if (dir === 'down' && direction !== 'up') direction = 'down';
      if (dir === 'left' && direction !== 'right') direction = 'left';
      if (dir === 'right' && direction !== 'left') direction = 'right';
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? 'lime' : 'green';
        ctx.fillRect(snake[i].x * box, snake[i].y * box, box, box);
      }

      for (const apple of apples) {
        ctx.fillStyle = 'red';
        ctx.fillRect(apple.x * box, apple.y * box, box, box);
      }
    }

    function update() {
      const head = {...snake[0]};
      if (direction === 'up') head.y--;
      if (direction === 'down') head.y++;
      if (direction === 'left') head.x--;
      if (direction === 'right') head.x++;

      if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows) {
        resetGame();
        return;
      }

      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          resetGame();
          return;
        }
      }

      snake.unshift(head);

      const eaten = apples.findIndex(a => a.x === head.x && a.y === head.y);
      if (eaten >= 0) {
        apples.splice(eaten, 1);
        apples = apples.concat(spawnApples(1));
        score += 10;
        scoreText.textContent = 'Score: ' + score;
      } else {
        snake.pop();
      }

      draw();
    }

    function resetGame() {
      snake = [{x: 5, y: 5}];
      direction = 'right';
      apples = spawnApples(3);
      score = 0;
      scoreText.textContent = 'Score: 0';
    }

    setInterval(update, 150);

    // Swipe gesture support only
    let startX, startY;
    canvas.addEventListener('touchstart', e => {
      const t = e.touches[0];
      startX = t.clientX;
      startY = t.clientY;
    });

    canvas.addEventListener('touchmove', e => {
      if (!startX || !startY) return;
      const t = e.touches[0];
      const dx = t.clientX - startX;
      const dy = t.clientY - startY;

      if (Math.abs(dx) > Math.abs(dy)) {
        if (dx > 30) changeDirection('right');
        else if (dx < -30) changeDirection('left');
      } else {
        if (dy > 30) changeDirection('down');
        else if (dy < -30) changeDirection('up');
      }

      startX = null;
      startY = null;
    }, { passive: true });
  </script>
</body>
</html>