js实现简单的贪吃蛇游戏

下面我将详细讲解如何使用JavaScript实现一个简单的贪吃蛇游戏。

前置知识

在开始学习如何实现贪吃蛇游戏之前，我们需要了解一些基本概念：

• HTML：用于定义页面内容和结构的标记语言。
• CSS：用于定义页面样式和布局的样式表语言。
• JavaScript：用于实现页面交互和动态效果的脚本语言。
• Canvas：HTML5中新增的一个标签，用于通过JavaScript绘制图形。

实现过程

接下来我们将分为3个部分详细讲解如何实现贪吃蛇游戏：

第一部分：绘制贪吃蛇和食物

我们先在HTML文件中创建一个Canvas标签，设置宽高以及样式：

<canvas id="snake" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

接下来，我们需要使用JavaScript代码来获取Canvas元素，并且创建一个绘制上下文，用于后续的图形绘制。我们使用Canvas的getContext()方法，传入2d参数获取一个2D上下文：

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

接下来我们需要绘制食物和贪吃蛇。我们可以声明一个变量，表示贪吃蛇的初始状态，如下所示：

let snake = [
  { x: 10, y: 10 },
  { x: 20, y: 10 },
  { x: 30, y: 10 },
  { x: 40, y: 10 }
];

其中snake变量是一个数组，用于存储蛇的所有位置。数组对象有x和y属性，用于表示蛇的位置。

这里我们使用循环遍历snake数组，使用fillRect()方法绘制每一个位置的蛇身：

for (let i = 0; i < snake.length; i++) {
  ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
}

接下来我们需要绘制食物。同样使用一个变量来表示食物的位置，如下所示：

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

使用fillRect()方法绘制食物：

ctx.fillRect(food.x, food.y, 10, 10);

至此，我们已经完成了绘制贪吃蛇和食物的部分。

第二部分：键位控制蛇的移动

接下来，我们需要使用键盘控制蛇的移动。需要监听用户按下的键盘按键事件，并根据按键来改变蛇的位置。

首先，创建一个变量，用于表示蛇的移动方向：

let direction = 'right';

同时，我们需要监测用户按下了哪个键盘键，来改变蛇的移动方向。我们需要监听keydown事件：

document.addEventListener('keydown', handleKeydown);

在handleKeydown()函数中，我们需要根据用户按下的键来改变蛇的移动方向变量direction的值：

function handleKeydown(event) {
  switch (event.key) {
    case 'ArrowUp':
      direction = 'up';
      break;
    case 'ArrowDown':
      direction = 'down';
      break;
    case 'ArrowLeft':
      direction = 'left';
      break;
    case 'ArrowRight':
      direction = 'right';
      break;
  }
}

在蛇的移动函数中，根据蛇的当前位置和移动方向来改变蛇的位置，并调用requestAnimationFrame()方法实现动画效果：

function move() {
  switch (direction) {
    case 'up':
      snake.unshift({ x: snake[0].x, y: snake[0].y - 10 });
      break;
    case 'down':
      snake.unshift({ x: snake[0].x, y: snake[0].y + 10 });
      break;
    case 'left':
      snake.unshift({ x: snake[0].x - 10, y: snake[0].y });
      break;
    case 'right':
      snake.unshift({ x: snake[0].x + 10, y: snake[0].y });
      break;
  }
  snake.pop();
  // 重新绘制蛇和食物
  requestAnimationFrame(draw);
  // 调用move()函数，实现动画效果
  setTimeout(move, 100);
}

第三部分：判断蛇和食物的碰撞并实现得分

最后一步，我们需要判断贪吃蛇是否与食物碰撞，并重新生成食物。可以在move()函数中，判断蛇头是否与食物重合，并在重合时生成新的食物。

function handleCollision() {
  if (snake[0].x === food.x && snake[0].y === food.y) {
    snake.push(snake[snake.length - 1]);
    // 重新生成食物
    food = {
      x: Math.floor(Math.random() * (canvas.width / 10)) * 10,
      y: Math.floor(Math.random() * (canvas.height / 10)) * 10
    };
  }
}

在得分方面，我们可以在每次吃掉食物时，增加分数，并在页面上展示分数即可。

至此，我们已经完成了简单的贪吃蛇游戏制作。

示例说明

1. 如何绘制蛇和食物？

我们可以使用Canvas的fillRect()方法来绘制贪吃蛇和食物：

ctx.fillRect(x, y, 10, 10);

其中x和y表示蛇或食物的位置，10表示蛇或食物的大小。

1. 如何监听键盘按键事件？

我们可以使用JavaScript的addEventListener()方法来监听事件，具体可以监听键盘的keydown事件：

document.addEventListener('keydown', handleKeydown);

在handleKeydown()函数中，我们可以获取到用户按下的键盘键：

function handleKeydown(event) {
  console.log(event.key);
}

这样就可以在控制台中打印出用户所按下的键盘键了。