HTML5 canvasをいじる。ボールに見立てた円を反発させる。

公開:2011-01-10 09:40
更新:2020-02-15 04:36
カテゴリ:web,html5,javascript

今日はボールを見立てた円を反発させてみた。なんちゃって反発処理なのでリアルではないかもしれない。
画面をクリックするとボールが追加される。
衝突判定のアルゴリズムは以下のページを参照した。理屈はあまり理解していない。
http://marupeke296.com/COL_main.html

なんちゃってボール反発です。 - jsdo.it - share JavaScript, HTML5 and CSS

100個くらいでもそこそこ動くので驚いている。
ただ描画以外に衝突判定、跳ね返り処理など画像処理以外の処理が増えてきたせいかFirefox 4 b8,IE9 bとも1フレームの処理時間が落ちてきている。だいたい7-9ms位。Chromeは3-4ms位で動く。V8効果なのだろうか。

次はプレイヤーを動かす処理を入れてみることにする。

ページの作成はVisual Web Developer 2010 Expressを使っていて、出来たのをjsdo.itにアップしている。
jQueryもインテリセンスで補完されるので結構楽に入力できる。
デバッグはChromeのデバッガを使っている。高機能で自分には十分すぎる。