五分钟看懂H5实现贪吃蛇之移动蛇节

移动蛇节是H5+JS单机版贪吃蛇游戏中的一个重要组成部分。通过移动蛇节，我们可以控制蛇的方向和位置，从而完成游戏目标。下面，我们将详细介绍如何使用H5+JS实现蛇节的移动。

1. 定义蛇节数组

首先，我们需要定义一个蛇节数组来存储蛇的身体。这个数组应该是一个二维数组，其中每个元素代表一个蛇节的坐标。例如，以下代码定义了一个蛇节数组，其中包含三个蛇节：

var snake_body = [
  [10, 10],
  [20, 10],
  [30, 10]
];

2. 移动蛇节

为了移动蛇节，我们需要将后一位数组的值赋值给前一位，最后将snake_body蛇节数组中最后一个元素的x或y值加上一个蛇节的宽度。如果是left方向，x-=20，right方向x+=20，top方向y-=20，bottom方向y+=20。

function moveSnake() {
  for (var i = snake_body.length - 1; i > 0; i--) {
    snake_body[i][0] = snake_body[i - 1][0];
    snake_body[i][1] = snake_body[i - 1][1];
  }

  switch (direction) {
    case "left":
      snake_body[0][0] -= 20;
      break;
    case "right":
      snake_body[0][0] += 20;
      break;
    case "top":
      snake_body[0][1] -= 20;
      break;
    case "bottom":
      snake_body[0][1] += 20;
      break;
  }
}

3. 绘制蛇节

移动蛇节后，我们需要将蛇节绘制到Canvas上。我们可以使用以下代码来绘制蛇节：

function drawSnake() {
  for (var i = 0; i < snake_body.length; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(snake_body[i][0], snake_body[i][1], 20, 20);
  }
}

4. 游戏循环

最后，我们需要将移动蛇节和绘制蛇节放入游戏循环中。游戏循环是一个不断重复的循环，它将不断更新游戏状态并重新绘制游戏画面。我们可以使用以下代码来实现游戏循环：

function gameLoop() {
  moveSnake();
  drawSnake();

  setTimeout(gameLoop, 100);
}

gameLoop();

以上就是在H5+JS中实现贪吃蛇移动蛇节的步骤。通过这些步骤，我们可以控制蛇的方向和位置，从而完成游戏目标。