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 。参考资料：
- HTML5 游戏开发实战分享(opens new window)
- DOM + CSS3 实现小游戏 SwingCopters(opens new window)
两者结合：用 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电子书、教程、项目接单、源码等等

0 条评论