首页 > 游戏资讯 > 游戏攻略

使用vue3+phaser实现经典小游戏：飞机大战

发布时间：2024-09-21浏览：45

说起小游戏，最经典的就是空战。相信很多同学都玩过。今天我们就来尝试开发一款有趣的小游戏吧！我们从零开始，一步步看如何实现一款H5版本的飞机大战！

首先，我们设定一个目标：我们要打造什么样的飞机大战，去哪里收集游戏素材？

恰巧微信小程序官方提供了飞机大战小游戏的模板。打开【微信开发者工具】，选择【新建项目】-【小游戏】，选择飞机大战模板，创建完成后就是飞机大战的小程序版本。

运行小程序后，可以看到如下效果：

从作战效果来看，这次机战比较完整，包括以下内容：

1.滚动地图并播放背景音效；

2.玩家控制飞行器移动；

3、飞机持续发射子弹并播放射击音效；

4.向下移动的敌人随机出现；

5.当子弹与敌人碰撞时，会播放爆炸动画和音效。同时，子弹和敌人都会被消灭，并增加1分；

6. 当飞行器与敌人相撞时，游戏结束，弹出结束面板。

接下来我们将以这个效果为参考，复制本项目中的图片和音效素材，从头开始制作一个H5版本的飞机大战！

选择游戏框架

你可能会好奇，既然微信小程序已经官方生成了完整的代码，那直接引用那套代码不是更好吗？

这就涉及到游戏框架的问题。小程序的代码没有使用游戏框架，所以很多基础方面都需要自己实现，比如子弹移动、子弹与敌人碰撞检测等。

我们以碰撞为例。在小程序项目中，是这样实现的：

1.首先定义碰撞检测方法isCollideWith()，根据两个物体的坐标、宽度和高度计算碰撞检测：

isCollideWith(sp) { 让spX=sp.x + sp.width/2;让spY=sp.y + sp.height/2; if (!this.visible || !sp.visible) 返回false;返回！ (spX=this.x spX=this.x + this.width spY=this.y spY=this.y + this.height);},

2、然后在每一帧的回调中，遍历所有子弹和所有敌人，依次调用isCollideWith()进行碰撞检测：

