《HTML5 2D游戏编程核心技术》——导读

简介: 本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的目录,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。


d52c9f92717afea980af024b7281d55649485448

目  录
第1章 概述
1.1 Snail Bait游戏
1.2 HTML5游戏开发最佳实践
1.2.1 窗口失去焦点时暂停游戏
1.2.2 窗口重获焦点时实现倒计时功能
1.2.3 使用CSS实现UI特效
1.2.4 对游戏运行缓慢的状态做出检测和处理
1.2.5 添加社交功能
1.2.6 将所有游戏图像放在单独的sprite表单中
1.2.7 在服务器中存储高分榜和实时游戏数据
1.3 特别功能
1.4 Snail Bait游戏中的HTML和CSS
1.5 开始Snail Bait游戏编程
1.6 本书中使用的JavaScript
1.7 小结
1.8 练习

第2章 原始素材和开发环境
2.1 使用开发者工具
2.1.1 控制台
2.1.2 Chrome Canary的帧速率计数器
2.1.3 调试
2.1.4 时间线
2.1.5 Profiling
2.2 获取资源
2.2.1 图像
2.2.2 图像处理
2.2.3 音效和音乐
2.2.4 动画
2.3 使用CSS背景
2.4 生成小图标
2.5 缩短编码周期
2.6 小结

2.7 练习
第3章 图形和动画
3.1 使用HTML5 canvas元素绘制图形和图像
3.1.1 绘制背景
3.1.2 绘制跑步小人
3.1.3 绘制平台
3.2 实现平滑的HTML5动画
3.2.1 requestAnimationFrame()方法
3.2.2 requestAnimationFrame()的polyfill实现
3.3 实现游戏主循环
3.4 计算帧速率
3.5 滚动游戏背景

3.5.1 平移坐标系
3.5.2 滚动Snail Bait游戏的背景
3.6 制作基于时间的运动
3.7 反转滚动方向
3.8 绘制动画帧
3.9 使用视差产生视深的假象
3.10 小结
3.11 练习

