60行代码，制作H5版飞机大战游戏_股市动态

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

创始人

2025-05-28 15:54:47

0次

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

点击这里可以试玩欧

制作使用了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) { //小于一定距离，则判定为碰上了}

完整的源码

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【收盘】A股窄幅震荡，三大股指小幅低收：大消费走强，两市成交10099亿元连跌一周后a股三大股指全线飘红收盘股票低位反弹

下一篇：ubuntu18下如何配置opencv环境

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

制作了如下功能

代码说明

完整的源码

相关内容

热门资讯