ここまでできる！ HTML5 Canvasで作るアニメーション（衝突編） | ブログ | SINAP - 株式会社シナップ

シナップの柿内です。 以前HTML5キャンバス版とFlash版のアニメーションを比較した時に「次はもうすこしインタラクティブな物を」といってから、ずいぶんと時間が経ってしまいました。 本日は「インタラクティブ」とはいえませんがもう少し凝ったアニメーションを作成しました。 今回は各オブジェクトの衝突判定を実装し中村勇吾さんのサイトyugop.comで最初に再生されるアニメーションを意識して作ってみました。いろいろ説明するより見てもらうほうが早いので下のアニメーションをご覧下さい。 もう一度再生 ※ HTML5対応ブラウザでご覧ください。 前回のアニメーションは黒いオブジェクトが縦に自由落下をするだけのアニメーションでした。 今回は y方向以外にもx方向の動きを足す 黒色一色だったオブジェクトにランダムに色を付る。 オブジェクト同士の衝突判定を追加。 画面の外にでたオブジェクトを描画の対象から

[kzakza]

[canvas]canvasアニメーション

[TiTo]

HTML Canvas面白いね

[fakestar0826]

そんなに重くない。