第4章 游戏的基本架构
4.1 在JavaScript对象中封装游戏函数
4.1.1 SnailBait的构造函数
4.1.2 SnailBait的原型
4.2 理解JavaScript语言中挑剔的this指针
4.3 处理键盘输入
4.4 玩家按p键时暂停或者恢复游戏
4.5 冻结游戏,确保它精确地在暂停的位置恢复
4.6 在窗口失去焦点时暂停游戏
4.7 使用动态的倒计时来恢复一个暂停的游戏
4.7.1 向游戏玩家显示提示板(简短信息)
4.7.2 Snail Bait的倒计时
4.8 小结
4.9 练习
第5章 游戏加载动画
5.1 定义Snail Bait游戏的窗口
5.2 使用CSS过渡让元素淡入、淡出
5.2.1 让元素淡入
5.2.2 让元素淡出
5.2.3 snailbait-toast元素的CSS
5.2.4 显示和隐藏提示板
5.3 让拥有与CSS过渡属性Opacity关联的元素淡入、淡出
5.4 实现加载动画
5.5 显示游戏画面
5.6 小结
5.7 练习
第6章 sprite对象
6.1 sprite对象
6.1.1 sprite对象的属性
6.1.2 sprite对象的构造函数
6.1.3 sprite对象的方法
6.2 将sprite对象整合到游戏主循环中
6.3 实现sprite对象的artist对象
6.3.1 图形artist对象
6.3.2 图像artist对象
6.3.3 sprite图像表单artist对象
6.3.4 定义sprite图像表单单元格
6.4 创建和初始化游戏的sprite对象
6.5 使用元数据定义sprite对象
6.6 滚动sprite对象
6.7 小结
6.8 练习
第7章 sprite对象行为
7.1 行为基础
7.2 跑步小人行为
7.3 跑步小人的跑动行为
7.4 轻量级行为
7.5 游戏独立行为
7.6 组合行为
7.7 小结
7.8 练习
第8章 时间轴,第1部分:有限行为及线性运动
8.1 实现一个初始的跳跃行为算法
8.2 将处理跳跃行为的职责转交给跑步小人
8.3 实现跳跃行为
8.4 使用秒表记录动画时间
8.5 重新定义跳跃行为
8.6 实现线性运动
8.6.1 上升阶段
8.6.2 下降阶段
8.7 暂停行为
8.8 小结
8.9 练习
第9章 时间轴,第2部分:非线性运动
9.1 理解时间及其衍生物
9.2 使用动画计时器和缓变功能实现非线性跳跃
9.3 实现动画计时器
9.4 实现缓变功能
9.5 微调缓变功能
9.6 实现真实的跳动行为
9.7 使行为随机化
9.8 使用动画计时器和缓变功能实现非线性颜色改变
9.9 小结
9.10 练习
第10章 时间轴,第3部分:时间系统
10.1 Snail Bait游戏的时间系统
10.2 创建和启动时间系统
10.3 将时间系统整合进Snail Bait游戏中
10.3.1 使用时间系统驱动游戏动画
10.3.2 实现使用时间系统修改游戏时间流的函数
10.3.3 在计算帧速率时分解时间比率
10.3.4 使用时间系统暂停和恢复游戏
10.4 重新定义秒表和动画计时器的当前时间
10.5 实现时间系统
10.6 小结
10.7 练习
第11章 碰撞检测
11.1 碰撞检测过程
11.2 碰撞检测技术
11.3 Snail Bait游戏中的碰撞检测
11.3.1 sprite对象的碰撞矩形
11.3.2 跑步小人的碰撞行为
11.4 为碰撞检测选择碰撞候选对象
11.5 在跑步小人与其他sprite对象之间检测碰撞
11.6 处理碰撞
11.7 优化碰撞检测
11.7.1 改善包围盒
11.7.2 使用空间分割方法
11.8 监测碰撞检测的运行性能
11.9 编程实现碰撞检测的边界案例
11.10 小结
11.11 练习
第12章 重力
12.1 为跑步小人实现坠落行为
12.2 实现重力
12.2.1 跑步小人的坠落行为
12.2.2 计算初始下降速度
12.2.3 在跑步小人坠落过程中暂停游戏
12.3 最终版的碰撞检测
12.4 小结
12.5 练习
第13章 sprite动画和特殊效果
13.1 实现sprite动画
13.2 创建特效
13.2.1 晃动游戏画面
13.2.2 场景切换
13.3 编排效果
13.3.1 炸死蜜蜂
13.3.2 引爆按钮
13.4 小结
13.5 练习
第14章 声音和音乐
14.1 创建声音和音乐文件
14.2 加载音乐和音效
14.3 设置声音和音乐控件
14.4 播放音乐
14.5 循环播放音乐
14.6 播放音效
14.6.1 创建sprite音频对象
14.6.2 定义音效对象
14.6.3 实现多声道播放音效
14.7 打开和关闭声音播放
14.8 小结
14.9 练习
第15章 移动设备
15.1 在移动设备上运行Snail Bait游戏
15.2 检测移动设备
15.3 缩放游戏以适应移动设备
15.3.1 HTML5 viewport元标签
15.3.2 以编程方式调整游戏画面以适应移动设备屏幕
15.4 修改游戏动画底部的控制说明
15.5 修改欢迎界面
15.5.1 实现欢迎提示
15.5.2 实现移动设备中的控制说明
15.5.3 实现移动设备版开始提示
15.5.4 显示移动设备中的开始提示
15.6 添加触控事件
15.7 在移动设备中处理音频的方法
15.8 在主屏幕上添加启动图标,并以全屏模式运行游戏
15.9 小结
15.10 练习
第16章 粒子系统
16.1 排烟孔粒子系统
16.2 使用排烟孔粒子系统
16.2.1 定义排烟孔粒子系统数据
16.2.2 创建排烟孔粒子系统
16.2.3 将排烟孔粒子系统存入Snail Bait游戏的sprite对象数组中
16.2.4 在每个动画帧中滚动排烟孔粒子系统
16.3 编程实现排烟孔粒子系统
16.3.1 把排烟孔粒子系统伪装成sprite对象
16.3.2 组合火焰粒子
16.3.3 组合烟泡
16.4 暂停排烟孔粒子系统
16.5 小结
16.6 练习
第17章 用户界面
17.1 记录玩家游戏成绩
17.2 增加游戏生命指示器
17.3 显示游戏字幕
17.4 使用Tweet发布玩家游戏得分
17.5 当游戏运行缓慢时通知游戏玩家
17.5.1 监控帧速率
17.5.2 编程实现运行缓慢通知的事件处理句柄
17.6 编程实现通关动画
17.7 小结
17.8 练习
第18章 开发者后门程序
18.1 Snail Bait游戏的开发者后门
18.2 开发者后门的HTML元素及CSS
18.3 显示及隐藏开发者后门
18.4 更新开发者后门的元素
18.5 实现开发者后门的复选框
18.5.1 显示及隐藏碰撞矩形
18.5.2 启用或禁用运行缓慢通知
18.5.3 显示或隐藏排烟孔粒子系统
18.5.4 更新开发者后门的复选框
18.6 实现开发者后门的滑动条
18.6.1 为开发者后门的滑动条定义HTML元素及CSS
18.6.2 在Snail Bait游戏的Java-Script代码中访问滑动条的读数
18.6.3 创建并初始化开发者后门的滑动条
18.6.4 将运行缓慢的滑动条关联到游戏中
18.6.5 将时间速率滑动条关联到游戏中
18.6.6 将游戏关联到时间速率滑动条上
18.6.7 在显示开发者后门之前更新滑动条
18.7 实现开发者后门刻度尺
18.7.1 创建并访问刻度尺的canvas元素
18.7.2 淡入淡出刻度尺
18.7.3 绘制刻度尺
18.7.4 更新刻度尺
18.7.5 拖动游戏画面
18.8 小结
18.9 练习
第19章 服务器端开发:内部指标、高分记录及部署
19.1 Node.js及socket.io简介
19.2 在Snail Bait游戏中引入socket.io
19.3 创建一个简单的服务器
19.4 在服务器端创建套接字
19.5 启动服务器
19.6 在客户端创建一个套接字并连接到服务器
19.7 记录游戏内部指标
19.8 管理高分记录
19.8.1 实现高分记录的用户界面
19.8.2 检索服务器中的高分记录
19.8.3 在客户端显示高分记录
19.8.4 监视姓名输入
19.8.5 验证并将高分记录存储到服务器
19.8.6 重新显示高分记录
19.8.7 开始新游戏
19.9 部署Snail Bait游戏
19.10 将文件上传到服务器
19.11 小结
19.12 练习
第20章 后记:Bodega Revenge游戏
20.1 设计用户界面
20.2 创建sprite表单
20.3 实例化游戏
20.4 实现sprite对象
20.4.1 炮塔
20.4.2 炮弹
20.4.3 小鸟
20.5 实现sprite对象的行为
20.5.1 炮塔的行为
20.5.2 炮弹的行为
20.5.3 小鸟的行为
20.6 绘制剩余炮弹指示器
20.7 为移动设备实现触摸控制
20.8 小结
20.9 练习

