60行代码，制作H5版飞机大战游戏

用最基础的代码逻辑，实现了飞机大战的核心玩法

点击这里可以试玩欧

制作使用了PIXI框架，对于制作H5应用的运行效率优化的还算不错。

感兴趣可以一起研究

制作了如下功能

1、制作了游戏的场景元素及动画效果

2、飞机的控制

3、发射子弹击落敌机，得分功能

4、Game Over后，重新游戏

功能涵盖了基本H5游戏的制作套路。

可通过“复制”“粘贴”大法，进行功能的丰富

源码可以在线调试，也手机直接浏览

源码地址：​​​​​​​​​​​​​​http://pro.youyu001.com

代码说明

以下内容可以作为H5游戏开发的帮助手册使用

1）创建应用

var app = new PIXI.Application(512,768);
document.body.appendChild(app.view);

2）添加图片，设置图片位置与定位点

var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
app.stage.addChild(plane); //将图片放置到舞台
plane.anchor.x = 0.5; //设置图片锚点为图片中心
plane.anchor.y = 0.5;
plane.x = 200; //设置图片的位置
plane.y = 600;

3）添加文本显示

var scoreTxt = new PIXI.Text("score 0");
app.stage.addChild(scoreTxt); //将文本添加到舞台

4）添加控制功能，获取鼠标位置

bg.interactive = true;//背景图片允许接受控制信息
bg.on("pointermove", movePlane); //滑动控制
function movePlane(event) {
    var pos = event.data.getLocalPosition(app.stage); //获取鼠标当前位置
    plane.x = pos.x;
    plane.y = pos.y;
}

5）制作动画

app.ticker.add(animate); //指定帧频函数
function animate() {
    //背景图片移动
    bg.y += 2;
    if(bg.y >= 0) {
        bg.y = -768;
    }
}

6）游戏的碰撞逻辑

//根据两张图片的位置，计算距离
var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);
if(pos < 40 * 40) { //小于一定距离，则判定为碰上了


}

 完整的源码