3x3スライドパズル

3x3スライドパズル 解説

遊び方

空白マスに隣接するパネルをクリックすると、そのパネルが空白マスに移動します。
パネル並び替えて正しい絵を完成させましょう。

インターネットブラウザをリロードすると異なる配置で再スタートできます。

※３ｘ３スライドパズルには手詰まり（最後の２枚のパネルがとなり合う場合）がありますので、
すべての位置が正解でなくとも完成とみなす場合があります。

カスタマイズ

設置場所の変更

インターネット接続（jquery呼出）があれば、このファイル「index.html」のみで動作します。 パズル画像などを利用する場合は後述を参考にして下さい。

パズル画像の変更

このファイル「index.html」と同一ディレクトリに、画像ファイル「puzzle.jpg」を設置して下さい。
「puzzle.jpg」の画像解像度は「縦300px：横300px」のサイズにして下さい。

ご褒美画像の変更

このファイル「index.html」と同一ディレクトリに、画像ファイル「correct.jpg」を設置して下さい。
表示サイズはindex.html 109行目の＜img＞タグや、書き込み先の＜div class="message"＞のCSS指定などで
対応して下さい。

高度なカスタマイズ

制作したWebページへのパズル埋め込み

この「index.html」ファイルの＜!-- ここからjquery --＞から＜!-- ここまでjquery --＞を、
動作させたいhtmlファイルの＜head＞タグ内にコピーします。
※jqueryを動作させていないのであれば＜!-- ここから呪文 --＞の部分もコピーします。
※cssは外部ファイルに移動させても問題ありません。ただしパズル画像「puzzle.jpg」の相対位置に注意して下さい。
パズルを設置したい場所に＜!-- ここからpuzzle --＞から＜!-- ここまでpuzzle --＞をコピーします。

パズル完成時に表示されるテキスト「index.html 109行目」にはhtmlが記載できます。
例のようにリンクを設置したりもできます。
＜記載例＞

if(match>=7){$('.message').html('<a href="隠しページ.html">ごほうびページへのリンク');}

あとがき

４ｘ４や５ｘ６などの変更も簡単におこなえるような設計にはしています。
その際はパズル用画像の解像度にご注意下さい。