今日は、休日だったのでまったりとしつつ
HTML5のcanvasを使ってゲームを作ってみました。

canvasでゲームを作る際に、canvasの左上を基準としたマウス位置を
取得する処理が必要になることが多々あったのでその方法をメモっておきます。

右クリックによる処理(通常はコンテキストメニュー表示)をキャンセルし、
独自の処理を割り当てるプログラムです。

GmailやTwitterでは、Ajaxによる非同期なやりとりを行い
現在の状態をアンカー(window.location.hash)に書きこむことで保存したURLにも反応するようになっています。

以前私のブログでも書いた Unique URL ってやつですね。
しかしこれだけではまだ不十分です。
戻る/進むボタンが反応しないという問題が残っています。

なぜ反応しないかというと、ハッシュが変更されたさいにそれを知る手段がないからです。

なのでその対処法をざっくりとプログラムで書いてみました。

最近ちまたで11月11日をポッキーの日にしようなんて動きがあるみたいですが、残念ながら先着がいます。

そう！！今日は Binary Day だ!!ってことで記念にJavaScriptでちょっとしたプログラムを作ってみました。

「Binary Painter」は、1と0のみで絵を描こうってプログラムです。 引きめで眺めると結構絵に見える。ような気がします。

SVG で遊んでみました。 SVGとは、Scalable Vector Graphicsの略でXMLでベクターグラフィックスを書いちゃおう！！っていうフォーマットです。 ちなみにベクターグラフィックスとは拡大縮小しても劣化しないグラフィック画像文書のことです。イラレとかがそうですね。

SVGは、一時期話題になったのですがIEが採用しないことを決めたせいで普及しなかった悲しい仕様です。 ですが、Chromeでは動きます(さすが)しIE9も採用する(やっとかよ！！)ことを決めているので 今後ちょこちょこ普及していくのかなと思っていたりします。W3Cも勧告出してますしね♪♪

ちょっとしたサンプルを作ってみたので良かったら見ていってください。 国旗を作ってみました。シンボル化機能をうまく使えばオブジェクト指向っぽく書けるのでなかなか面白かったです。 アメリカだけ大きいのは端数をなくすためであって、決して汎アメリカ主義者ではありませんｗ 国旗をダブルクリックすると、SVGのソースが表示されます。

私の環境では、現在(2010/11/8)Chromeでしか動作しませんでした。
他にはFirefox 4betaとIE9が対応もしくは今後対応予定みたいです。