JavaScriptとCanvasの基礎、オブジェクト、Update、Draw、クリックイベントの判定法など、弾幕システムも基本はここから

それまでCanvasを使わなさそうだったJavaScriptを教えている学生さんから

Canvasにボタン的なオブジェクトを表示してクリック判定とかどうするんですかー、divやimgみたいにHTMLのタグレベルでイベントハンドラーとかってわけにいかないしー。

みたいな質問を貰ったのでそそくさと講義中に書いて解説したサンプル。ちなみにfork元は質問をくれた学生さんのてけとーに用意してくれた雛形から。

https://gist.github.com/3991317

今回はJSのプロトタイプについて綺麗に活用したりタイマーの誤差を考慮したりしていませんが、その分Canvasという世界でオブジェクトを制御し自分でupdateやdrawやイベントの仕掛けを用意する手法を読みやすいコードになっています。

ちなみに別の学生さんがcanvasのとあるバギーな特性で悩んでいたのでそれについてもこのあとエントリーを書きます・w・b