[源码教程]H5版飞机大战

内容转载自微信公众号：【搜狐技术产品】

原文链接：https://mp.weixin.qq.com/s/zdvS0cQ28KJf8lT_ywZXCw

原文内容截取

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

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

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

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

直接奉上

演示效果：https://yuhuo.online/plane-war/

代码下载：