Javascript（JQuery)でパズルゲームを作る – ボンシのサイクリング＆グルメ道

今回は、JQueryでパズルゲームを作りました。パズルの仕様は、パズルピースを作るのが大変なので、1枚の画像をクローンしてピースにしています。パズルの元画像を変更する時は、画像「image」フォルダに入れるだけでOKです。ピースの分割数を変更することも自由に設定できます。また、クリアーするまでの時間をカウントしています。

サンプルページはこちらになります。

遊び方

1. ゲームを開始するには、スタートを押してください
2. 左側のピースをドラッグ＆ドロップして右側の画像の当て嵌めてください。
3. もし、見にくい場合は、「フィルターの切替」ボタンで表示を切り替えれます。
4. 完成したら、「完了」ボタンを押してください。

ソースを変更するにには

・パズル画像の変更と追加
　「image」フォルダー内に画像を入れてください。サイズは自由ですが、画像サイズを分割数で割ったときに端数が出ないようにしてください。また表示領域の最大幅を350px、最大高さ500pxにしているので、それより小さい画像を使ってください。

・画像の分割数を変更する
　「java.js」の「x_split」と「y_split」を変更してください。

・phpを使わないようにするには
　「index.php」を「index.html」に変更し、先頭行の「control.php」の呼び込み部分を削除し、id「hidden_datas」の中に画像のパスを記述してください。

　ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
 zip形式でダウンロード

（苦労した点　）
　「draggable」を使い画像をドラッグ＆ドロップするときに、「overflow:hidden;」が掛かっているとその領域内しか表示（移動）ができないので、「overflow:hidden;」を使わないようにコーディングするのが大変だった。
　Safari、chromのブラウザで「img whidt属性」を表記していないとQuery（outerWidth）で値が取得できなかったので、調べるのに時間が掛かった。