迷路生成アプリ
30秒間待つと迷路ができます。
以下が、JavaScriptを用いた壁伸ばし法による迷路生成アプリの実装です。
```html
<!DOCTYPE html>
<html>
<head>
<title>迷路生成アプリ</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
width: 30px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>迷路生成アプリ</h1>
<p>30秒間待つと迷路ができます。</p>
<table id="maze-table"></table>
<script>
// 10×10の迷路用の配列を定義する
var maze = [];
for (var i = 0; i < 10; i++) {
var row = [];
for (var j = 0; j < 10; j++) {
if (i === 0 || j === 0 || i === 9 || j === 9) {
// 外側は全て壁にする
row.push(true);
} else {
// それ以外は全て道にする
row.push(false);
}
}
maze.push(row);
}
// 迷路を生成する関数を定義する
function generateMaze() {
var x = Math.floor(Math.random() * 8) + 1; // 1~8のランダムな数値を取得する
var y = Math.floor(Math.random() * 8) + 1;
if (maze[x][y]) {
// すでに壁なら何もしない
return;
}
// 上下左右の座標
var directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
// 上下左右の交点を確認し、壁を生成する
for (var i = 0; i < 4; i++) {
var dx = directions[i][0];
var dy = directions[i][1];
if (maze[x+dx][y+dy] === true) {
continue;
}
maze[x+dx][y+dy] = true;
break;
}
}
// 30回ランダムに壁を伸ばす
for (var i = 0; i < 30; i++) {
generateMaze();
}
// HTML上に迷路を表示する
var table = document.getElementById("maze-table");
for (var i = 0; i < 10; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < 10; j++) {
var cell = row.insertCell(-1);
if (maze[i][j]) {
cell.style.backgroundColor = "black";
}
}
}
// 30秒後にページをリロードする
setTimeout(function() {
showToast("再読み込みしてください");
}, 30000);
</script>
</body>
</html>
```
ジョークを取り入れて、生成された迷路の中央に「怪盗Cが待ち構えている」と表示するなど、遊び心を加えることもできます。