シナップの柿内です。

以前HTML5キャンバス版とFlash版のアニメーションを比較した時に「次はもうすこしインタラクティブな物を」といってから、ずいぶんと時間が経ってしまいました。

本日は「インタラクティブ」とはいえませんがもう少し凝ったアニメーションを作成しました。 今回は各オブジェクトの衝突判定を実装し中村勇吾さんのサイトyugop.comで最初に再生されるアニメーションを意識して作ってみました。いろいろ説明するより見てもらうほうが早いので下のアニメーションをご覧下さい。

もう一度再生　※ HTML5対応ブラウザでご覧ください。

前回のアニメーションは黒いオブジェクトが縦に自由落下をするだけのアニメーションでした。

今回は

• y方向以外にもx方向の動きを足す
• 黒色一色だったオブジェクトにランダムに色を付る。
• オブジェクト同士の衝突判定を追加。
• 画面の外にでたオブジェクトを描画の対象から外す。
  （下の方に溜ったオブジェクトは一定時間たつと画面外へ移動します。）

実は前回から加えたのは主にこの４つのみです。それだけでなんとなく素敵なアニメーションになるものです。

動作速度も問題ないので、なにかの折にプロジェクトに使えるといいなと個人的には思っています。