HTML如何实现贪吃蛇？键盘控制蛇移动怎么做？

  #game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative; /* 确保蛇和食物相对于游戏区域定位 */
  }
  .snake-body {
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute; /* 绝对定位，方便控制蛇的位置 */
  }
  .food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute; /* 绝对定位，方便控制食物的位置 */
  }



  

  
    const gameBoard = document.getElementById('game-board');
    const gridSize = 20; // 每个格子的像素大小
    let snake = [{ x: 200, y: 200 }]; // 蛇的初始位置
    let food = generateFood(); // 生成食物
    let direction = 'right'; // 初始方向
    let gameInterval; // 用于存储 setInterval

    function generateFood() {
      let foodX, foodY;
      do {
        foodX = Math.floor(Math.random() * (gameBoard.offsetWidth / gridSize)) * gridSize;
        foodY = Math.floor(Math.random() * (gameBoard.offsetHeight / gridSize)) * gridSize;
      } while (snake.some(segment => segment.x === foodX && segment.y === foodY)); // 确保食物不在蛇身上
      return { x: foodX, y: foodY };
    }

    function draw() {
      gameBoard.innerHTML = ''; // 清空游戏区域
      drawSnake();
      drawFood();
    }

    function drawSnake() {
      snake.forEach(segment => {
        const snakeBody = document.createElement('div');
        snakeBody.classList.add('snake-body');
        snakeBody.style.left = segment.x + 'px';
        snakeBody.style.top = segment.y + 'px';
        gameBoard.appendChild(snakeBody);
      });
    }

    function drawFood() {
      const foodElement = document.createElement('div');
      foodElement.classList.add('food');
      foodElement.style.left = food.x + 'px';
      foodElement.style.top = food.y + 'px';
      gameBoard.appendChild(foodElement);
    }

    function update() {
      const head = { ...snake[0] }; // 复制蛇头
      switch (direction) {
        case 'up':
          head.y -= gridSize;
          break;
        case 'down':
          head.y += gridSize;
          break;
        case 'left':
          head.x -= gridSize;
          break;
        case 'right':
          head.x += gridSize;
          break;
      }

      // 碰撞检测
      if (head.x = gameBoard.offsetWidth || head.y = gameBoard.offsetHeight || checkCollision(head)) {
        clearInterval(gameInterval);
        alert('游戏结束！');
        return;
      }

      snake.unshift(head); // 将新蛇头添加到蛇身前端

      if (head.x === food.x && head.y === food.y) {
        food = generateFood(); // 生成新食物
      } else {
        snake.pop(); // 移除蛇尾
      }

      draw();
    }

    function checkCollision(head) {
      return snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
    }

    document.addEventListener('keydown', e => {
      switch (e.key) {
        case 'ArrowUp':
          if (direction !== 'down') direction = 'up';
          break;
        case 'ArrowDown':
          if (direction !== 'up') direction = 'down';
          break;
        case 'ArrowLeft':
          if (direction !== 'right') direction = 'left';
          break;
        case 'ArrowRight':
          if (direction !== 'left') direction = 'right';
          break;
      }
    });

    gameInterval = setInterval(update, 100); // 每100毫秒更新一次游戏状态