WEB前端教程：打飞机 - 好学星城学习论坛

page contents

WEB前端教程：打飞机

实现一个移动端游戏，玩家通过手机左右倾斜来控制飞机的水平移动，射击不断出现的敌机，并躲避敌机的冲击。

实现一个移动端游戏，玩家通过手机左右倾斜来控制飞机的水平移动，射击不断出现的敌机，并躲避敌机的冲击。

任务步骤

1. 技术选型

参见：技术选型说明

2. 游戏状态设计本游戏包含四个基本状态：

欢迎状态：包含欢迎信息、开始游戏按钮、选项设置等
关卡状态：包含游戏的主体元素与核心玩法
暂停状态：通过关卡状态的暂停按钮触发，包含回到游戏按钮、重新开始按钮
结束状态：游戏关卡结束时触发，包含该局分数、最高记录、重新开始等元素

3. 背景

利用「首尾相接」技巧，让一定高度的背景图片做反向循环滚动，造成主角向前行驶的视觉差
可以在背景的基础上添加更多的图片层，以不同的速度滚动，形成远近层次的效果

4. 主角本游戏主角即为我方飞机，它在飞行时会以帧动画的形式显示，例如下图的两帧构成飞机喷气的效果：

可以增加更多帧使动画更加细腻流畅。

5. 子弹

初始位置：以所属飞机位置为基准
飞行效果：一旦发射，垂直方向移动，水平方向不变
回收机制：对于频繁创建和销毁的对象，可利用对象池进行内存优化

6. 操控

通过手机左右倾斜控制主角水平移动：

利用 HTML5 提供的重力感应特性实现
可以考虑倾斜速率对主角移动速度的影响
尽量适配移动端多设备多浏览器
开发时可以使用 Chrome 的传感器模拟功能进行调试

参考资料：

7. 敌机

至少有两种类型的敌机，各类型之间在贴图、生命值、移动速度、出现频率、击落奖励等方面有所不同
随机初始位置和出现时间
数量随分数增加而增加，或设置阶段性阈值
选用合理的回收机制

8. 碰撞检测

检测一：子弹与敌机的碰撞
检测二：敌机与主角的碰撞
主角、敌机的爆炸效果（帧动画或粒子效果）

9. 暂停与屏蔽暂停按钮触发暂停状态：

屏蔽重力感应，屏蔽关卡状态的可点击元素
暂停主角、敌机、子弹的飞行，暂停背景滚动，暂停帧动画

10. 收尾

关卡状态的其它界面元素，如记分板
其余游戏状态，即欢迎状态和结束状态，以及对应的转场逻辑

11. 扩展想一想，怎样扩展可以使游戏更有趣呢？比如：

天降各种类型的道具，如改变子弹类型的、全屏攻击的、短时间内无敌的，等等；
敌机也会发射子弹（考虑到操控的特殊性，应注意适当调试参数以控制游戏难度）；
BOSS 战，引入人工智能；
子弹非自动发射，而是通过特定的操作；
音效/音乐；
……

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-03 14:34
阅读 ( 754 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1658 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章