パズルの作成はとっても簡単で、一枚の 写真から自動でパズルを作成出来ます。

パズル作成にjquery.jsファイルが必要になりますのでjquery.jsファイルのない方はjquery.jsファイルをダウンロードしてください。

ちなみにアメブロには元々jquery.jsは入っているみたいです。

qPuzzleで簡単パズル作成

それではjqPuzzleに行きDownload→Download jqPuzzle.zipをクリックしてダウンロードします。ダウンロードした中身にjsファイル、txtファイル、cssファイルが入っています。jsファイルはこの記事を作成したときには3種類入っていました。今回の見本ではjquery.jqpuzzle.packed.jsファイルを利用して説明して行きます。

ダウンロードした必要なファイルをサーバーにアップロードします。そしてアップロードしたファイル下記ようにhead内に書き入れます。

<script type="text/javascript" src="http://www.koushin-s.jp/js/jpjs/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.koushin-s.jp/js/jpjs/jquery.jqpuzzle.packed.js"></script> 
<link rel="stylesheet" type="text/css" href="http://www.koushin-s.jp/js/jpjs/jquery.jqpuzzle.css" />

jquery.jsファイルが元々入っている場合やjquery.jsファイルをすでに使っている場合は下記の２種類だけ書き込みます

<script type="text/javascript" src="http://www.koushin-s.jp/js/jpjs/jquery.jqpuzzle.packed.js"></script> 
<link rel="stylesheet" type="text/css" href="http://www.koushin-s.jp/js/jpjs/jquery.jqpuzzle.css" />

後は使いたい写真などをアップロードして写真のファイルの部分にclass=”jqPuzzle”を書いてやれば自動でパズルが作成できます。

画像ファイルの書き方の例です
<img src="street.jpg" alt="Animals crossing" class="jqPuzzle" />

パズルの遊び方

Shuffleをクリックすると画像がバラバラになりOriginalをクリックすると元の画像が表示されます。Numbersをクリックすれば数字を表示/非表示できます。

パズルを完成できたら全ての一枚かけているところも表示され、動かした枚数（moves）かかった時間（seconds）が止まります。

パズルのサンプル

全く同じ画像を使って作成してみます。元の画像の大きさは1080×720です。

まずはそれを525×350のサイズにしてあるサンプルです。パズルのサンプルは携帯では表示されません。ご了承下さい。

300×200のサイズにしてあるサンプルです。

この様に写真のサイズを変えればレイアウトも自動で変わります。

又細かい設定やカスタマイズも可能です。カスタマイズに関してはqPuzzleに色んな見本がありますので参考にしてみてください。

最終更新日: 2013年2月4日