AI game creator

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

No:48904

←

Prev Next

→

Maze
Developer User20876｜Date and time 24/3/3 6:57:50
Build time 8.863 sec｜Game capacity 2.042KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Maze Game</title>
</head>
<body>
	<canvas id="mazeCanvas" width="400" height="400"></canvas>

// Player position
		let playerX = 20;
		let playerY = 20;

// Maze walls
		const maze = [
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 1]
		];

// Draw maze
		function drawMaze() {
			for (let y = 0; y < maze.length; y++) {
				for (let x = 0; x < maze[y].length; x++) {
					if (maze[y][x] === 1) {
						ctx.fillStyle = 'black';
						ctx.fillRect(x * 40, y * 40, 40, 40);
					}
				}
			}
		}

// Draw player
		function drawPlayer() {
			ctx.fillStyle = 'blue';
			ctx.fillRect(playerX, playerY, 20, 20);
		}

// Check for collision with walls
		function checkCollision(x, y) {
			const cellX = Math.floor(x / 40);
			const cellY = Math.floor(y / 40);

if (cellX < 0 || cellX >= maze[0].length || cellY < 0 || cellY >= maze.length || maze[cellY][cellX] === 1) {
				return true;
			}

return false;
		}

// Move player
		function movePlayer(direction) {
			let newX = playerX;
			let newY = playerY;

switch(direction) {
				case 'up':
					newY -= 5;
					break;
				case 'down':
					newY += 5;
					break;
				case 'left':
					newX -= 5;
					break;
				case 'right':
					newX += 5;
					break;
			}

if (!checkCollision(newX, newY)) {
				playerX = newX;
				playerY = newY;
			}
		}

// Game loop
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

drawMaze();
			drawPlayer();

requestAnimationFrame(gameLoop);
		}

gameLoop();

document.addEventListener('keydown', function(event) {
			switch(event.key) {
				case 'ArrowUp':
					movePlayer('up');
					break;
				case 'ArrowDown':
					movePlayer('down');
					break;
				case 'ArrowLeft':
					movePlayer('left');
					break;
				case 'ArrowRight':
					movePlayer('right');
					break;
			}
		});
	</script>
</body>
</html>