2023如何使用 Vue 实现贪吃蛇游戏？

贪吃蛇是一款经典的游戏，它简单易上手却乐趣无穷。本文将介绍如何使用Vue框架实现一个简单的贪吃蛇游戏。

一、项目准备

在开始之前，我们需要安装Vue CLI。如果你还没有安装，可以按照以下步骤进行安装。

1. 在终端中运行以下命令：

npm install -g @vue/cli

2. 创建一个新的Vue项目。

vue create snake-game

3. 进入刚刚创建的项目。

cd snake-game

二、项目结构和技术选型

在项目结构方面，我们需要创建两个组件：一个是游戏界面组件，一个是蛇的组件。

在技术选型方面，我们选择使用HTML5 Canvas进行游戏界面的绘制，并使用Vue组件化思想来实现逻辑控制。

三、实现

1. 创建一个游戏界面组件

在src/components/目录下新建一个Game.vue文件，然后添加以下代码：

<template>
  <div>
    <canvas ref="canvas" width="600" height="400"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext("2d");
    this.canvas.width = 600;
    this.canvas.height = 400;
    this.startGame();
  },
  methods: {
    startGame() {
      // 游戏启动
    },
  },
};
</script>

<style>
canvas {
  border: 1px solid #000;
}
</style>

这是一个非常简单的组件，我们只需要编写一个HTML5 Canvas元素，然后为它绑定一个引用，在该组件mounted时获取该引用并开始游戏。

2. 增加蛇组件

在src/components/目录下新建一个Snake.vue文件，然后加入以下代码：

<template>
  <div>
    <div v-for="(bodyPart, index) in snake" :key="index" :style="getSnakeStyles(bodyPart)"></div>
  </div>
</template>

<script>
export default {
  props: {
    snake: {
      type: Array,
      default: () => [{ x: 0, y: 0 }],
    },
  },
  methods: {
    getSnakeStyles(bodyPart) {
      return {
        position: "absolute",
        width: "20px",
        height: "20px",
        background: "green",
        left: `${bodyPart.x}px`,
        top: `${bodyPart.y}px`,
      };
    },
  },
};
</script>

<style></style>

这个组件会根据父组件传入的snake属性，循环渲染贪吃蛇的每一个身体部位。我们只需要编写一个getSnakeStyles函数，返回一个包含了样式信息的对象，根据数据来动态生成蛇。

3. 在Game组件中添加蛇

在Game组件的script块中，我们需要引入Snake组件，并在startGame方法中增加下面的代码：

import Snake from "./Snake.vue";

export default {
  // ...
  components: {
    Snake,
  },
  data() {
    return {
      snake: [],
    };
  },
  methods: {
    startGame() {
      this.snake.push({ x: 0, y: 0 });
    },
  },
};

这里，我们为Game组件添加了一个叫做snake的数据，然后在startGame方法中增加了一行代码，为snake数据增加第一个身体部位。最后，我们引入了Snake组件，并在template中为其加入snake属性。

4. 控制蛇移动

为了让蛇可以移动起来，我们需要为Game组件添加一个定时器，每隔一段时间调用moveSnake方法来控制蛇的移动。

data() {
  return {
    snake: [],
    direction: "right",
    moveInterval: null
  };
},
methods: {
  startGame() {
    this.snake.push({ x: 0, y: 0 });
    this.moveInterval = setInterval(this.moveSnake, 200);
  },
  moveSnake() {
    const snakeHead = { ...this.snake[0] };

    switch (this.direction) {
      case "right":
        snakeHead.x += 20;
        break;
      case "left":
        snakeHead.x -= 20;
        break;
      case "up":
        snakeHead.y -= 20;
        break;
      case "down":
        snakeHead.y += 20;
        break;
    }

    this.snake.pop();
    this.snake.unshift(snakeHead);
  },
  handleKeyDown(event) {
    switch (event.keyCode) {
      case 37:
        if (this.direction !== "right") this.direction = "left";
        break;
      case 38:
        if (this.direction !== "down") this.direction = "up";
        break;
      case 39:
        if (this.direction !== "left") this.direction = "right";
        break;
      case 40:
        if (this.direction !== "up") this.direction = "down";
        break;
    }
  },
},

