# 王牌特工
# 王牌特工（一）
# 课程目标
熟悉 HTML5 技术在游戏开发领域的应用 学习游戏核心玩法的设计，并在此基础上合理地管理和添加功能 熟练使用 JavaScript 解决一般性的算法问题
# 阅读
- MDN Canvas (opens new window)
- How to Make a Simple HTML5 Canvas Game 英文 (opens new window) 中文 (opens new window)
- 移动端屏幕适配方案 (opens new window)
- 寻路算法可视化实现 (opens new window)
# 编码
开发一款适用于移动端的 HTML5 游戏，如下图
- 创建一个矩形活动区域
- 在区域上方设置起点，放置特工（主角）；在区域下方设置终点，放置机密文件（目标）
- 区域内有随机生成的墙：墙是不可进入或穿过的
- 通过点击屏幕内可活动区域，可以使特工移动到指定位置，寻路算法可自行选择并实现
- 特工抵达终点获得文件，生成下一个关卡
注意事项
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 可选择用 Canvas（推荐）或 DOM 或两者结合的方式实现
- 能够适应不同分辨率的手机
- 保证游戏关卡是可通的
- 图例样式仅供参考，可自行设计
- 可以合理使用第三方框架、类库
# 王牌特工（二）
# 课程目标
- 熟悉 HTML5 技术在游戏开发领域的应用
- 学习游戏核心玩法的设计，并在此基础上合理地管理和添加功能
- 熟练使用 JavaScript 解决一般性的算法问题
- 掌握游戏性能优化的一些方法
# 阅读
- MDN Canvas (opens new window)
- HTML5 游戏引擎列表 (opens new window)
- JavaScript Object Pool (opens new window)
- Galaxian Style HTML5 Game (该教程包含碰撞检测、回收机制等相关技术) (opens new window)
# 编码
基于上一任务。
- 在活动区域内设置若干守卫（敌人）：每个守卫都有一个以自己为圆心的圆形视觉范围，该视觉范围不可穿过墙壁
- 如下图，若特工落入某个守卫的视觉范围内，该守卫会向特工方向连续发射子弹，发射之间有较短的时间间隔
- 特工被守卫子弹击中，关卡以失败而结束
- 特工脱离某个守卫的视觉范围，该守卫会停止射击
注意事项
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 可选择用 Canvas（推荐）或 DOM 或两者结合的方式实现
- 可以使用 HTML5 游戏引擎
- 能够适应不同分辨率的手机
- 保证游戏关卡是可通的
- 保证游戏在移动端的流畅性
- 为增强游戏可玩性，守卫的视觉范围可对玩家不可见
- 可以合理使用第三方框架、类库
# 王牌特工（三）
# 课程目标
- 熟悉 HTML5 技术在游戏开发领域的应用
- 学习游戏核心玩法的设计，并在此基础上合理地管理和添加功能
- 熟练使用 JavaScript 解决一般性的算法问题
- 掌握游戏性能优化的一些方法
# 阅读
- MDN Canvas (opens new window)
- HTML5 游戏引擎列表 (opens new window)
- JavaScript Object Pool (opens new window)
- Galaxian Style HTML5 Game (该教程包含碰撞检测、回收机制等相关技术) (opens new window)
# 编码
基于上一任务。
- 如上图，将游戏扩展为「无尽模式」，拥有没有尽头的地图
- 该模式去除终点概念，游戏将不以取得文件为胜利条件
- 特工可以持续向屏幕下方探索，屏幕下方提前生成新的地图片段，屏幕上方销毁已经过的地图片段 游戏镜头将跟随特工而向下移动，而特工无法再回到镜头上方以外的区域
- 游戏有计分机制，特工向下距离越大，分数越高，以不断刷新最高分为游戏目的
- 完整的游戏状态跳转逻辑：开始界面、暂停菜单（可选）、结束菜单
# 王牌特工（四）
# 课程目标
- 熟悉 HTML5 技术在游戏开发领域的应用
- 学习游戏核心玩法的设计，并在此基础上合理地管理和添加功能
- 掌握游戏 AI 设计的一些方法
- 实践 HTML5 重力感应技术
# 阅读
- MDN Canvas (opens new window)
- HTML5 游戏引擎列表 (opens new window)
- MDN 检测设备方向 (opens new window)
- Sprite Animation (opens new window)
- 游戏精灵图资源 (opens new window)
# 编码
基于上一任务，增加更多的要素使游戏更炫更好玩！
- 如下图，守卫 AI：每个守卫都有自己的一条固定巡逻路线；守卫的视觉范围改为扇形，投射在该守卫的前方，视觉范围对玩家可见
- 特工一旦落入守卫的视觉范围，该守卫会暂停行走而进行射击，视觉扇形也会跟随特工而转动，直到特工脱离，则守卫继续巡逻
- 利用精灵图（sprite）为特工和守卫设置帧动画（行走、射击、被击中等动作）
- 道具元素「炸弹」：特工在地图上可以得到炸弹，玩家通过摇晃手机设备（重力感应），可以消灭当前屏幕内的所有敌人
- 更多的敌人类型：比如，没有子弹但会追击特工的近战敌人
- 加入符合游戏风格的背景乐和声音效果
- 有余力的同学，可以为游戏扩展更多的元素
# 王牌特工（五）
# 阅读
- 房间和迷宫：一个地牢生成算法 中文 (opens new window) 英文 (opens new window)
- Dungeon-Building Algorithm 中文 (opens new window) 英文 (opens new window)
- 游戏项目：Random Dungeon Generation (opens new window)
- 游戏项目：Tiny Stealth (opens new window)
# 编码
基于上一任务，让你的特工潜入一个庞大的地下迷宫执行任务!（Roguelike Game）
首先，我们需要建造一个迷宫：
- 迷宫由许许多多的房间构成
- 房间被走廊连接起来：迷宫中的任意一点，都有一条道路通往另外一点 「不完美」迷宫：两点之间可能会有多条通路（可选）
- 迷宫生成效果可参考以下图例：
然后，将之前任务的核心玩法融入到这个迷宫内：
- 特工在迷宫中寻找过关目标，抵达后通往下一个迷宫
- 特工与守卫可以互相击杀：开发时可自行选择守卫 AI 方式，基于任务 47 或任务 49 皆可
- 房间内有随机生成的墙，但不会把通往其它房间的走廊堵死
- 游戏摄像机跟随特工移动，屏幕可见范围是迷宫的一个局部
- 界面上设置小地图，方便玩家了解特工当前所处位置及附近守卫动向（可选）
- 战争迷雾效果（Fog of War）：未探索区域不可见、特工可视范围以外的区域不可见、未打开门的房间不可见（可选）
最后，发挥想象，为游戏扩展更多有趣的元素！
- 以下为类似玩法的游戏截图，供参考：
注意事项
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 在 PC 端和移动端上良好的适应性和流畅度
- 保证游戏关卡可通
- 较高的迷宫生成效率
- 可以合理使用第三方框架、类库