しろログ

15パズルジェネレーターサイトを作ってみました。
自分の持ってる画像で15パズル(9パズル・25パズル)を作れます。
タグを貼れば自分のサイトにも設置できます。
もちろん無料・登録不要です。

なんかこう、サクッと作るつもりが妙に四苦八苦しました。
以下、よもやま話。

パズルジェネレーター自体はいろいろありますが、
今回はJavascriptベースで作りました。
JavaやFLASHのほうが画像を簡単に取られなくていいとかあるのですが、
あえてHTML+Javascript。

ぶっちゃけると、1枚の画像を各ピースになるようにずらして表示してます。
なので、最初から元画像はダウンロードされてるわけです。
そのへんこだわる人は、あらかじめ15枚に切った画像を用意するのが良いでしょうね。

今回はそこまでやってません。
例によってストレージにAmazonのS3を使うので、細かく切った画像を
アップしまくるのも時間かかりそうだし。
(名称は15パズルですか、9～25ピースにもできるので、全部作ると47枚作ることになる・・)

まあ、それでも簡単にコピーされてもつまらないので、
申し訳程度には、ごにょごにょしてます。
(なお画像を保存させないというのは、HTMLベースでやってる限りたぶん不可能)

パズルピースはIE6とその他のブラウザで実装が異なります。
IE6はIMGタグ+CSSのclipで、
その他はDIVタグ+background-imageです。

IE6だけはbackground-imageのある要素をいじると
再度画像を読み込むという訳の分からない仕様があるようで、こうなりました。

他のブラウザでIMGタグを使わないのは、
例えばSafariだとドラッグ・ドロップで画像見えちゃったり、
簡単にデスクトップに保存とかできちゃうので、
これは興ざめだろうということで。
ちなみにIE6はIMGをAタグでくくってドラッグ・ドロップによる画像保存を防止してます。

あとは、このピースを適当にならべて移動できるようにすれば完成・・・
とか思ってたのですが、「適当に」を本当に「ランダム」でやってたら
どうも、パズルが完成しないことがあります。

どうやら、15パズルは完成しない配置があるらしい。

てっきりどんな並べ方でもそろうんだと思ってました。

その辺の証明とか、解説とかはこちら。

はじめ、ピース配列のシャッフルに工夫すれば、済みそうだなと思ってたのですが、
面倒になったので、空マスをランダム移動させることにしました。
(普通そうするか)

これで丸2日ほど試行錯誤・・
単純そうで奥が深いのねー。