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

No:2847

3794

←

Prev Next

→

NES-style 3D labyrinth
Developer User1006｜Date and time 23/6/22 22:08:55
Build time 101.994 sec｜Game capacity 5.426KB｜

Script

を作ってみました！

3D迷宮

ゲームのルール：迷宮内を探索し、最終地点までたどり着きましょう！

操作方法：左右にスワイプして方向転換、上にスワイプしてジャンプ、下にスワイプしてしゃがむ。

マップ:
🔳: 壁、🟢: スタート、🏁: ゴール、🕯️: お宝

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

を作ってみました！

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>3D迷宮</title>
	<style>
		canvas { 
			display: block;
		}
	</style>
</head>
<body>
	<h1>3D迷宮</h1>
	<p>ゲームのルール：迷宮内を探索し、最終地点までたどり着きましょう！</p>
	<p>操作方法：左右にスワイプして方向転換、上にスワイプしてジャンプ、下にスワイプしてしゃがむ。</p>
	<p>マップ:<br>🔳: 壁、🟢: スタート、🏁: ゴール、🕯️: お宝</p>
	<canvas id="maze" width="600" height="400"></canvas>
	<script>
		// 迷宮データ
		const MAP_DATA = [
			[1,1,1,1,1,1,1,1,1,1],
			[1,0,0,0,0,0,0,1,0,1],
			[1,1,1,1,0,1,0,1,0,1],
			[1,0,0,0,0,1,0,0,0,1],
			[1,0,1,1,1,1,1,1,1,1],
			[1,0,0,0,0,0,0,0,0,1],
			[1,1,1,1,0,1,1,1,0,1],
			[1,0,0,0,0,1,0,0,0,1],
			[1,0,1,1,0,1,1,1,1,1],
			[1,1,1,1,1,1,0,0,0,1],
			[1,0,0,0,0,0,0,1,1,1],
			[1,1,1,1,1,1,1,1,1,1]
		];
		// レンダリングに必要な要素を取得
		const canvas = document.getElementById('maze');
		const ctx = canvas.getContext('2d');
		// 迷宮の描画に必要な定数
		const WALL_SIZE = 40; // 1マスの大きさ
		const MAZE_SIZE = MAP_DATA[0].length; // 迷宮の大きさ
		const PLAYER_SIZE = 30; // プレイヤーの大きさ
		// プレイヤーの初期座標と向き
		let playerX = 1.5;
		let playerY = 1.5;
		let playerRotation = 0;
		// プレイヤーの動きに関する定数
		const MOVE_SPEED = 0.2; // 前進するスピード
		const ROTATE_SPEED = 4; // 回転するスピード
		const JUMP_HEIGHT = 0.3; // ジャンプする高さ
		// キャンバスの背景色を設定
		ctx.fillStyle = '#ccc';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		// 壁を描画
		function drawWall(x, y, color) {
			ctx.fillStyle = color;
			ctx.fillRect(x * WALL_SIZE, y * WALL_SIZE, WALL_SIZE, WALL_SIZE);
		}
		// プレイヤーを描画
		function drawPlayer() {
			ctx.beginPath();
			ctx.fillStyle = 'yellow';
			ctx.arc(playerX * WALL_SIZE, playerY * WALL_SIZE, PLAYER_SIZE / 2, 0, Math.PI * 2);
			ctx.fill();
		}
		// 迷宮を描画
		function drawMaze() {
			for(let y = 0; y < MAZE_SIZE; y++) {
				for(let x = 0; x < MAZE_SIZE; x++) {
					if(MAP_DATA[y][x] === 1) {
						drawWall(x, y, 'black');
					} else if(MAP_DATA[y][x] === 2) {
						drawWall(x, y, 'gold');
					}
				}
			}
		}
		// プレイヤーの動きを設定
		function updatePlayer() {
			// 方向転換
			document.addEventListener('touchmove', (e) => {
				const diffX = e.changedTouches[0].pageX - e.changedTouches[0].target.offsetLeft;
				if(diffX > canvas.width / 2) {
					playerRotation += ROTATE_SPEED;
					if(playerRotation === 360) {
						playerRotation = 0;
					}
				} else {
					playerRotation -= ROTATE_SPEED;
					if(playerRotation === -360) {
						playerRotation = 0;
					}
				}
			});
			// 前進
			const rad = playerRotation * Math.PI / 180;
			const dx = MOVE_SPEED * Math.cos(rad);
			const dy = MOVE_SPEED * Math.sin(rad);
			if(MAP_DATA[Math.floor(playerY + dy)][Math.floor(playerX + dx)] === 0 &&
			MAP_DATA[Math.ceil(playerY + dy)][Math.ceil(playerX + dx)] === 0) {
				playerX += dx;
				playerY += dy;
			}
			// ジャンプ
			document.addEventListener('touchstart', () => {
				const upBlocks = Math.floor(JUMP_HEIGHT * (1 / MOVE_SPEED)); // ジャンプする段数
				let canJump = true;
				for(let i = 0; i < upBlocks; i++) {
					const nextBlockX = playerX + dx * (i + 1);
					const nextBlockY = playerY + dy * (i + 1) - (JUMP_HEIGHT * i * (1 / upBlocks));
					const ceilX = Math.ceil(nextBlockX);
					const ceilY = Math.ceil(nextBlockY);
					const floorX = Math.floor(nextBlockX);
					const floorY = Math.floor(nextBlockY);
					if(MAP_DATA[ceilY][ceilX] === 1 || MAP_DATA[ceilY][floorX] === 1 
					|| MAP_DATA[floorY][ceilX] === 1 || MAP_DATA[floorY][floorX] === 1) {
						canJump = false;
						break;
					}
				}
				if(canJump) {
					playerY -= JUMP_HEIGHT;
				}
			});
			// しゃがみ
			document.addEventListener('touchend', () => {
				const downBlocks = 2; // しゃがむ段数
				let canSquat = true;
				for(let i = 0; i < downBlocks; i++) {
					const nextBlockX = playerX + dx * (i + 1);
					const nextBlockY = playerY + dy * (i + 1);
					const ceilX = Math.ceil(nextBlockX);
					const ceilY = Math.ceil(nextBlockY);
					const floorX = Math.floor(nextBlockX);
					const floorY = Math.floor(nextBlockY);
					if(MAP_DATA[ceilY][ceilX] === 1 || MAP_DATA[ceilY][floorX] === 1 
					|| MAP_DATA[floorY][ceilX] === 1 || MAP_DATA[floorY][floorX] === 1) {
						canSquat = false;
						break;
					}
				}
				if(canSquat) {
					playerY += PLAYER_SIZE / WALL_SIZE;
				}
			});
		}
		// ゴールに到達したかどうかを判定
		function checkGoal() {
			if(MAP_DATA[Math.floor(playerY)][Math.floor(playerX)] === 3) {
				alert('ゴール！おめでとう！');
			}
		}
		// お宝を取ったかどうかを判定
		function checkTreasure() {
			if(MAP_DATA[Math.floor(playerY)][Math.floor(playerX)] === 2) {
				alert('お宝をゲット！');
				MAP_DATA[Math.floor(playerY)][Math.floor(playerX)] = 0;
			}
		}
		// 描画
		function render() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawMaze();
			drawPlayer();
			checkGoal();
			checkTreasure();
			requestAnimationFrame(render);
		}
		// 実行
		updatePlayer();
		render();
	</script>
</body>
</html>