15パズルの設置法

画像の用意

　この15パズルを設置するためには、16枚で一つとなる画像ファイルと、スライドさせるときに空白となる部分の画像ファイル1つが必要となります。

　まず、元となる画像を用意し、縦横の長さ（ピクセル）をそれぞれ4で割り切れるように調整し、縦横4つずつ同じ大きさに分割し、16枚の画像を作成してください。

　このとき、左から右へと順番に"0"から始まる数字を付けた連番のファイル名で保存してください。ここでは、「pict0.gif, pict1.gif, pict2.gif, ‥‥, pict15.gif」という名前で保存したとして説明を続けます。

　空白となる部分の画像は、同じ大きさの画像を作成し、適当なファイル名（ここでは"noimage.gif"だとして説明を続けます）で保存してください。

JavaScript外部ファイルの作成

　15パズルを動かすプログラムの部分についての説明をします。まずjsgame02.js.txtを開き、メモ帳などのエディタに貼り付けてください。

　改造するのは、上の方にある、コメントの付いた部分だけです。実際に「画像の用意」での設定で改造した場合、次のようになります（これはさらにimageというディレクトリに保存していた場合の例です）。

var imagesURL = "image/pict*.gif";// 画像のファイル名
var notileURL = "image/noimage.gif";// 空白部分の画像

　コメントが画像のファイル名(前)の部分には、16枚の画像ファイル名の番号の部分を「*」に置き換えて、画像ファイルを指定してください。また、空白部分の画像には、パズルの空白となる部分の画像ファイルを指定してください。

　改造したら、「puzzle.js」というファイル名で保存してください。

　保存する際、文字コードをHTMLファイルと一緒にする必要があることに注意してください。

CSS外部ファイルの用意

　以下のテキストを、メモ帳などのエディタに貼り付け、「puzzle.css」というファイル名で保存してください。

#gamearea {
    text-align: center;
    padding: 1em;
}

#gamearea p {
    line-height: 1em;
}

#gamearea table {
    border-collapse: collapse;
    border: double black 3px;
    margin-left: auto;
    margin-right: auto;
}

#gamearea td {
    padding: 1px;
    border: none;
}

HTMLファイルの作成

　まず、以下のSCRIPT要素を、HTMLのパズルを表示させたい位置に貼り付けてください。このとき、「width=\"90\"」の数を分割した画像の横幅（ピクセル）、「height=\"90\"」の数を分割した画像の縦幅（ピクセル）に置き換えてください。

<script type="text/javascript">
<!--
document.write("<div id=\"gamearea\">\n<table>\n");
for (i = 0; i < tile_x * tile_y; i++) {
    if (i % tile_x == 0) document.write("<tr>\n");
    document.write("<td><img src=\"" + imagesURL.replace(/\*/, i) + "\" width=\"90\" height=\"90\" id=\"tile" + i + "\" alt=\"\" onclick=\"slideTile(" + (i % tile_x) + ", " + (Math.floor(i / tile_x)) + ")\"><\/td>\n");
    if (i % tile_x == tile_x - 1) document.write("<\/tr>\n");
}
document.write("<\/table>\n");
document.write("<form name=\"fm\" action=\"#\" onsubmit=\"return setTile()\">\n");
document.write("<p><input type=\"submit\" value=\"スタート\" onsubmit=\"setTile()\"> <input type=\"text\" name=\"msg\" value=\"\"></p>\n");
document.write("</form>\n</div>\n");
//-->
</script>

　次に、HTMLの<head>～</head>の部分に、次のものを貼り付けてください。「puzzle.css」や「puzzle.js」は、作成したCSSファイル、JSファイルの指定です。別のディレクトリに保存しているなどの場合には、適切に書き換えてください。

<link rel="stylesheet" type="text/css" href="puzzle.css">
<script type="text/javascript" src="puzzle.js"></script>

さらに改造する場合

　これまでの説明で、一応ゲームとして動作するようになっているはずです。ここからは、さらに改造する方法の説明となります。

　jsgame02.js.txtを見ると、下記のような前に説明した部分以外のコメント部分があることが分かります。

var tile_x = 4;// 横方向のタイル数
var tile_y = 4;// 縦方向のタイル数
var notile_x = 0;// 初期のタイルの無い位置のX座標
var notile_y = 0;// 初期のタイルの無い位置のY座標
var impossible = 0;// 0なら可、1なら不可

　横方向のタイル数、縦方向のタイル数の数値を書き換えると、パズルのマスの数を変えることができます（当然のことですが、画像の分割の仕方を変える必要があります）。

　初期のタイルの無い位置のX座標、初期のタイルの無い位置のY座標を書き換えると、パズルの空白となるマスの位置（初期設定では左上）を変えることができます。左上を0とし、右と下の方向を正方向とした場合のマスの座標を指定してください。

　0なら可、1なら不可には、0か1を入れますが、普通は0にしてください。1を入れると不思議な現象が・・・！？