スライドパズル(15puzzle)
このゲームはプログラミング言語（JavaScript）でつくられています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 21.0.1.0 for Windows">
<title>15puzzle</title>
<meta charset="UTF-8">
<style>

</style>
<script>
"use strict";

const tiles = []; // タイル配列

function init() {
let table = document.getElementById("table"); // <table>要素の参照

for (let i = 0; i < 4; i++) {
// 4行分ループ
let tr = document.createElement("tr"); // <tr>要素の作成
for (let j = 0; j < 4; j++) {
// 各列分ループ
let td = document.createElement("td"); // <td>要素の作成
let index = i * 4 + j;
td.className = "tile"; // class設定
td.index = index; // タイルの並び順
td.value = index; // 描画されている値
td.textContent = index == 0 ? "" : index; // 0は空欄に
td.onclick = click; // クリック時のハンドラ登録
tr.appendChild(td); // 行<tr>に列<td>を追加
tiles.push(td);
}
table.appendChild(tr); // テーブルに行<tr>を追加
}

for (let i = 0; i < 1000; i++) {
// 1000回、疑似的にランダムにクリックして並べ替え
click({ target: { index: Math.floor(Math.random() * 16) } });
}
}

function click(e) {
let i = e.target.index; // どの場所がクリックされたか

if (i - 4 >= 0 && tiles[i - 4].value == 0) {
swap(i, i - 4); // 上と入れ替え
} else if (i + 4 < 16 && tiles[i + 4].value == 0) {
swap(i, i + 4); // 下と入れ替え
} else if (i % 4 != 0 && tiles[i - 1].value == 0) {
swap(i, i - 1); // 左と入れ替え
} else if (i % 4 != 3 && tiles[i + 1].value == 0) {
swap(i, i + 1); // 右と入れ替え
}
}

// i番目のタイルとj番目のタイルの番号を入れ替え
function swap(i, j) {
let tmp = tiles[i].value; // 変更先を一時退避
tiles[i].textContent = tiles[j].textContent;
tiles[i].value = tiles[j].value;
tiles[j].textContent = tmp;
tiles[j].value = tmp;
}

</script>
</head>
<body onload="init();" background="wallppr088.gif">
<p><font SIZE="+4" FACE="ＭＳ明朝"><b>スライドパズル<br>
</b></font><font SIZE="+3" FACE="ＭＳ明朝">遊び方<br>
</font>空白タイルの上下左右をクリックすると、その数値が空白タイルと入れ替わります。<br>
その作業を繰り返して、ランダムに並んだ状態から1～15の順に整列させるという<br>
パズルです。<br>
<br>
このゲームはプログラミング言語（JavaScript）でかかれています。<br>
<br>
<br>
</p>
<table id="table"></table>
<p><br>
<a href="JavaScriptNew.html">戻る</a></p>
</body>
</html>

戻る