HTML5贪吃蛇教程：轻松制作经典游戏

// 格子大小
const gridSize = 20;
// 蛇的初始位置（格子坐标）
let snake = [
  {x: 6, y: 5},
  {x: 5, y: 5},
  {x: 4, y: 5}
];
// 初始移动方向（右）
let dx = 1;
let dy = 0;
// 食物位置
let food = {x: 10, y: 10};
// 游戏是否结束
let gameOver = false;

function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x  gridSize, segment.y  gridSize, gridSize, gridSize);
});
// 绘制食物
ctx.fillStyle = 'red';
ctx.fillRect(food.x  gridSize, food.y  gridSize, gridSize, gridSize);
}

function moveSnake() {
  if (gameOver) return;
// 计算新头位置
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
// 检查是否撞墙或撞自己
if (
head.x < 0 || head.x >= canvas.width / gridSize ||
head.y < 0 || head.y >= canvas.height / gridSize ||
snake.some(segment => segment.x === head.x && segment.y === head.y)
) {
gameOver = true;
alert("游戏结束！");
return;
}
// 添加新头
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 重新生成食物
food = {
x: Math.floor(Math.random()  (canvas.width / gridSize)),
y: Math.floor(Math.random()  (canvas.height / gridSize))
};
} else {
// 没吃到就删尾
snake.pop();
}
}
// 键盘控制
document.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
if (dy !== 1) { dx = 0; dy = -1; }
break;
case 'ArrowDown':
if (dy !== -1) { dx = 0; dy = 1; }
break;
case 'ArrowLeft':
if (dx !== 1) { dx = -1; dy = 0; }
break;
case 'ArrowRight':
if (dx !== -1) { dx = 1; dy = 0; }
break;
}
});

function gameLoop() {
  moveSnake();
  draw();
}
// 每200毫秒执行一次（控制速度）
setInterval(gameLoop, 200);