文章目錄
- 引言
- 項目初始化
- 游戲設計和結構
- 游戲程序實現
- Vue頁面嵌入Phaser
- Preloader 場景加載
- 游戲場景功能實現
- 功能類定義
- Boom爆炸類
- Bullet子彈類
- Enemy敵軍類
- Player玩家類
- End游戲結束類
- 總結
更多相關內容可查看
引言
飛機大戰（也被稱為射擊游戲或空戰游戲）是一種非常受歡迎的休閑游戲類型。在這個博客中，我們將探討如何使用 Vue.js 框架來構建一個簡單的飛機大戰游戲。我們將從基本的游戲邏輯開始，逐步增加游戲元素和交互性，代碼詳解可參考注釋，最終展示畫面在文章底部
項目初始化
git地址：https://gitee.com/its-a-little-bad/vue-project—aircraft-battle.git
node版本：20.8.1
游戲設計和結構
在 Vue.js 中，我們通常將游戲的各個部分分解為不同的場景。
主場景
游戲場景
游戲程序實現
Vue頁面嵌入Phaser
在 Vue 應用中嵌入一個 Phaser 游戲
<template><!-- Phaser 游戲的容器 --><div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { Game, AUTO, Scale } from "phaser";
import { Preloader } from "./game/Preloader";
import { Main } from "./game/Main";
import { End } from "./game/End";// 使用正則表達式檢測當前設備是否為移動設備
let isMobile = /(iPhone|iPad|Android)/i.test(navigator.userAgent);// 定義了一個 game 變量來存儲 Phaser 游戲實例
let game: Game;
onMounted(() => {game = new Game({parent: "container",type: AUTO,width: 375,//游戲的大小根據設備類型進行調整。如果設備是移動設備，則高度會根據設備的縱橫比計算得出。height: isMobile ? (window.innerHeight / window.innerWidth) * 375 : 667,//游戲的縮放模式也根據設備類型進行設置。移動設備使用 Scale.FIT，這意味著游戲將盡可能地適應屏幕大小，//而不會保持其原始縱橫比。非移動設備則使用 Scale.NONE，這意味著游戲將保持其原始大小。scale: {mode: isMobile ? Scale.FIT : Scale.NONE,},physics: {default: "arcade",arcade: {debug: false,},},scene: [Preloader, Main, End],});
});onUnmounted(() => {game.destroy(true);
});
</script><style>
body {margin: 0;
}
#app {height: 100%;
}
</style>Preloader 場景加載
創建一個 Preloader 場景來加載游戲所需的資源和設置一些基本的游戲元素，示例如下
程序實現：
import { Scene } from "phaser";
import backgroundImg from "../assets/images/background.jpg";
import enemyImg from "../assets/images/enemy.png";
import playerImg from "../assets/images/player.png";
import bulletImg from "../assets/images/bullet.png";
import boomImg from "../assets/images/boom.png";
import spritesImg from "../assets/images/sprites.png";
import spritesJson from "../assets/json/sprites.json?url";
import bgmAudio from "../assets/audio/bgm.mp3";
import boomAudio from "../assets/audio/boom.mp3";
import bulletAudio from "../assets/audio/bullet.mp3"; export class Preloader extends Scene { // 構造函數，定義場景名稱為 "Preloader" constructor() { super("Preloader"); } // 預加載資源的方法 preload() { // 加載背景圖片 this.load.image("background", backgroundImg); // 加載敵人圖片 this.load.image("enemy", enemyImg); // 加載玩家圖片 this.load.image("player", playerImg); // 加載子彈圖片 this.load.image("bullet", bulletImg); // 加載爆炸動畫的精靈表（spritesheet） this.load.spritesheet("boom", boomImg, { frameWidth: 64, frameHeight: 48, }); // 加載精靈圖集（atlas） this.load.atlas("sprites", spritesImg, spritesJson); // 加載背景音樂 this.load.audio("bgm", bgmAudio); // 加載爆炸音效 this.load.audio("boom", boomAudio); // 加載子彈音效 this.load.audio("bullet", bulletAudio); } // 創建場景的方法 create() { const { width, height } = this.cameras.main; // 顯示背景（通常在Preloader場景中不展示實際游戲內容，這里僅為示例） this.add.tileSprite(0, 0, width, height, "background").setOrigin(0, 0); // 播放背景音樂（在Preloader場景中播放通常是為了給玩家一個等待的反饋） this.sound.play("bgm", { loop: true }); // 循環播放背景音樂 // 添加標題（通常也不在Preloader場景中，但可以作為加載提示） this.add .text(width / 2, height / 4, "飛機大戰", { fontFamily: "Arial", fontSize: 60, color: "#e3f2ed", stroke: "#203c5b", strokeThickness: 6, }) .setOrigin(0.5); // 添加開始按鈕（通常用于在加載完成后切換到主場景） let button = this.add .image(width / 2, (height / 4) * 3, "sprites", "button") // 假設"sprites"圖集中有名為"button"的幀 .setScale(3, 2) .setInteractive() .on("pointerdown", () => { // 當按鈕被點擊時，切換到主場景（這里主場景名為'Main'） this.scene.start('Main'); }); // 按鈕文案this.add.text(button.x, button.y, "開始游戲", {fontFamily: "Arial",fontSize: 20,color: "#e3f2ed",}).setOrigin(0.5); } // 創建動畫，命名為 boom，后面使用this.anims.create({key: "boom",frames: this.anims.generateFrameNumbers("boom", { start: 0, end: 18 }),repeat: 0,});
}
在Phaser 3框架中，從一個場景（如Preloader）切換到另一個場景（如Main）通常使用this.scene.start(‘Main’)這樣的代碼來實現。這是Phaser場景管理系統的一部分，它允許你動態地加載、創建、運行和銷毀游戲的不同部分。
游戲場景功能實現
程序實現
// 定義 Main 場景類，繼承自 Phaser 的 Scene 類
import { Scene, Physics, GameObjects } from "phaser";
import { Player } from "./Player";
import { Bullet } from "./Bullet";
import { Enemy } from "./Enemy";
import { Boom } from "./Boom";// 場景元素
let background: GameObjects.TileSprite;
let player: Player;
let enemys: Physics.Arcade.Group;
let bullets: Physics.Arcade.Group;
let booms: GameObjects.Group;
let scoreText: GameObjects.Text;// 場景數據
let score: number;export class Main extends Scene {constructor() {super("Main");}create() {let { width, height } = this.cameras.main;// 創建背景background = this.add.tileSprite(0, 0, width, height, "background").setOrigin(0, 0);// 創建玩家，調用Player類player = new Player(this);// 創建敵軍組// 注解：enemys 是一個 Phaser 的物理組，用于存儲和管理多個 Enemy 對象// frameQuantity 表示從 enemy 紋理集中加載的幀數，key 是紋理集的名稱// enable, active, visible 分別是啟用物理、激活和可見性標志// classType 指示組中新創建對象的類型enemys = this.physics.add.group({frameQuantity: 30,key: "enemy",enable: false,// 在此初始狀態下不啟用物理 active: false,// 在此初始狀態下不激活 visible: false,// 在此初始狀態下不可見classType: Enemy,// 當組中添加新對象時使用的類});// 創建子彈// 注解：與敵軍組類似，但用于存儲和管理多個 Bullet 對象 bullets = this.physics.add.group({frameQuantity: 15,key: "bullet",enable: false,active: false,visible: false,classType: Bullet,});// 創建爆炸// 注解：booms 組用于存儲和管理多個 Boom 對象，可能是用于顯示爆炸動畫booms = this.add.group({frameQuantity: 30,key: "boom",active: false,visible: false,classType: Boom,});// 分數// 注解：score 變量用于跟蹤玩家的分數，scoreText 是顯示分數的文本對象 score = 0;scoreText = this.add.text(10, 10, "0", {fontFamily: "Arial",fontSize: 20,});// 注冊事件this.addEvent();}// 注冊事件addEvent() {// 定時器// 注解：此定時器每 400 毫秒觸發一次回調，生成敵軍和發射子彈 this.time.addEvent({delay: 400,callback: () => {// 生成2個敵軍for (let i = 0; i < 2; i++) {enemys.getFirstDead()?.born();}// 發射1顆子彈bullets.getFirstDead()?.fire(player.x, player.y - 32);},callbackScope: this,repeat: -1,});// 子彈和敵軍碰撞，會調用 hit 方法this.physics.add.overlap(bullets, enemys, this.hit, null, this);// 玩家和敵軍碰撞，會調用 gameOver 方法this.physics.add.overlap(player, enemys, this.gameOver, null, this);}// 子彈擊中敵軍hit(bullet, enemy) {// 子彈和敵軍隱藏enemy.disableBody(true, true);bullet.disableBody(true, true);// 顯示爆炸booms.getFirstDead()?.show(enemy.x, enemy.y);// 分數增加scoreText.text = String(++score);}// 游戲結束gameOver() {// 暫停當前場景，并沒有銷毀this.sys.pause();// 保存分數this.registry.set("score", score);// 打開結束場景this.game.scene.start("End");}update() {// 設置背景瓦片不斷移動background.tilePositionY -= 1;}
}功能類定義
Boom爆炸類
import { GameObjects, Scene } from "phaser";export class Boom extends GameObjects.Sprite {constructor(scene: Scene, x: number, y: number, texture: string) {// 創建對象super(scene, x, y, texture);// 爆炸動畫播放結束事件this.on("animationcomplete-boom", this.hide, this);}/*** 顯示爆炸* @param x 爆炸x坐標* @param y 爆炸y坐標*/show(x: number, y: number) {this.x = x;this.y = y;this.setActive(true);this.setVisible(true);// 爆炸動畫this.play("boom");// 爆炸音效this.scene.sound.play("boom");}/*** 隱藏爆炸*/hide() {this.setActive(false);this.setVisible(false);}
}Bullet子彈類
import { Physics, Scene } from "phaser";export class Bullet extends Physics.Arcade.Sprite {constructor(scene: Scene, x: number, y: number, texture: string) {super(scene, x, y, texture);// 設置屬性this.setScale(0.25);}/*** 發射子彈* @param x 子彈x坐標* @param y 子彈y坐標*/fire(x: number, y: number) {this.enableBody(true, x, y, true, true);this.setVelocityY(-300);this.scene.sound.play("bullet");}preUpdate(time: number, delta: number) {super.preUpdate(time, delta);// 子彈走到頭，銷毀if (this.y <= -14) {this.disableBody(true, true);}}
}Enemy敵軍類
import { Physics, Math, Scene } from "phaser";export class Enemy extends Physics.Arcade.Sprite {constructor(scene: Scene, x: number, y: number, texture: string) {// 創建對象super(scene, x, y, texture);scene.add.existing(this);scene.physics.add.existing(this);// 設置屬性this.setScale(0.5);this.body.setSize(100, 60);}/*** 生成敵軍*/born() {let x = Math.Between(30, 345);let y = Math.Between(-20, -40);this.enableBody(true, x, y, true, true);this.setVelocityY(Math.Between(150, 300));}preUpdate(time: number, delta: number) {super.preUpdate(time, delta);let { height } = this.scene.cameras.main;// 敵軍走到頭，銷毀if (this.y >= height + 20) {this.disableBody(true, true)}}
}Player玩家類
import { Physics, Scene } from "phaser";export class Player extends Physics.Arcade.Sprite {isDown: boolean = false;downX: number;downY: number;constructor(scene: Scene) {// 創建對象let { width, height } = scene.cameras.main;super(scene, width / 2, height - 80, "player");scene.add.existing(this);scene.physics.add.existing(this);// 設置屬性this.setInteractive();this.setScale(0.5);this.setCollideWorldBounds(true);this.body.setSize(120, 120);// 注冊事件this.addEvent();}/*** 注冊事件*/addEvent() {// 手指按下我方飛機this.on("pointerdown", () => {this.isDown = true;this.downX = this.x;this.downY = this.y;});// 手指抬起this.scene.input.on("pointerup", () => {this.isDown = false;});// 手指移動this.scene.input.on("pointermove", (pointer) => {if (this.isDown) {this.x = this.downX + pointer.x - pointer.downX;this.y = this.downY + pointer.y - pointer.downY;}});}
}End游戲結束類
import { Scene } from "phaser";export class End extends Scene {constructor() {super("End");}create() {let { width, height } = this.cameras.main;// 結束面板this.add.image(width / 2, height / 2, "sprites", "result").setScale(2.5);// 標題this.add.text(width / 2, height / 2 - 85, "游戲結束", {fontFamily: "Arial",fontSize: 24,}).setOrigin(0.5);// 當前得分let score = this.registry.get("score");this.add.text(width / 2, height / 2 - 10, `當前得分：${score}`, {fontFamily: "Arial",fontSize: 20,}).setOrigin(0.5);// 重新開始按鈕let button = this.add.image(width / 2, height / 2 + 50, "sprites", "button").setScale(3, 2).setInteractive().on("pointerdown", () => {// 點擊事件：關閉當前場景，打開Main場景this.scene.start("Main");});// 按鈕文案this.add.text(button.x, button.y, "重新開始", {fontFamily: "Arial",fontSize: 20,}).setOrigin(0.5);}
}總結
通過使用 Vue.js 框架，我們可以輕松地構建出一個簡單而有趣的飛機大戰游戲。從基本的游戲邏輯開始，逐步增加游戲元素和交互性，最終得到一個完整且吸引人的游戲作品。希望這個博客能對你有所啟發，并鼓勵你嘗試使用 Vue.js 來開發更多有趣的游戲和應用程序！
: 圖像（數據）遠程傳輸)
