今回は、JQueryでパズルゲームを作りました。パズルの仕様は、パズルピースを作るのが大変なので、1枚の画像をクローンしてピースにしています。パズルの元画像を変更する時は、画像「image」フォルダに入れるだけでOKです。ピースの分割数を変更することも自由に設定できます。また、クリアーするまでの時間をカウントしています。
サンプルページはこちらになります。
ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード
(苦労した点 )
「draggable」を使い画像をドラッグ&ドロップするときに、「overflow:hidden;」が掛かっているとその領域内しか表示(移動)ができないので、「overflow:hidden;」を使わないようにコーディングするのが大変だった。
Safari、chromのブラウザで「img whidt属性」を表記していないとQuery(outerWidth)で値が取得できなかったので、調べるのに時間が掛かった。