相关文章
|
10月前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
移动开发 监控 前端开发
【phaser】快速实现HTML5 2d小游戏
使用 js 的 游戏框架 phaser 实现 html 小游戏
322 0
【phaser】快速实现HTML5 2d小游戏
|
JSON 移动开发 前端开发
基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成就感还是爆棚的,哈哈!只要你会想,能做,就能根据这个编辑器延展成 big thing! 本例地址:http://www.
1284 0
|
移动开发 前端开发 HTML5
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中非常重要的三个事件处理的部分:属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。
1225 0
|
移动开发 HTML5
基于HTML5的WebGL实现的2D3D迷宫小游戏
为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用“第一人称”来操作前进后退上下左右,并且实现了碰撞检测。 先来看下实现的效果: http://hightopo.
1255 0
|
移动开发 Java HTML5
《HTML5游戏编程核心技术与实战》——导读
对游戏的热爱使我萌发了写书的念头。漫画和电子游戏是童年最美好的回忆,任天堂的红白机陪伴着我度过了童年最快乐的时光,20世纪80年代,大街小巷的街机室成了孩子们快乐的天堂。随着时光流逝,许多经典的游戏画面已成为过去,但对游戏的热情依然不减,希望能借此书得以慰藉逝去的青春。青春不在,游戏热血永存!
1657 0