canvas编程 & 碰撞检测

浏览器天生不适合写游戏,因为浏览器运行效率实在太蜗牛,即便在canvas上作一些动画也非常吃力,CPU烧的厉害,js没办法编译成机器码再运行,图形编程也鲜有硬件加速,即使用hack手段兼容了一些老旧浏览器,效率始终是最大的瓶颈。在html5之中情况好一些,很多动画api已经内嵌在浏览器的骨肉之中,效率有了不少的提升,但离传统游戏的执行效率还有很大差距,不过前些日子网上盛传的基于html5的雷神之锤,让我们看到了希望,不是html5的希望,而是webGL的希望,似乎我们应该摈弃很多已经根深蒂固的观念…… 那么……

对于传统dom层面的动画,已经可以使用transitions来做,KISSY和YUI已经实现了transition,写了一个放烟花的小demo,webkit下会调用native transition api,速度明显快很多。

同样,cavans层面的动画,webkit依然把其他浏览器甩在身后,这个小demo是一个裸露的小游戏,看下100个方块以内你能命中多少。有几点需要记录下:

  • 目前对于复杂动画的要求不要太高,速度远达不到我们的要求
  • canvas编程最好是基于库,我用的http://raphaeljs.com/
  • 写动画还是要温习一下一些数学公式的
  • 过程中要细心体会最纯粹的编程美感,没有dom的世界是如此之清静

以上

posted at