マンホールマップでも使っている、 jqPuzzle を使って任意画像をスライドパズル化する方法を紹介します。
このスライドパズルは「１５パズル」とも呼ばれていて、僕くらいのオッサンは↓こんなのがおもちゃ売り場で売られているのをよく目にしました。「懐かしいゲーム」の１つです：
この jqPuzzle を使ったスライドパズル機能はマンホールマップ内の全てのマンホール画像で遊べます。例えばこのマンホール画像ページの「スライドゲームに移動」をクリックすると：
紹介されているマンホール画像がこんなスライドパズルに早変わり：
"shuffle" ボタンをクリックするとランダムにシャッフルされます。16 が空いた状態でパズルスタートです：
空いたピースの上下左右にあるピースをクリックすると、そのピースが空いた部分にスライドして移動します。これを繰り返して 1 から 15 までが正しい位置にくる完成を目指す、というものです。個人的な印象としては１、２、３までは簡単だけど、４を揃える所あたりからコツが必要になってくると思ってます：
こんな楽しい機能を提供する jqPuzzle は jQuery を併用して、画像にスライドパズルのインターフェースを追加してくれる CSS および JavaScript のセットです。なお、jqPuzzle が対応する jQuery は 1.x までの模様なので、この点のみ注意が必要です：
jqPuzzle を使うには公式サイトから zip ファイルをダウンロード＆展開して使います（CDN は見当たりませんでした）。なお jqPuzzle の提供ライセンスは 以下の通り、GPL と MIT のデュアルライセンス、だそうです：
利用にあたっては jQuery 1.x をロードした後に CSS と JavaScript をロードします。これで準備完了（以下の例では jQuery v1.6.2 を指定しています。また jqPuzzle の両ファイルはこれを記述する HTML と同じ階層に存在しているものとします）：
一番簡単な利用方法は <img> タグに jqPuzzle クラスを指定する方法だと思います。実はこれだけでその画像は 4x4 のスライドパズル化されて表示されます：
ちなみに "Original" ボタンをクリックすると完成形が、"Numbers" をクリックすると各ピースの数字の表示／非表示が切り替わります。数字表記がないと難易度は一気に上がります。
カスタマイズの要素を加えることも可能です。例えば以下の例では 4x4 で 16 番目の駒を抜くことは変えずに、ボタンの文字を日本語化し、最初からシャッフル済みになるようにしています（というわけでシャッフルボタンも不要なので非表示にしました）：
ちょっとした息抜き機能を追加するのに便利なライブラリです。
このスライドパズルは「１５パズル」とも呼ばれていて、僕くらいのオッサンは↓こんなのがおもちゃ売り場で売られているのをよく目にしました。「懐かしいゲーム」の１つです：
この jqPuzzle を使ったスライドパズル機能はマンホールマップ内の全てのマンホール画像で遊べます。例えばこのマンホール画像ページの「スライドゲームに移動」をクリックすると：
紹介されているマンホール画像がこんなスライドパズルに早変わり：
"shuffle" ボタンをクリックするとランダムにシャッフルされます。16 が空いた状態でパズルスタートです：
空いたピースの上下左右にあるピースをクリックすると、そのピースが空いた部分にスライドして移動します。これを繰り返して 1 から 15 までが正しい位置にくる完成を目指す、というものです。個人的な印象としては１、２、３までは簡単だけど、４を揃える所あたりからコツが必要になってくると思ってます：
こんな楽しい機能を提供する jqPuzzle は jQuery を併用して、画像にスライドパズルのインターフェースを追加してくれる CSS および JavaScript のセットです。なお、jqPuzzle が対応する jQuery は 1.x までの模様なので、この点のみ注意が必要です：
jqPuzzle を使うには公式サイトから zip ファイルをダウンロード＆展開して使います（CDN は見当たりませんでした）。なお jqPuzzle の提供ライセンスは 以下の通り、GPL と MIT のデュアルライセンス、だそうです：
利用にあたっては jQuery 1.x をロードした後に CSS と JavaScript をロードします。これで準備完了（以下の例では jQuery v1.6.2 を指定しています。また jqPuzzle の両ファイルはこれを記述する HTML と同じ階層に存在しているものとします）：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css"/> <script type="text/javascript" src="jquery.jqpuzzle.packed.js"></script>
一番簡単な利用方法は <img> タグに jqPuzzle クラスを指定する方法だと思います。実はこれだけでその画像は 4x4 のスライドパズル化されて表示されます：
<img src="sample.jpg" class="jqPuzzle"/>
ちなみに "Original" ボタンをクリックすると完成形が、"Numbers" をクリックすると各ピースの数字の表示／非表示が切り替わります。数字表記がないと難易度は一気に上がります。
カスタマイズの要素を加えることも可能です。例えば以下の例では 4x4 で 16 番目の駒を抜くことは変えずに、ボタンの文字を日本語化し、最初からシャッフル済みになるようにしています（というわけでシャッフルボタンも不要なので非表示にしました）：
:
<script type="text/javascript">
var settings = {
rows: 4,
cols: 4,
hole: 16,
shuffle: true,
numbers: true,
language: 'ja',
control: {
shufflePieces: false,
confirmShuffle: true,
toggleOriginal: true,
toggleNumbers: true,
counter: true,
timer: true,
pauseTimer: true
},
success: {
fadeOriginal: false,
callback: undefined,
callbackTimeout: 300
},
animation: {
shuffleRounds: 3,
shuffleSpeed: 800,
slidingSpeed: 200,
fadeOriginalSpeed: 600
},
style: {
gridSize: 2,
overlap: true,
backgroundOpacity: 0.1
}
};
var texts = {
shuffleLabel: 'シャッフル',
toggleOriginalLabel: '元画像',
toggleNumbersLabel: '数値表示／非表示',
confirmShuffleMessage: 'シャッフルしてよろしいですか？',
movesLabel: '回',
secondsLabel: '秒'
};
$(function(){
var t = $('img.jqPuzzle');
t.jqPuzzle( settings, texts );
});
</script>
:
ちょっとした息抜き機能を追加するのに便利なライブラリです。
