这篇文章的目的在于让HTML5游戏开发工程师们在开发HTML游戏时具备全局概念，在这篇文章里，
北大青鸟深圳嘉华将会介绍一些关于HTML5游戏开发的框架之类的知识，帮助亲们解如何管理在线游戏的状态，如何理性处理问题。
HTML5最大的卖点之一就是它既能在桌面PC上使用，也能在笔记本电脑、平板设备甚至是智能手机上运行。他的跨平台的特性为开发者节省了很多工作。
但是注意了，不同的设备屏幕的尺寸也有所不同，屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良 好的效果，确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外，由于大多数的移动设备无法在一个屏幕上显示所有的页面内容，他们常常采用精确的缩放和平移技术，而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport meta标志禁用这些功能。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲 突，可以将“user-scaleable”参数设置为“no”，从而禁用浏览器的缩放功能。
接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘，但是在 玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘，只提供游戏中使用到的按键(比如箭头)。当然，最好是尽可能在游戏中不需 要使用额外的元素。Spy Chase在这方面做得很好，用户只用一个手指就能控制游戏中的汽车了。
现在有许多的游戏模板代码，里面实现了大多数游戏需要的功能。这样，开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏，开发者只用关注具体的游戏逻辑，而不用担心如何使游戏顺畅运行这些细节问题。
使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大，几乎可以在各个 方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后，还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单，但 在JavaScript的世界里面，选择一个框架时也意味着你选择了一种特定的编程风格。
functionsaveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
functionrestoreState() {
varstate =window.localStorage.getItem("gameState");
if(state) {
returnJSON.parse(state);
}else{
retrun null;
}
}
Monster=ig.Entity.extend({eyes : 42});});ImpactJS就是一个很好的例子，它不仅提供了图像显示和音效处理的方法，还在实现中插入了自己的对象和模型。
虽然现在已经有很多HTML5游戏使用了一些框架，但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完 成任务，使用框架当然是最有效的方法。
然后在编写HTML5游戏时，最好是经常将游戏玩家的进度状态保存一下，当用户重新打开关闭的web页面时，应该让用户可以继续之前没有结束的游戏而不是重头来过。
你应该将用户的记录保存在哪里呢?过去，答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器 端，则会产生额外的HTTP请求开销。如果是cookie的话，则可以保存记录的空间非常有限，并且cookie的寿命取决于浏览器的配置。
一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口，可以为每个网站保存几兆的数据。使用起来非常方便，但是 在HTML5游戏中，你可能想要记录一些更加复杂的数据结构——这些DOM storage本身可能并不支持。幸运的是，现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号，这就是JSON机制。 使用这套机制，DOM storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMAScript5中的JSON功能：
functionsaveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
functionrestoreState() {
varstate =window.localStorage.getItem("gameState");
if(state) {
returnJSON.parse(state);
}else{
retrun null;
}
}
