Vue3 Hooks制作贪吃蛇小游戏：轻松入门，趣味无限！

前端

2023-09-18 00:42:18

如何使用 Vue3 和 Hooks 构建令人着迷的贪吃蛇小游戏

准备好用一场令人上瘾的贪吃蛇游戏来挑战自己吗？在这个引人入胜的教程中，我们将使用强大的 Vue3 框架和实用 Hooks，一步步带你踏上打造这款经典游戏的旅程。

游戏界面

这是一个相当简单的游戏，我们将直接深入游戏的逻辑部分，从而充分利用 Vue3 和 Hooks 的强大功能。

游戏逻辑

贪吃蛇的每个节点都存储在一个数组中。然后，我们在页面上遍历该数组，呈现出每个节点。当贪吃蛇移动时，我们将利用 useWatchMove 这个 Hooks 来检测它是否撞到了自己。如果发生碰撞，游戏就结束了。

代码示例

import { ref, onMounted, watch } from "vue";

export default {
  setup() {
    const snake = ref([]);
    const direction = ref("right");
    const foodPosition = ref({ x: 0, y: 0 });

    onMounted(() => {
      createSnake();
      createFood();
      setInterval(() => {
        moveSnake();
      }, 100);
    });

    watch(snake, (newValue, oldValue) => {
      if (newValue[0].x === foodPosition.x && newValue[0].y === foodPosition.y) {
        eatFood();
      }
    });

    const useWatchMove = (callback) => {
      watch(snake, (newValue, oldValue) => {
        for (let i = 4; i < newValue.length; i++) {
          if (newValue[i].x === newValue[0].x && newValue[i].y === newValue[0].y) {
            callback();
          }
        }
      });
    };

    const moveSnake = () => {
      let newHead;
      switch (direction.value) {
        case "right":
          newHead = { x: snake.value[0].x + 1, y: snake.value[0].y };
          break;
        case "left":
          newHead = { x: snake.value[0].x - 1, y: snake.value[0].y };
          break;
        case "up":
          newHead = { x: snake.value[0].x, y: snake.value[0].y - 1 };
          break;
        case "down":
          newHead = { x: snake.value[0].x, y: snake.value[0].y + 1 };
          break;
      }
      snake.value.unshift(newHead);
      snake.value.pop();
    };

    const createSnake = () => {
      for (let i = 0; i < 3; i++) {
        snake.value.push({ x: i, y: 0 });
      }
    };

    const createFood = () => {
      foodPosition.value = { x: Math.floor(Math.random() * 10), y: Math.floor(Math.random() * 10) };
    };

    const eatFood = () => {
      snake.value.push({ x: foodPosition.value.x, y: foodPosition.value.y });
      createFood();
    };

    return {
      snake,
      direction,
      useWatchMove,
    };
  },
};