WEB前端教程：接元宝
实现元宝的随机掉落，包括起始水平位置的随机、时间点的随机。
实现一个移动端游戏，玩家通过触屏控制角色水平方向移动，接住从屏幕上方落下的元宝。记录玩家规定时间内接住的元宝个数作为一局的分数。
任务步骤
1. 技术选型
根据待开发游戏的类型和功能，从以下技术方案中挑选一种：
- Canvas (推荐)
- 不使用游戏引擎。参考资料：
- Canvas API(opens new window)
- How to Make a Simple HTML5 Canvas Game 英文 (opens new window)中文(opens new window)
- 使用游戏引擎。推荐 Phaser (opens new window)或 CreateJS (opens new window)。HTML5 各游戏引擎的特性比较及开发者评价，可参考这里 (opens new window)以供选择。参考资料：
- How to make a Flappy Bird in HTML5 英文 (opens new window)中文(opens new window)
- Create an HTML 5 Game with Create.js: Flappy Bird Clone 英文(opens new window)
- Phaser 速查表(opens new window)
- 不使用游戏引擎。参考资料：
- DOM + CSS 。参考资料：
- 两者结合：用 Canvas 绘制主体元素和动画，用 DOM 制作 UI
2. 一个适配移动端的游戏场景
选择一种在移动端上的屏幕适配方案：
- 方案一：固定宽高比，方便布置元素。
- 方案二：延伸至适应屏幕，原生既视感。
3. 一个可操控的角色
创建一个角色，实现一种操控方式：
- 方案一：触击屏幕的任意位置，角色向该位置的对应水平点移动。
- 方案二：触摸屏幕左半边，角色向左移动；触摸屏幕右半边，角色向右移动。
- 方案三：触摸角色，拖拽移动。
或者其它合理的触屏操控方案。
4. 元宝
- 实现元宝的随机掉落，包括起始水平位置的随机、时间点的随机。
- 元宝回收机制：
- 即时创建，即时销毁。
- 对于频繁创建和销毁的对象，也可利用对象池 (opens new window)进行内存优化，算法具体实现可参考 JavaScript Object Pool(opens new window)
5. 碰撞检测 选择一个高效合理的检测方法，判定角色是否接住元宝（自行实现算法或利用已有库皆可）。 经过任务步骤 4 和 5 后，若游戏在移动端上的帧率 (opens new window)不在 50~60 fps 之间，建议进行优化使游戏运行流畅。
6. 游戏界面元素 游戏的核心玩法实现以后，陆续将界面元素及相应逻辑补充完整：
- 开始按钮：触发首局游戏的开始；
- 记分板：实时记录玩家一局的分数；
- 倒计时器：限定一局的可玩时间，实时刷新；
- 结束菜单：以浮层形式展现，拥有该局分数、最高分、重新开始等元素。
7. 扩展
想一想，怎样扩展可以使游戏更有趣呢？ 比如：
- 掉炸弹：被砸中减分、减命或直接结束游戏；
- 增加无尽模式：不限定时间，直至被炸弹砸中或者命消耗完；
- 其它掉落物：或给予不同的分数，或改变角色的状态；
- 角色不同状态下的贴图变化，比如接到元宝、被炸弹砸中；
- 音效 / 音乐；
- 元宝掉落初始方向不规则，甚至引入物理引擎；
- 换个主题？接果子、接盘子、接妹子……任你想！
- ……
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-11-03 14:31
- 阅读 ( 1226 )
- 分类：WEB前端开发
