极度简单，150行代码完成js贪食蛇_js简单50行代码贪吃蛇-优快云博客

这是一个使用HTML5Canvas和JavaScript编写的贪吃蛇游戏示例。代码中包含了游戏初始化、生成食物、控制蛇移动、检测游戏结束以及监听键盘事件等功能。玩家可以通过方向键控制贪食蛇移动，吃到食物后蛇会变长，碰到边界或自身则游戏结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      align-items: center;
      display: flex;
      justify-content: center;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <!-- <script src="snake.js"></script> -->
</body>
<script>
  // 获取画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 定义每个格子的大小和初始坐标
const gridSize = 10;
const gridNum  = canvas.width / gridSize;
let snake = [
  { x: 0, y: 0 },
  { x: gridSize, y: 0 },
  { x: 2 * gridSize, y: 0 },
];
let food = { x: 0, y: 0 };
// 定义贪食蛇的移动方向和状态
let direction = 'right';
let isGameOver = false;
// 初始化游戏
function initGame() {
  // 初始化贪食蛇位置
  snake = [
    { x: 0, y: 0 },
    { x: gridSize, y: 0 },
    { x: 2 * gridSize, y: 0 },
  ];
  // 随机生成食物位置
  generateFood();
  // 设置方向
  direction = 'right';
  // 设置游戏状态为未结束
  isGameOver = false;
  // 开始游戏循环
  setInterval(gameLoop, 100);
}
// 生成食物
function generateFood() {
  const x = Math.floor(Math.random() * gridNum) * gridSize;
  const y = Math.floor(Math.random() * gridNum) * gridSize;
  // 如果新生成的食物在贪食蛇占据的位置，就重新生成
  for (let i = 0; i < snake.length; i++) {
    if (x === snake[i].x && y === snake[i].y) {
      return generateFood();
    }
  }
  food.x = x;
  food.y = y;
}
// 控制贪食蛇移动
function moveSnake() {
  // 根据方向更新贪食蛇的位置
  for (let i = snake.length - 1; i > 0; i--) {
    snake[i].x = snake[i - 1].x;
    snake[i].y = snake[i - 1].y;
  }
  switch (direction) {
    case 'up':
      snake[0].y -= gridSize;
      break;
    case 'down':
      snake[0].y += gridSize;
      break;
    case 'left':
      snake[0].x -= gridSize;
      break;
    case 'right':
      snake[0].x += gridSize;
      break;
  }
  // 如果贪食蛇头部撞到了边界，设置游戏结束
  if (snake[0].x < 0 ||
      snake[0].x >= canvas.width ||
      snake[0].y < 0 ||
      snake[0].y >= canvas.height) {
    isGameOver = true;
  }
  // 如果贪食蛇头部撞到了自己的身体，设置游戏结束
  for (let i = 1; i < snake.length; i++) {
    if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
      isGameOver = true;
      break;
    }
  }
}
// 游戏循环
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 控制贪食蛇移动
  moveSnake();
  // 绘制贪食蛇
  ctx.fillStyle = 'green';
  for (let i = 0; i < snake.length; i++) {
    ctx.fillRect(snake[i].x, snake[i].y, gridSize, gridSize);
  }
  // 绘制食物
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, gridSize, gridSize);
  // 如果吃到了食物，重新生成一个食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    generateFood();
    snake.push({ x: 0, y: 0 });  // 增加贪食蛇的身体长度
  }
  // 如果游戏结束，停止游戏循环并弹出提示
  if (isGameOver) {
    clearInterval(gameInterval);
    alert('游戏结束！');
  }
}
// 监听方向键事件
document.addEventListener('keydown', function (event) {
  switch (event.keyCode) {
    case 38:
      if (direction !== 'down') direction = 'up';
      break;
    case 40:
      if (direction !== 'up') direction = 'down';
      break;
    case 37:
      if (direction !== 'right') direction = 'left';
      break;
    case 39:
      if (direction !== 'left') direction = 'right';
      break;
  }
});
// 开始游戏
initGame();
</script>
</html>