Click here for free DL of the app version that can save data.

No:2605

5329

Time attack in the labyrinth search
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 4.919KB｜

迷宮タイムアタック

迷宮の大きさ(10~30): 0秒

→ 　

0　

0　

　
　
　
　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>迷宮タイムアタック</title>
	<style>
		.cell {
			width: 30px;
			height: 30px;
			display: inline-block;
			border: 1px solid black;
			font-size: 25px;
			text-align: center;
			cursor: pointer;
		}
		.start {
			background-color: #008000;
			color: white;
		}
		.goal {
			background-color: #FFA500;
		}
		.wall {
			background-color: black;
			color: white;
		}
		.player {
			background-color: #4169E1;
			color: white;
		}
	</style>
</head>
<body>
	<h1>迷宮タイムアタック</h1>
	<div>
		<label for="size">迷宮の大きさ(10~30):</label>
		<input type="number" id="size" value="20">
		<button id="generate">生成</button>
		<button id="start">スタート</button>
		<button id="reset">リセット</button>
		<span id="timer">0秒</span>
	</div>
	<div id="maze"></div>
	<script>
		let rows, cols, start, goal, player, maze, size, timer, interval;

function generateMaze() {
			rows = cols = parseInt(size.value);
			maze = [];
			for(let i=0; i<rows; i++) {
				let row = [];
				for(let j=0; j<cols; j++) {
					row.push(0);
				}
				maze.push(row);
			}
			let x = 0, y = 0;
			while(x >= 0 && x < rows && y >= 0 && y < cols) {
				maze[x][y] = 1;
				let neighbors = [];
				if(x > 0 && maze[x-1][y] == 0) {
					neighbors.push([x-1, y]);
				}
				if(x < rows-1 && maze[x+1][y] == 0) {
					neighbors.push([x+1, y]);
				}
				if(y > 0 && maze[x][y-1] == 0) {
					neighbors.push([x, y-1]);
				}
				if(y < cols-1 && maze[x][y+1] == 0) {
					neighbors.push([x, y+1]);
				}
				if(neighbors.length > 0) {
					let randomIndex = Math.floor(Math.random() * neighbors.length);
					let neighbor = neighbors[randomIndex];
					let nx = neighbor[0], ny = neighbor[1];
					if(nx < x) {
						maze[x-1][y] |= 2;
						maze[nx][ny] |= 8;
					} else if(nx > x) {
						maze[x][y] |= 2;
						maze[nx][ny] |= 8;
					} else if(ny < y) {
						maze[x][y-1] |= 4;
						maze[nx][ny] |= 1;
					} else if(ny > y) {
						maze[x][y] |= 4;
						maze[nx][ny] |= 1;
					}
					x = nx;
					y = ny;
				} else {
					x = y = -1;
				}
			}
			start = [Math.floor(Math.random() * rows), Math.floor(Math.random() * cols)];
			goal = [Math.floor(Math.random() * rows), Math.floor(Math.random() * cols)];
			player = start.slice();
			drawMaze();
		}

function drawMaze() {
			let mazeDiv = document.getElementById("maze");
			mazeDiv.innerHTML = "";
			for(let i=0; i<rows; i++) {
				for(let j=0; j<cols; j++) {
					let cell = document.createElement("span");
					cell.classList.add("cell");
					if(i == start[0] && j == start[1]) {
						cell.classList.add("start");
						cell.innerText = "🏁";
					} else if(i == goal[0] && j == goal[1]) {
						cell.classList.add("goal");
						cell.innerText = "🎯";
					} else if(maze[i][j] == 0) {
						cell.classList.add("wall");
						cell.innerText = "🌳";
					} else {
						cell.innerText = "　";
					}
					mazeDiv.appendChild(cell);
				}
				mazeDiv.appendChild(document.createElement("br"));
			}
			updatePlayer();
		}

function updatePlayer() {
			let index = player[0] * cols + player[1];
			let mazeDiv = document.getElementById("maze");
			let cells = mazeDiv.querySelectorAll(".cell");
			cells[index].classList.remove("start");
			cells[index].classList.add("player");
			cells[index].innerText = "😎";
		}

function movePlayer(x, y) {
			let newX = player[0] + x;
			let newY = player[1] + y;
			if(newX < 0 || newX >= rows || newY < 0 || newY >= cols) {
				return;
			}
			if(maze[player[0]][player[1]] & (x == -1 ? 1 : x == 1 ? 4 : y == -1 ? 2 : 8)) {
				return;
			}
			let index = player[0] * cols + player[1];
			let mazeDiv = document.getElementById("maze");
			let cells = mazeDiv.querySelectorAll(".cell");
			cells[index].classList.remove("player");
			player[0] = newX;
			player[1] = newY;
			index = player[0] * cols + player[1];
			cells[index].classList.add("player");
			if(player[0] == goal[0] && player[1] == goal[1]) {
				clearInterval(interval);
				alert("クリア！所要時間：" + timer + "秒");
			}
		}

function reset() {
			clearInterval(interval);
			document.getElementById("timer").innerText = "0秒";
			generateMaze();
		}

document.getElementById("generate").addEventListener("click", generateMaze);
		document.getElementById("start").addEventListener("click", function() {
			interval = setInterval(function() {
				timer++;
				document.getElementById("timer").innerText = timer + "秒";
			}, 1000);
		});
		document.getElementById("reset").addEventListener("click", reset);
		document.addEventListener("keydown", function(event) {
			switch(event.keyCode) {
				case 37: movePlayer(0, -1); break;
				case 38: movePlayer(-1, 0); break;
				case 39: movePlayer(0, 1); break;
				case 40: movePlayer(1, 0); break;
			}
		});

size = document.getElementById("size");
		generateMaze();
	</script>
</body>
</html>