AI game creator

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

No:2396

393

←

Prev Next

→

Cube maze Difficult
Developer User3559｜Date and time 23/6/21 10:15:48
Build time 47.645 sec｜Game capacity 3.568KB｜

Script

このゲームは、3Dの立方体迷路を操作し、ゴールを目指すゲームです。スマホで操作を前提にしています。絵文字は使用していませんが、HTML5 Canvasを使用して簡単なグラフィックを描画しています。プログラムはJavaScriptで記述されています。操作方法は、右、左、上、下の矢印キーを使用します。意図的に難しい迷路に設定しています。

←

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>立方体迷路</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 2em;
		}
		canvas {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

let maze = [
			[
				[0, 0, 1],
				[1, 0, 0],
				[1, 1, 0]
			],
			[
				[0, 0, 1],
				[0, 1, 0],
				[1, 1, 1]
			],
			[
				[0, 1, 1],
				[0, 1, 0],
				[1, 1, 0]
			]
		];

let currentX = 0;
		let currentY = 0;
		let currentZ = 0;

let cubeSize = 50;
		let canvasWidth = canvas.width;
		let canvasHeight = canvas.height;
		let maxCubeOnScreen = 5;

let rightPressed = false;
		let leftPressed = false;
		let upPressed = false;
		let downPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

function drawCube(x, y, z) {
			let cubeX = (canvasWidth / 2) - ((currentZ - z) * cubeSize) + ((y - currentY) * cubeSize);
			let cubeY = (canvasHeight / 2) - ((currentZ - z) * cubeSize) + ((x - currentX) * cubeSize);
			ctx.fillRect(cubeX, cubeY, cubeSize, cubeSize);
			ctx.strokeRect(cubeX, cubeY, cubeSize, cubeSize);
		}

function update() {
			updateCurrentPosition();
			ctx.clearRect(0, 0, canvasWidth, canvasHeight);
			drawMaze();
			requestAnimationFrame(update);
		}

update();
	</script>
</body>
</html>