A maze game in which the player character Emoji clears a maze composed of randomly generated lines and dots.'s game

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

No:1439

190

←

Prev Next

→

A maze game in which the player character Emoji cl..ALL
Developer User3181｜Date and time 23/6/18 16:13:43
Build time 86.376 sec｜Game capacity 5.49KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>迷路ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-size: 18pt;
			text-align: center;
			margin: 0;
		}
		canvas {
			width: 100%;
			height: auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// 迷路の設定
		const ROWS = 15;
		const COLS = 15;
		const WALL_THICKNESS = 5;
		const CELL_SIZE = 40;
		let maze = [];
		let startX, startY;
		let endX, endY;

// 迷路の生成
			let stack = [];
			let currentX = Math.floor(Math.random() * COLS);
			let currentY = Math.floor(Math.random() * ROWS);
			let visitedCells = 1;

while (visitedCells < ROWS * COLS) {
				maze[currentY][currentX].visited = true;
				let neighbors = [];
				if (currentY > 0 && !maze[currentY - 1][currentX].visited) {
					neighbors.push({x: currentX, y: currentY - 1});
				}
				if (currentX < COLS - 1 && !maze[currentY][currentX + 1].visited) {
					neighbors.push({x: currentX + 1, y: currentY});
				}
				if (currentY < ROWS - 1 && !maze[currentY + 1][currentX].visited) {
					neighbors.push({x: currentX, y: currentY + 1});
				}
				if (currentX > 0 && !maze[currentY][currentX - 1].visited) {
					neighbors.push({x: currentX - 1, y: currentY});
				}
				if (neighbors.length > 0) {
					let randomNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];
					stack.push({x: currentX, y: currentY});
					if (randomNeighbor.y < currentY) {
						maze[currentY][currentX].top = false;
						maze[randomNeighbor.y][randomNeighbor.x].bottom = false;
					}
					if (randomNeighbor.x > currentX) {
						maze[currentY][currentX].right = false;
						maze[randomNeighbor.y][randomNeighbor.x].left = false;
					}
					if (randomNeighbor.y > currentY) {
						maze[currentY][currentX].bottom = false;
						maze[randomNeighbor.y][randomNeighbor.x].top = false;
					}
					if (randomNeighbor.x < currentX) {
						maze[currentY][currentX].left = false;
						maze[randomNeighbor.y][randomNeighbor.x].right = false;
					}
					currentX = randomNeighbor.x;
					currentY = randomNeighbor.y;
					visitedCells++;
				} else if (stack.length > 0) {
					let cell = stack.pop();
					currentX = cell.x;
					currentY = cell.y;
				}
			}

// スタートとゴールの設定
			do {
				startX = Math.floor(Math.random() * COLS);
				startY = Math.floor(Math.random() * ROWS);
			} while (startX === endX && startY === endY);
			do {
				endX = Math.floor(Math.random() * COLS);
				endY = Math.floor(Math.random() * ROWS);
			} while (endX === startX && endY === startY);

// キャンバスの描画
			let canvas = document.getElementById("canvas");
			canvas.width = COLS * CELL_SIZE;
			canvas.height = ROWS * CELL_SIZE;
			let ctx = canvas.getContext("2d");
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#000";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.strokeStyle = "#fff";
			ctx.lineWidth = WALL_THICKNESS;
			for (let row = 0; row < ROWS; row++) {
				for (let col = 0; col < COLS; col++) {
					let cell = maze[row][col];
					if (cell.top) {
						ctx.beginPath();
						ctx.moveTo(col * CELL_SIZE, row * CELL_SIZE);
						ctx.lineTo((col + 1) * CELL_SIZE, row * CELL_SIZE);
						ctx.stroke();
					}
					if (cell.right) {
						ctx.beginPath();
						ctx.moveTo((col + 1) * CELL_SIZE, row * CELL_SIZE);
						ctx.lineTo((col + 1) * CELL_SIZE, (row + 1) * CELL_SIZE);
						ctx.stroke();
					}
					if (cell.bottom) {
						ctx.beginPath();
						ctx.moveTo(col * CELL_SIZE, (row + 1) * CELL_SIZE);
						ctx.lineTo((col + 1) * CELL_SIZE, (row + 1) * CELL_SIZE);
						ctx.stroke();
					}
					if (cell.left) {
						ctx.beginPath();
						ctx.moveTo(col * CELL_SIZE, row * CELL_SIZE);
						ctx.lineTo(col * CELL_SIZE, (row + 1) * CELL_SIZE);
						ctx.stroke();
					}
				}
			}
			ctx.fillStyle = "#ff0";
			ctx.fillText("🤖", (startX + 0.5) * CELL_SIZE, (startY + 0.7) * CELL_SIZE);
			ctx.fillStyle = "#f00";
			ctx.fillText("🏁", (endX + 0.5) * CELL_SIZE, (endY + 0.7) * CELL_SIZE);
		}

// プレイヤーの移動
		function movePlayer(x, y) {
			if (x < 0 || y < 0 || x >= COLS || y >= ROWS) {
				return;
			}
			let cell = maze[y][x];
			if (cell.visited) {
				let canvas = document.getElementById("canvas");
				let ctx = canvas.getContext("2d");
				ctx.clearRect((startX + 0.35) * CELL_SIZE, (startY + 0.2) * CELL_SIZE, CELL_SIZE * 0.3, CELL_SIZE * 0.6);
				startX = x;
				startY = y;
				ctx.fillStyle = "#ff0";
				ctx.fillText("🤖", (startX + 0.5) * CELL_SIZE, (startY + 0.7) * CELL_SIZE);
				if (startX === endX && startY === endY) {
					alert("クリア！");
					generateMaze();
				}
			}
		}

// キーボードの制御
		document.addEventListener("keydown", e => {
			switch (e.keyCode) {
				case 37: // 左
					movePlayer(startX - 1, startY);
					break;
				case 38: // 上
					movePlayer(startX, startY - 1);
					break;
				case 39: // 右
					movePlayer(startX + 1, startY);
					break;
				case 40: // 下
					movePlayer(startX, startY + 1);
					break;
			}
		});

// 初期化
		generateMaze();
	</script>
</body>
</html>