HTML5小游戏研究（三）:增加开始界面、声音、碰撞动画

开始界面

设计好开始与结束、重置的变量关系，然后把字绘制出来就行。

声音元素

增加声音太简单了。只需引入相应的HTML，在跳跃函数和碰撞函数中加入播放就行。

碰撞动画

这个想了半天，没有想到好的方法，只能用最笨的使用多个CANVAS图层，在每个层上绘制一个动画，多个叠加后，效果和在一个层内是相同的。（求大神指导）
动画已经优化过，在一个canvas图层中显示。

width="100%" height="600" src="//jsrun.net/TeKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

但是缺点是显著的，将这个动画加入到完整的游戏内，显示速度FPS明显下降。

以下是草案

width="100%" height="600" src="//jsrun.net/UeKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

小结

难点是碰撞动画，首先要解决渐变至无色；然后动画效率有（真）待（的）提（不）高（会调）；同上节，小BUG需要细心。
下一节添加多个关卡，并添加触屏操作支持。