最佳实践 #3:自动保存玩家进度
像site pinning特性, 试图给web浏览器web应用程序和常规的桌面应用同样的地位. 然而, 作为应用程序运行的网站想法太新了, 网页要维持客户端状态. 关闭Microsoft Word前,你可能会三思后行, 但是可能不会对于一个开放的网页谨慎行事.大部分时间, 它不是问题 --- 大多数网页要嘛是无状态的, 要嘛是在服务器上维护记录你的信息.
然而, 浏览器游戏, 是非常不同的小怪兽. 既然JavaScript代码运行在客户端, HTML5游戏状态通常都保持在瞬时内存中(又称RAM).关闭游戏器窗口,你辛苦赚取的积分就付之东流了.
现在, 你可能会认为, 一个明智的用户会足够谨慎, 他们连续玩了8小时, 不关闭游戏. 但事故常有发生, 特别是当打开了多个选项卡或突然断电.
一言蔽之: 当编写HTML5游戏的时候, 绝对的最佳实践是定期保持玩家进度, 允许玩家恢复上一次关闭网页时的状态.
现在,你应在哪保存玩家的进度呢?过去,显而易见的地方是服务器端或浏览器cookie. 两个解决方案都不是特别有吸引力. 服务器端方案, HTTP请求不得不每次构造需要存储或取回的信息. 使用cookie的方案, 你的空间就非常有限了, cookie的可用空间大大依赖于浏览器配置.
更好的可行方案是使用HTML5 DOM storage. DOM storage 通过一个接口, 让你为每个网站保存几兆的数据, 它类似于一个key-value存储(或者一个JavaScript expando对象). 这非常方便,但在HTML5游戏上下文中, 你也可能需要记住复杂的数据结构 --- 一些DOM storage非原生支持的结构.
幸运的是,现代的JavaScript引擎都有内建的机制, 將对象序列化成紧凑的结构,如JSON. 使用这种方案, DOM storage也可以记住复杂信息.接下来的两个助手函数, 使用HTML5 DOM storage和ECMAScript5的内建JSON特性, 解决了游戏状态的存储和取回.
ECMAScript5:
01function saveState(state) {
02 window.localStorage.setItem("gameState", JSON.stringify(state));
03}
04
05function restoreState() {
06 var state = window.localStorage.getItem("gameState");
07 if (state) {
08 return JSON.parse(state);
09 } else {
10 return null;
11 }
12}
最佳实践 #4: 使用监控器
开发游戏的一个最大挑战是加入越来越多的游戏特性的同时能保持高帧率.
好消息是, 浏览器比过去几年快了很多,HTML5游戏运行在恒定的60fps已经成为现实.
这实属不易. 对于IE9,意味着要编写一个全新的JavaScript引擎, 使用多CPU内核和基于Direct2D的完全的硬件加速渲染管道.
IE9的内置监控器能帮助你定位性能漏洞.
对于简单游戏,你不需要担心性能问题.但既然HTML5是平台无关的,你很可能会针对大量的设备和浏览器开发, 有些不像你想像的那么快速. 即使你只针对高性能电脑, 性能仍然会成为一个问题.
如果你想游戏运行在60fps, 单个帧渲染不能超过16毫秒. 这可能看起来像是个艰巨的任务, 但这是可以做到的.
很幸运,有一些工具可以帮助你. 在IE9中(或者10),单击F12,打开开发者工具,选择"Profiler"选项卡并单击 "Start profiling".
现在导航到你感觉性能应被改善的地方,给监控器大概30秒的时间收集数据,然后单击"Stop profiling." 將给你展现一个关于每个游戏函数累计执行时间的概览. 大多数时候, 你会发现, 少数几个函数占用了大部分执行时间.优化这些函数將给你超值回报, 分析这些代码, 拖后腿的子程序將原型毕露.
不要盲目的相信直觉, 在当今的JavaScript引擎中, 看起来慢可能实际上运行得很快. 最佳优化方案是时常监控和判断代码的改变是否对性能有负面影响.
社会化游戏: Warimals 基于HTML5而允许你身边的Facebook好友一起玩游戏.
最佳实践 #5 创意!
HTML5不光在技术上是有趣的, 浏览器本身也是一个完美的游戏平台.
感谢浏览器... 它存在于很多不同的设备中,他们常常(总是)在线的,它们是人们彼此交流的工具, 通过email,聊天室和社交网络.做为一个浏览器的游戏开发者, 你可以创建游戏, 让世界各地的人聚集在一起, 带给他们快乐.