如何使用 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框架和遊戲開發有所幫助。

以上是如何使用 Vue 實現貪吃蛇遊戲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！