其中，我们为Game组件添加了一个叫做direction的数据，表示当前蛇的方向。moveInterval表示用于清除定时器的id。在moveSnake方法中，我们根据蛇的当前方向计算蛇头的新位置，并将原本的末尾删除并在头部插入新的蛇头。

最后，我们实现了handleKeyDown方法，用于监听键盘事件，来改变蛇的运动方向。

5. 碰到边界或自身时游戏结束

为了实现游戏结束功能，我们需要在moveSnake方法内部判断蛇是否碰到了边界或自身。

moveSnake() {
  const snakeHead = { ...this.snake[0] };

  switch (this.direction) {
    case "right":
      snakeHead.x += 20;
      break;
    case "left":
      snakeHead.x -= 20;
      break;
    case "up":
      snakeHead.y -= 20;
      break;
    case "down":
      snakeHead.y += 20;
      break;
  }

  // 判断是否越界
  if (snakeHead.x < 0 || snakeHead.x > 580 || snakeHead.y < 0 || snakeHead.y > 380) {
    clearInterval(this.moveInterval);
    alert("Game over!");
    location.reload();
    return;
  }

  // 判断是否碰到了自身
  for (let i = 1; i < this.snake.length; i++) {
    if (snakeHead.x === this.snake[i].x && snakeHead.y === this.snake[i].y) {
      clearInterval(this.moveInterval);
      alert("Game over!");
      location.reload();
      return;
    }
  }

  this.snake.pop();
  this.snake.unshift(snakeHead);
}

这里，我们首先判断蛇头是否越过了游戏界面的边界，如果越界，清除定时器并提示游戏结束，反之则继续执行。

接着，在循环中逐一判断蛇头是否碰到了自身，如果是，则同样清除定时器并提示游戏结束。

6. 在游戏界面中绘制食物

最后，我们实现在游戏界面中绘制食物的功能。为了实现这一功能，我们使用randomFoodPosition计算出一个随机的食物位置，然后使用drawCircle方法在游戏界面中绘制圆形食物。

startGame() {
  // ...
  // 画出第一个食物
  this.food = this.getRandomFoodPosition();
  this.drawCircle(this.context, this.food.x, this.food.y, 10, "red");
},
methods: {
  // ...
  getRandomFoodPosition() {
    return {
      x: Math.floor(Math.random() * 30) * 20,
      y: Math.floor(Math.random() * 20) * 20,
    };
  },
  drawCircle(ctx, x, y, r, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.fill();
  },
},

这里，我们为Game组件添加了一个名为food的数据，表示当前的食物位置。在startGame方法中，我们调用了getRandomFoodPosition方法计算一个随机的食物位置，然后使用drawCircle方法在界面中绘制出食物。

最后，我们只需要在moveSnake方法中，判断蛇是否与食物重合，如果重合，则增加蛇的身体长度，并重新计算一个新的食物位置。

moveSnake() {
  // ...

  // 判断是否吃到了食物
  if (snakeHead.x === this.food.x && snakeHead.y === this.food.y) {
    this.snake.push(this.snake[this.snake.length - 1]);
    this.food = this.getRandomFoodPosition();
  }

  // ...
},

到此为止，我们已经完成了Vue实现贪吃蛇游戏的全部内容。

四、总结

本文介绍了如何使用Vue框架实现一个简单的贪吃蛇游戏。在这个过程中，我们学习了如何使用HTML5 Canvas元素进行界面绘制，以及如何使用Vue组件化思想来实现逻辑控制，最终完成了一个具有基本玩法的贪吃蛇游戏。希望这篇文章能够对大家学习Vue框架和游戏开发有所帮助。