日替わり NAT’s Champloo

音楽やライブ(HM/HRやボカロなど)、旅行など、ごちゃっとした日記

Webブラウザで動く15パズル

最近JavaScriptを勉強していたのですが、プログラミング言語を自分のものにするには、自分で一からプログラムを作るのが一番、というわけでWebブラウザで動く15パズルなるものを作ってみました。
プログラミング技術的には、以下のようなものを利用してます。

  • マウスのクリック・イベントを処理する(数字パネルの移動操作に利用)
  • 動的にHTMLを書き換える(数字パネルの表示処理に利用)
  • 2次元配列を扱う(数字パネルのデータ処理に利用)

他にも色々細かいテクニックを使う必要があって、JavaScriptの良い勉強になった。案外遊べるものにもなったし。
ひょっとするとソースを見たいという奇特な人がいるかもしれないので少し解説。JavaScriptコードは、主に15puzzle.jsにあります。HTMLの方は、ここで定義している関数を呼ぶだけです。
このプログラムはオープンソースということにしときます。自由に配布、使用、改変など行って構いませんが、その結果については一切保障しませんので、自己責任ということでお願いします。一応FirefoxIEで動作確認したので、ほとんどのWebブラウザで動くはず。
ただ色もアイコンも使ってないので、見た目が味気ないなぁ。ゲームとしても、時間や手数に制限つけたりすれば、もうちょっと面白いものになったかも。まあ、JavaScriptの勉強が目的だから、あんまりこだわるつもりはなかったんだけど。