本文同时也发布在我的博客：http://www.livoras.com/

转载请注明出处: http://www.livoras.com/post/23

Note：这篇文章是在做一个移动端HTML5小游戏《别碰钉子》时候写的一篇游戏方案分析文档。个人认为在移动端上做HTML5游戏最困难的点在于在性能上适配不同的手机浏览器。

现在比较主流做HTML5游戏的方式是用Canvas，用例如Phaser、Cocos-js之类的框架来做。在PC端上因为硬件比较好，性能问题不大。但是在移动端这种像素级别的Canvas操作上会遇到比较大的性能瓶颈，在性能上对不同浏览器（一般是不同Webkit新老版本）进行兼容和在PC端对不同版本的IE进行兼容难度相当。

本文分析了一个游戏不同的实现方案的性能上的区别，总结出一种实现高性能移动端HTML5游戏的方案：

  1. 使用DOM + JS控制CSS3属性开启3D加速实现动画
  2. 使用time-based动画算法替代一般的frame-based动画算法

用这种方式实现的HTML5游戏，可以不同手机浏览器的性能上达到一种体验基本一致的效果。微信扫一扫可玩：

qrcode

下面是这种方案的出来的分析过程。

1. 前言

《别碰钉子》这个游戏其实相当于《Flappy Bird》游戏的一个改版，该游戏特点和如《神经猫》这类游戏不一样。这个游戏其实是对物理世界有模拟，无法单纯使用CSS3来实现。为了在不同移动平台浏览器上获取到比较良好的效果，对不同的技术方案进行可行性分析和性能测试，然后选择最佳方案以获得最佳体验效果。

该分析不针对任何游戏框架，因为游戏框架底层其实也是使用HTML5、CSS3等，分析直接针对不同方案最原始实现进行优化和测试，力