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

搜狐技术产品小编2023

于 2024-05-22 07:30:44 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/SOHU_TECH/article/details/139133238

本文字数：7539字

预计阅读时间：30分钟

前言

说起小游戏，最经典的莫过于飞机大战了，相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧！我们将从零开始，看看怎样一步步实现一个H5版的飞机大战！

首先我们定好目标，要做一个怎样的飞机大战，以及去哪整游戏素材？

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

运行小程序之后可以看到下面的效果：

从运行效果上看，这个飞机大战已经比较完整，包含了以下内容：

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

2.玩家控制飞机移动；

3.飞机持续发射子弹，播放发射音效；

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

5.子弹碰撞敌军时，播放爆炸动画和爆炸音效，同时子弹和敌军都销毁，并增加1个得分；

6.飞机碰撞敌军时，游戏结束，弹出结束面板。

接下来我们以这个效果为参考，并拷贝这个项目中的图片和音效素材，从头做一个H5版飞机大战吧！

选择游戏框架

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

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

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

1.先定义好碰撞检测的方法isCollideWith()，通过两个物体的坐标和宽高进行碰撞检测计算：

isCollideWith(sp) {
    let spX = sp.x + sp.width / 2;
    let spY = sp.y + sp.height / 2;

    if (!this.visible || !sp.visible) return false;

    return !!(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 = enemys.length; i < il; i++) {
            if (enemys[i].isCollideWith(bullet)) {
                // Do Something
            }
        }
    });
}

3.而通过游戏框架，可能只需要一行代码。我们以Phaser为例：

this.physics.add.overlap(bullets, enemys, () => { 
 // Do Something
}, null, this);

上面代码的含义是：bullets（子弹组）和enemys（敌军组）发生overlap（重叠）则触发回调。

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

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

引用Phaser官网上的介绍：

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

同时Phaser在社区也非常受欢迎，Github上收获35.5k的Star，Npm上最近一周下载量19k。

因此我们采用Phaser作为游戏框架。接下来，开始正式我们的飞机大战之旅啦！

准备工作

3.1 创建项目

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

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

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

npm create vue

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

cd plane-war
npm install
npm run dev

接下来再安装phaser。

npm install phaser

3.2 整理素材

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

plane-war
├── src
│   ├── assets
│   │   ├── audio
│   │   │   ├── bgm.mp3
│   │   │   ├── boom.mp3
│   │   │   └── bullet.mp3
│   │   ├── images
│   │   │   ├── background.jpg
│   │   │   ├── boom.png
│   │   │   ├── bullet.png
│   │   │   ├── enemy.png
│   │   │   ├── player.png
│   │   │   └── sprites.png
│   │   └── json
│   │       └── sprites.json
│   ├── App.vue
│   └── main.ts

素材处理1：

原本游戏素材中，爆炸动画是由19张独立图片组成，在Phaser中需要合成一张雪碧图，可以通过雪碧图合成工具合成，命名为boom.png，效果如下：