Canvasって面白いね！

なかなか更新できてなくてしょんぼりな近頃ですが、なんでだかゲームプログラミングが最近楽しすぎて色々勉強してますｗ
そして Canvas の使い方が段々分かってきた感じです。

Canvas、めちゃんこ楽しいです。ある程度タイムライン的な動かし方のコツを掴んだらなんでもできそうに錯覚しますね。
ってことで、お正月三が日は jsdo.it 上で色々やってましたｗ

今勉強がてら作ったゲームが↓のものです。（※音が出るので注意）
コードの下のほうにある「play」ボタンを押すと再生されます。

※ローディング部分の作りが甘いので、たまに隕石が破壊できないとか音が鳴らないとかバグがあるので、そうなったら再読込してください・・。

forked from: Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

作ってみて学んだこと

canvas の使い方がなんとなく見えてきた、ということ。
静的な画像であればそれほど問題ないですが、アニメーションの場合は

1. 各オブジェクトの描画
2. canvasのクリア
3. 各オブジェクトの次のフレーム位置の計算
4. 各オブジェクトの描画
5. ...以下繰り返し

という、かなりめんどくさい処理をする必要があります。
しかし、今回の制作を通して学んだコツとしてはフレームを描画する関数を作り、その中にさらに各オブジェクトを描画する関数を入れて、それぞれのオブジェクトを描画する関数を定義する、ということです。
そして、FPS にしたがって連続的にフレームを描画する関数（サンプルでは updateFrame 関数）を実行することでアニメーションが作成できます。

canvasはスマートフォンにも応用できるし、JS で画像のロールオーバーなんかを実装するのであれば、いっそ canvas でやってしまう、というのも面白いかもしれません。