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需要細心。
下一節添加多個關卡，並添加觸屏操作支持。