任务四十九：王牌特工 准备工作（四）

任务四十九：王牌特工 准备工作（四）

面向人群：

有不错的JavaScript基础

难度：

难

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

• 熟悉 HTML5 技术在游戏开发领域的应用
• 学习游戏核心玩法的设计，并在此基础上合理地管理和添加功能
• 掌握游戏 AI 设计的一些方法
• 实践 HTML5 重力感应技术
• 为第四阶段的游戏任务做准备

任务描述

• 基于任务48，增加更多的要素使游戏更炫更好玩！
• 如下图，守卫 AI：每个守卫都有自己的一条固定巡逻路线；守卫的视觉范围改为扇形，投射在该守卫的前方，视觉范围对玩家可见
• 
• 特工一旦落入守卫的视觉范围，该守卫会暂停行走而进行射击，视觉扇形也会跟随特工而转动，直到特工脱离，则守卫继续巡逻
• 利用精灵图（sprite）为特工和守卫设置帧动画（行走、射击、被击中等动作）
• 道具元素「炸弹」：特工在地图上可以得到炸弹，玩家通过摇晃手机设备（重力感应），可以消灭当前屏幕内的所有敌人
• 更多的敌人类型：比如，没有子弹但会追击特工的近战敌人
• 加入符合游戏风格的背景乐和声音效果
• 有余力的同学，可以为游戏扩展更多的元素

任务注意事项

• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 可选择用 Canvas（推荐）或 DOM 或两者结合的方式实现
• 可以使用 HTML5 游戏引擎
• 能够适应不同分辨率的手机
• 保证游戏关卡是可通的
• 保证游戏在移动端的流畅性
• 可以合理使用第三方框架、类库

任务协作建议

• 团队内进行头脑风暴，共同讨论和设计游戏新要素
• 如果是各自工作，可以按以下方式：
  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交
• 如果是分工工作（推荐），可以按以下模块切分
  • 守卫 AI
  • 帧动画
  • 重力感应
  • 音效

在线学习参考资料

• MDN Canvas
• HTML5 游戏引擎列表
• MDN 检测设备方向
• Sprite Animation
• 游戏精灵图资源