这门课由 Frank Dvorak 主讲，用原生 JavaScript 搭配 HTML5 Canvas 从零做一个完整的像素风射击游戏，全程不依赖任何游戏引擎或第三方库，所有底层机制都是手写的。课程共 140 讲、实测总时长约 11 小时 22 分，结构是边写边讲的项目式教学：先搭核心架构、游戏主循环与渲染系统，再做响应式画布与调试网格；接着实现玩家实体、输入系统与向量运算的移动逻辑；随后依次做 UI 与面板管理、游戏状态与暂停、加载界面、音频系统；进入中段后重点讲数据驱动架构、状态管理、对象池与池化实体，以及敌人的生成、行为工厂与多样化的敌人类型；再往下是自定义事件系统、碰撞与伤害管线、血量与无敌帧、任务完成与击退系统、粒子系统与多种粒子行为；最后做相机系统、相机震动、视野内外生成与深度排序、实体继承重构，并完成发布。适合想搞懂游戏引擎底层原理、或想把 JavaScript 能力从网页扩展到游戏的前端开发者，零基础也能跟着做下来。课程资源包含 34 个阶段性的 JS Game Starter Kit 工程包，可在课程素材区获取。
你能学到什么
【你将学到的内容】
• 用原生 JavaScript + Canvas 从零搭建一个可玩的像素射击游戏，不依赖任何游戏引擎
• 搭建清晰的核心架构：游戏主循环、渲染系统、实体系统与状态管理各司其职
• 手写响应式画布与设备像素比适配，让像素画面在高分屏上依然锐利
• 用数据驱动的方式定义敌人、粒子、UI 与音效，改一个 JSON 就能扩内容
• 实现对象池与池化实体，避免高频创建销毁带来的性能抖动
• 从零写一套自定义事件系统，让碰撞、血量、UI 之间彻底解耦
• 粒子系统设计与内爆、摆动、贴地等多种粒子行为，做出有打击感的特效
• 用 Canvas 逐帧绘制精灵序列帧，配合动画控制器实现角色动画
• 相机跟随、相机震动、世界边界与视野内外敌人生成的完整相机系统
• 敌人 AI：漂浮、冲刺、潜地、爬行等多种行为，以及击退、无敌帧、受击反馈
【核心能力沉淀】
• 具备不依赖引擎、纯手写 2D 游戏架构的能力
• 掌握游戏主循环、渲染分层与实体系统这类通用引擎设计思路
• 能把玩法逻辑抽象成数据驱动配置，显著降低后续扩内容的成本
• 建立对象池、事件系统、状态机等可复用的工程习惯
• 完成并发布一款属于自己的完整像素射击游戏
课程章节
A 1 – 像素游戏开发全流程（140 讲）
001 课程介绍
002 项目搭建
003 源码检查点 1
004 核心架构
005 响应式画布
006 游戏主循环
007 源码检查点 2
008 渲染系统
009 调试网格
010 源码检查点 3
011 玩家实体
012 源码检查点 4
013 输入系统
014 移动与向量运算
015 稳定运动系统
016 源码检查点 5
017 玩家定位
018 图片管理系统
019 源码检查点 6
020 主菜单
021 界面与面板管理
022 游戏状态与暂停
023 源码检查点 7
024 暂停菜单
025 游戏重置
026 源码检查点 8
027 加载界面
028 源码检查点 9
029 音频与加载系统
030 音效
031 源码检查点 10
032 关注点分离
033 界面管理器
034 游戏计时器
035 源码检查点 11
036 代码整理
037 数据驱动架构
038 状态管理
039 源码检查点 12
040 数据驱动敌人
041 敌人移动
042 对象池
043 对象池管理器
044 可池化实体
045 对象池生成
046 源码检查点 13
047 数据驱动敌人行为
048 敌人行为工厂
049 新的敌人行为
050 多种敌人类型
051 源码检查点 14
052 敌人生成器
053 边缘生成
054 生成器游戏循环
055 朝向移动方向
056 源码检查点 15
057 事件系统
058 自定义事件系统
059 界面事件
060 事件监听
061 源码检查点 16
062 游戏 HUD 与血条
063 数据驱动游戏音频
064 数据驱动图片
065 源码检查点 17
066 碰撞系统
067 玩家生命与伤害
068 碰撞管理器与事件
069 事件驱动血条
070 源码检查点 18
071 无敌帧
072 游戏结束系统
073 伤害流程
074 源码检查点 19
075 界面按钮重构
076 任务完成系统
077 源码检查点 20
078 敌人无敌帧
079 源码检查点 21
080 击退系统
081 应用击退
082 源码检查点 22
083 数据驱动敌人音效
084 源码检查点 23
085 调试模式
086 源码检查点 24
087 粒子系统设计
088 粒子行为
089 游戏中的粒子特效
090 粒子渲染
091 视觉效果
092 事件专属特效
093 源码检查点 25
094 内爆粒子行为
095 数据驱动粒子
096 源码检查点 26
097 漂浮敌人 AI 改进
098 动画数据
099 玩家角色精灵图生成器
100 动画控制器
101 角色动画
102 动画精灵渲染
103 动画系统清理
104 源码检查点 27
105 任务简报击杀计数
106 数据驱动粒子形状
107 玩法修复
108 渲染与动画修复
109 输入与计时修复
110 音频与界面改进
111 粒子图层
112 数据驱动界面
113 源码检查点 28
114 发布你的游戏
115 相机基础
116 相机跟随与平滑
117 相机视野与世界边界
118 基于相机的敌人回收
119 基于相机的敌人生成
120 源码检查点 29
121 相机震动
122 数据驱动碰撞位置
123 实体地面位置与深度排序
124 调试实体位置
125 数据驱动实体阴影
126 源码检查点 30
127 实体继承
128 玩家与敌人继承
129 内部方法规范
130 源码检查点 31
131 摆动粒子
132 数据驱动粒子变化
133 源码检查点 32
134 视野内敌人生成
135 贴地粒子
136 源码检查点 33
137 创建新敌人类型
138 更多敌人变体
139 已发布游戏整理
140 源码检查点 34
课程信息
讲师：Frank Dvorak
技术栈：原生 JavaScript / HTML5 Canvas / 对象池 / 事件系统 / 数据驱动架构
总时长：11小时22分（140 讲）
课程代码：YX_JS_386
B站试看：免费稿 完整版国语：充电专属 完整版原声：充电专属
原课程页面：Udemy
暂无评论内容