Vue3 + TypeScript 畅玩贪吃蛇

在闲暇的午后，来一把欢乐十足的贪吃蛇游戏，是一个不错的选择。现在，让我们以 Vue3 和 TypeScript 为工具，重温经典，打造属于自己的贪吃蛇游戏。

首先，我们需要构建游戏的基础框架，使用 Vue3 来管理游戏的状态，TypeScript 确保代码的健壮性和可维护性。创建一个名为 SnakeGame 的组件，它将包含游戏的核心逻辑。

<template>
  <div id="game-board">
    <Snake :segments="snakeSegments" />
    <Food :position="foodPosition" />
  </div>
</template>

<script>
import Snake from "./Snake.vue";
import Food from "./Food.vue";

export default {
  components: { Snake, Food },
  data() {
    return {
      snakeSegments: [
        { x: 10, y: 10 },
        { x: 9, y: 10 },
        { x: 8, y: 10 },
      ],
      foodPosition: { x: 20, y: 20 },
      direction: "right",
      intervalId: null,
    };
  },
  methods: {
    moveSnake() {
      // ...
    },
    changeDirection(direction) {
      // ...
    },
    generateFood() {
      // ...
    },
  },
  created() {
    this.intervalId = setInterval(this.moveSnake, 100);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>

接下来，是创建贪吃蛇自身和食物的组件。蛇的移动、进食和生长都可以通过改变蛇段的位置来实现。食物的位置是随机生成的，当蛇头与食物重合时，食物将被吃掉，蛇的身体会增长一段。

// Snake.vue
<template>
  <div class="snake" :style="{ top: snakeHeadTop + 'px', left: snakeHeadLeft + 'px' }">
    <div class="snake-head" :style="{ transform: `rotate(${snakeHeadRotation}deg)` }" />
    <div class="snake-body" v-for="segment in snakeSegments" :key="segment.x + '-' + segment.y" :style="{ top: segment.y + 'px', left: segment.x + 'px' }" />
  </div>
</template>

<script>
export default {
  props: ["segments"],
  computed: {
    snakeHeadTop() {
      return this.segments[0].y;
    },
    snakeHeadLeft() {
      return this.segments[0].x;
    },
    snakeHeadRotation() {
      // ...
    },
  },
};
</script>

// Food.vue
<template>
  <div class="food" :style="{ top: position.y + 'px', left: position.x + 'px' }" />
</template>

<script>
export default {
  props: ["position"],
};
</script>

最后，我们需要处理键盘输入，让蛇能够响应玩家的指令改变方向。还可以添加一些音效和游戏结束条件，让游戏更加生动有趣。

就这样，我们的贪吃蛇游戏就完成了。它不仅是一个有趣的游戏，更是一个学习前端开发的好项目。希望你也能和我一样，享受编程的乐趣。