王牌特工（一）

 课程目标

熟悉 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 端和移动端上良好的适应性和流畅度
• 保证游戏关卡可通
• 较高的迷宫生成效率
• 可以合理使用第三方框架、类库

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

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