贪吃蛇游戏：重温经典，趣味无穷

2023-12-07 06:03:51

贪吃蛇是一款经典的游戏，它风靡一时，如今仍然受到许多人的喜爱。这款游戏玩法简单，却极具挑战性，让玩家欲罢不能。现在，您可以使用Canvas和JavaScript来开发一款贪吃蛇游戏，让您重温经典，体验趣味无穷的乐趣。

贪吃蛇游戏开发步骤

创建画布

首先，您需要创建一个HTML画布，以便在上面绘制游戏画面。您可以使用以下代码来创建画布：

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

获取画布上下文

接下来，您需要获取画布的上下文，以便在画布上进行绘图操作。您可以使用以下代码来获取画布上下文：

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

定义蛇的身体

贪吃蛇的身体由一个个方块组成，您需要定义蛇的身体，以便在画布上绘制蛇的身体。您可以使用以下代码来定义蛇的身体：

const snake = [
  {x: 20, y: 20},
  {x: 19, y: 20},
  {x: 18, y: 20},
  {x: 17, y: 20},
  {x: 16, y: 20},
];

定义食物

贪吃蛇需要吃食物来成长，您需要定义食物，以便在画布上绘制食物。您可以使用以下代码来定义食物：

const food = {
  x: 100,
  y: 100,
};

游戏循环

贪吃蛇游戏是一个循环的过程，您需要定义游戏循环，以便让游戏不断运行。您可以使用以下代码来定义游戏循环：

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制蛇的身体
  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = 'green';
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
  }

  // 绘制食物
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, 10, 10);

  // 检查蛇是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    // 蛇吃到食物，增长身体
    snake.unshift({x: food.x, y: food.y});

    // 重新生成食物
    food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
    food.y = Math.floor(Math.random() * canvas.height / 10) * 10;
  }

  // 检查蛇是否撞到自己
  for (let i = 4; i < snake.length; i++) {
    if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
      // 蛇撞到自己，游戏结束
      alert('Game over!');
      window.location.reload();
    }
  }

  // 移动蛇的身体
  for (let i = snake.length - 1; i > 0; i--) {
    snake[i].x = snake[i - 1].x;
    snake[i].y = snake[i - 1].y;
  }

  // 根据键盘输入改变蛇的移动方向
  document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
      case 37: // left
        snake[0].x -= 10;
        break;
      case 38: // up
        snake[0].y -= 10;
        break;
      case 39: // right
        snake[0].x += 10;
        break;
      case 40: // down
        snake[0].y += 10;
        break;
    }
  });

  // 重新绘制画布
  requestAnimationFrame(gameLoop);
}