使用 canvas 配合 setInterval 开发贪吃蛇

好的，下面是一个简单的实现步骤：

1. 创建一个画布 (canvas) 并设置其大小和样式。

<canvas id="snake" width="400" height="400"></canvas>

2. 在 JavaScript 中获取这个画布并创建一个绘图上下文 (context)。

const canvas = document.getElementById('snake');
const ctx = canvas.getContext('2d');

3. 创建蛇的初始状态，包括长度、起始位置和方向。

let snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 }];
let direction = 'right';

4. 创建食物的初始位置。

let food = { x: Math.floor(Math.random() * 40), y: Math.floor(Math.random() * 40) };

5. 创建一个函数来绘制蛇和食物。

function draw() {
  // 绘制蛇
  snake.forEach(body => {
    ctx.fillRect(body.x * 10, body.y * 10, 10, 10);
  })

  // 绘制食物
  ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}

6. 创建一个函数来移动蛇。

function move() {
  // 创建新头部
  let newHead = { x: snake[0].x, y: snake[0].y };
  switch (direction) {
    case 'up':
      newHead.y--;
      break;
    case 'down':
      newHead.y++;
      break;
    case 'left':
      newHead.x--;
      break;
    case 'right':
      newHead.x++;
      break;
  }

  // 添加新头部
  snake.unshift(newHead);

  // 判断是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    // 创建新食物
    food = { x: Math.floor(Math.random() * 40), y: Math.floor(Math.random() * 40) };
  } else {
    // 移除尾部
    snake.pop();
  }
}

7. 创建一个函数来更新游戏状态并重新绘制画布。

function update() {
  move();
  draw();
}

8. 使用 setInterval 函数来不断更新游戏状态。

setInterval(update, 100);

到这里，一个简单的贪吃蛇游戏就完成了。当然，这只是一个基础的实现，你可以根据自己的需求进行扩展和优化。