update() {Bullets.forEach((bullet)={ for (let i=0, il=heavens.length; i il; i++) { if (enemys[i].isCollideWith(bullet)) { //做某事} } });}

3、有了游戏框架，可能只需要一行代码。我们以Phaser 为例：

this.physics.add.overlap(bullets, 敌人， ()={ //做某事}, null, this);

上面代码的意思是：如果子弹（子弹群）和敌人（敌群）重叠，则触发回调。

从上面的例子可以看出，选择游戏框架来开发游戏可以大大降低开发难度，减少代码量。

在开发专业游戏时，我们通常会选择专门的游戏引擎，比如Cocos、Egret、LayaBox、Unity等。但如果只是做一个简单的H5游戏，嵌入到我们的前端项目中，就使用Phaser即可。

引用Phaser官网的介绍：

[Phaser 是一个快速、免费且有趣的开源HTML5 游戏框架，可在桌面和移动Web 浏览器上提供WebGL 和Canvas 渲染。游戏可以使用第三方工具编译成iOS、Android 和本机应用程序。您可以使用JavaScript 或TypeScript 进行开发。】

同时，Phaser 在社区中也很受欢迎。过去一周，它在Github 上获得了35,500 颗星，在Npm 上获得了19,000 次下载。

因此我们使用Phaser作为游戏框架。接下来，正式开始我们的位面战争之旅吧！

准备

3.1 创建项目

项目采用的技术栈为：Phaser + Vue3 + TypeScript + Vite。

当然，对于这个游戏来说，核心框架是Phaser，其他都是可选的。也可以只使用Phaser + Html进行开发，但我们希望采用目前比较主流的开发方式。

进入工作目录，直接使用vue脚手架创建一个名为plane-war的项目。

npm 创建vue

项目创建完毕，安装依赖，检查是否运行正常。

cdplane-warnpm installnpm run dev

接下来安装移相器。

npm 安装移相器

3.2 整理材料

接下来，我们重新整理项目，清除不需要的文件，并将游戏素材复制到assets目录下。最终的目录结构如下：

飞机战争 src 资产音频 bgm.mp3 繁荣.mp3 子弹.mp3 图片背景.jpg 繁荣.png 子弹.png 敌人.png 玩家.png sprites.png json sprites.json App.vue main.ts

材料加工1：

原版游戏素材中，爆炸动画由19张独立画面组成。在Phaser中，需要合成精灵图像。可以通过精灵图片合成工具合成，命名为boom.png。效果如下：

材料加工2：

这里我们指定两个目标图像，result是结束面板，button是按钮。

{ '纹理': [ { '图像': 'sprites.png', '尺寸': { 'w': 512, 'h': 512 }, '帧': [ { '文件名': '结果', '框架': {'x': 0，'y': 0，'w': 119，'h': 108}}，{'文件名':'按钮'，'框架': {'x': 120， 'y': 6, 'w': 39, 'h': 24 } } ] } ]}

3.3 初步操作

我们重构了App.vue，创建了游戏对象game，并指定父容器为#container。创建成功后，父容器中会生成一个canvas元素。游戏的所有内容都将通过这个画布来呈现和交互。

通过npm run dev 再次运行项目。我们切换浏览器显示区域：移动设备显示。这时，你就可以看到画布了，它的宽度和高度应该正好是全屏的。

3.4 场景设计

您可以看到画布现在仍然是全黑的。这是因为创建游戏对象时还没有连接场景。在Phaser中，一个游戏可以包含多个场景，每个场景中都实现特定的游戏图像和交互。

接下来我们设计3个场景：

预加载场景：加载整个游戏资源，创建动画，并显示等待开始画面。

主场景：游戏的主画面和交互。

结束场景：显示游戏结束画面。

我们在项目中添加了3个自定义场景类：

自定义场景类继承了Scene类，包含以下基本结构：

import { Scene } from 'phaser';export class Preloader extends Scene { constructor() { //场景名称，后面场景切换时会用到这个名称super('Preloader'); } //加载游戏资源preload() {} //在preload 中的所有资源加载完毕后执行create() {} //每帧回调update() {}}

根据上述基本结构，分别实现了三个场景类，并导入到游戏对象的创建中：

预加载场景

准备工作完成后，我们开始实际开发第一个游戏场景：预加载场景，对应Preloader.ts文件。

4.1 加载游戏资源

在preload方法中加载整个游戏所需的资源。

从'phaser'导入{场景};从'./assets/images/background.jpg'导入backgroundImg;从'./assets/images/enemy.png'导入敌人Img;从'./assets/导入playerImg images/player.png';从'./assets/images/bullet.png'导入bulletImg;从'./assets/images/boom.png'导入boomImg;从'./assets/audio/导入bgmAudio bgm.mp3';从'./assets/audio/boom.mp3'导入boomAudio;从'./assets/audio/bullet.mp3'导入bulletAudio;导出类预加载器扩展场景{constructor() { super('预加载器'); } preload() { //加载图像this.load.image('background', backgroundImg); this.load.image('敌人',敌人Img); this.load.image('玩家',playerImg); this.load.image('子弹',bulletImg); this.load.spritesheet（'boom'，boomImg，{frameWidth: 64，frameHeight: 48，}）； //加载音频this.load.audio('bgm' , bgmAudio); this.load.audio（'boom'，boomAudio）； this.load.audio（'子弹'，bulletAudio）; } 创造（） {}}

4.2 添加元素

接下来，我们在create()方法中添加背景、背景音乐、标题、开始按钮、后续动画，并为开始按钮绑定一个点击事件。

const { 宽度，高度}=this.cameras.main; //背景this.add.tileSprite(0, 0, width, height, 'background').setOrigin(0, 0); //背景音乐this.sound. play('bgm');//标题this.add .text(width/2, height/4, '飞机大战', { fontFamily: 'Arial', fontSize: 60, color: '#e3f2ed', stroke: '#203c5b', StrokeThickness: 6, }) .setOrigin(0.5);//让button=this.add .image(width/2, (height/4) * 3, 'sprites', 'button') .setScale(3, 2 ) . setInteractive() .on('pointerdown', ()={ //点击事件：关闭当前场景，打开主场景this.scene.start('Main'); });//按钮复制this.add. text(button.x, button.y, '开始游戏', { fontFamily: 'Arial', fontSize: 20, color: '#e3f2ed', }) .setOrigin(0.5);//创建动画，命名为boom，使用稍后.anims.create({ key: 'boom',frames: this.anims.generateFrameNumbers('boom', { start: 0, end: 18 }), Repeat: 0,});

运行效果如下：

有一个细节可以关注一下，就是这个背景是如何覆盖整个屏幕的？

上面的代码使用this.add.tileSprite() 创建一个图块精灵。素材中的背景图像像瓷砖一样一张一张地覆盖在屏幕上。因此，要求素材中的背景图像从头到尾无缝连接。图片，以便它们可以无限平铺。主场景中的背景动作也是以此为基础的。

主场景

5.1 梳理场景元素

单击预加载场景中的“开始游戏”按钮，您将看到屏幕再次变黑。此时，预载场景关闭，游戏打开主场景。

主场景中，总共涉及到场景元素：背景、玩家、子弹、敌人、爆炸。我们可以尝试先将它们全部渲染出来，然后添加一些简单的动作，比如移动背景、添加子弹和敌人的垂直速度、播放爆炸动画等。

从'phaser' 导入{ Scene, GameObjects, type Types }; //场景元素let background: GameObjects.TileSprite;让敌人： Types.Physics.Arcade.SpriteWithDynamicBody;让玩家： Types.Physics.Arcade.SpriteWithDynamicBody;让子弹： Types.Physics。 Arcade.SpriteWithDynamicBody;letoom: GameObjects.Sprite;export class Main extends Scene { 构造函数() { super('Main'); } } create() { const { 宽度，高度}=this.cameras.main; //背景background=this.add.tileSprite(0, 0, width, height, 'background').setOrigin(0, 0); //玩家this.physical.add.sprite(100, 600, 'player').setScale(0.5) ; //子弹this.physicals.add.sprite(100, 500, 'bullet').setScale(0.25).setVelocityY(-100); //敌人this.physicals.add.sprite(100, 100, '敌人').setScale(0.5).setVelocityY(100); //爆炸this.add.sprite(200, 100, 'boom').play('boom'); } update() { //设置背景图块连续Move background.tilePositionY -=1; }}

效果如下：

看起来原型已经有了，但是这里代码设计还需要优化。我们不希望场景中的所有元素创建和交互都合并到Main.ts 文件中，这会显得有点臃肿且难以维护。

然后我们设计了：玩家类、子弹类、敌人类、炸弹类，这样每个元素都可以独立实现自己的事件和行为，而主场景只负责创建它们并处理它们之间的交互事件。无需关心它们的内部实现。

虽然这个游戏的整体代码不多，但是通过这样的设计思想，可以让我们的代码设计更加合理。未来开发其他更复杂的小游戏时也可以应用该模型。

5.2 玩家等级

回顾上面创建播放器的代码：

this.physical.add.sprite(100, 600, '玩家').setScale(0.5);

原始代码直接创建了一个“物理精灵对象”。我们现在改成创建一个新的Player类，它继承Physics.Arcade.Sprite，然后在主场景中也通过new Player()生成一个“物理Sprite对象”。相当于Player类扩展了原有的Physics.Arcade.Sprite并添加了一些自身的事件处理和行为封装。后续的子弹类型、敌人类型等也是如此。

Player类主要扩展‘长按移动事件’，具体实现如下：

从'phaser'导入{物理，场景};导出类Player扩展Physics.Arcade.Sprite { isDown: boolean=false;下X:号；下Y:号； constructor(scene: Scene) { //创建对象let { width, height }=scene .cameras.main; super(场景，宽度/2，高度- 80，'玩家');场景.add.existing(this);场景.physical.add.existing(this); //设置属性this.setInteractive( ); this.setScale(0.5); this.setCollideWorldBounds(true); //注册事件this.addEvent(); } addEvent() { //将手指按在飞机上this.on('pointerdown', ()={ this.isDown=true; //记录按下时的飞机坐标this.downX=this.x; this.downY=这个.y; }); //手指抬起this.scene.input.on('pointerup ', ()={ this.isDown=false; }); //手指移动this.scene.input.on('pointermove', (pointer)={ if (this.isDown) { this.x=this.downX + point.x - pointer.downX; this.y=this. downY + 指针.y - 指针.downY; } }); }}

5.3 项目符号

Bullet类主要扩展了‘射击子弹’和‘子弹出界事件’，具体实现如下：

import {Physics, Scene } from 'phaser';export class Bullet extendsPhysics.Arcade.Sprite { constructor(scene: Scene, x: number, y: number,texture: string) { //创建对象super(scene, x, y,texture) ;场景.add.existing(this);场景.physical.add.existing(this); //设置属性this.setScale(0.25); } //发射子弹fire(x: number, y: number) { this.enableBody( true, x, y, true, true); this.setVelocityY(-300); this.scene.sound.play('子弹'); } //每帧更新回调preUpdate(time: number, delta: number) { super .preUpdate(time, delta); //子弹出界事件（子弹到达顶部并冲出屏幕） if (this.y=-14) { this.disableBody(true, true); } }}

5.4 敌人类型

Enemy类主要扩展‘敌人生成’和‘敌人出界事件’。具体实现如下：

import {Physics, Math, Scene } from 'phaser';export class Enemy extendsPhysics.Arcade.Sprite { constructor(scene: Scene, x: number, y: number,texture: string) { //创建对象super(scene, x, y,质地）;场景.add.existing(this);场景.physical.add.existing(this); //设置属性this.setScale(0.5); } //生成敌方部队Born() { let x=Math.Between (30, 345);