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

No:3494

6906

←

Prev Next

→

Your a mouse and you need to get the cheese to esc..ALL
Developer User3710｜Date and time 23/6/25 6:56:10
Build time 54.612 sec｜Game capacity 5.712KB｜

Script

Maze Game

Use swipe gestures or arrow keys to move.

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Maze Game</title>
	<style>
		body {
			background-color: #212121;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			margin: auto;
			display: block;
		}
	</style>
</head>
<body>
	<h1>Maze Game</h1>
	<canvas id="canvas"></canvas>
	<p>Use swipe gestures or arrow keys to move.</p>
	
	<script>
		// Set up canvas
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		canvas.width = window.innerWidth * 0.8;
		canvas.height = canvas.width * 0.6;
		
		// Mouse position
		var mouseX, mouseY;
		
		// Mouse image
		var mouseImg = new Image();
		mouseImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/mouse-face_1f42d.png";
		
		// Cheese image
		var cheeseImg = new Image();
		cheeseImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cheese-wedge_1f9c0.png";
		
		// Cat image
		var catImg = new Image();
		catImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cat-face_1f431.png";
		
		// Game objects
		var mouse = {x: 50, y: 50, speed: 5};
		var cheese = {x: canvas.width - 100, y: canvas.height - 100};
		var cat = {x: canvas.width / 2, y: canvas.height / 2, speed: 3};
		
		// Maze
		var maze = [
			{x: 0, y: 0, w: canvas.width, h: 30},
			{x: 0, y: 0, w: 30, h: canvas.height},
			{x: canvas.width - 30, y: 0, w: 30, h: canvas.height},
			{x: 0, y: canvas.height - 30, w: canvas.width, h: 30},
			{x: 100, y: 50, w: 30, h: 100},
			{x: canvas.width / 2 - 50, y: canvas.height / 2 - 50, w: 100, h: 100},
			{x: canvas.width - 150, y: canvas.height / 2 - 50, w: 100, h: 100},
			{x: 50, y: canvas.height - 150, w: 100, h: 100},
			{x: canvas.width / 2 - 50, y: 150, w: 100, h: 100}
		];
		
		// Draw maze
		function drawMaze() {
			ctx.fillStyle = "#000";
			for (var i = 0; i < maze.length; i++) {
				ctx.fillRect(maze[i].x, maze[i].y, maze[i].w, maze[i].h);
			}
		}
		
		// Move mouse
		function moveMouse(e) {
			// Get mouse position
			if (e.type == "touchmove") {
				mouseX = e.touches[0].clientX - canvas.offsetLeft;
				mouseY = e.touches[0].clientY - canvas.offsetTop;
			} else {
				mouseX = e.clientX - canvas.offsetLeft;
				mouseY = e.clientY - canvas.offsetTop;
			}
			// Calculate direction
			var dx = mouseX - mouse.x;
			var dy = mouseY - mouse.y;
			var dist = Math.sqrt(dx*dx + dy*dy);
			var dirX = dx / dist;
			var dirY = dy / dist;
			// Check maze collision
			var collision = false;
			for (var i = 0; i < maze.length; i++) {
				if (collisionRect(mouse.x + dirX * mouse.speed, mouse.y, mouseImg.width, mouseImg.height, maze[i].x, maze[i].y, maze[i].w, maze[i].h)) {
					collision = true;
					break;
				}
			}
			if (!collision) {
				mouse.x += dirX * mouse.speed;
			}
			collision = false;
			for (var i = 0; i < maze.length; i++) {
				if (collisionRect(mouse.x, mouse.y + dirY * mouse.speed, mouseImg.width, mouseImg.height, maze[i].x, maze[i].y, maze[i].w, maze[i].h)) {
					collision = true;
					break;
				}
			}
			if (!collision) {
				mouse.y += dirY * mouse.speed;
			}
		}
		
		// Move cat
		function moveCat() {
			// Calculate direction
			var dx = mouse.x - cat.x;
			var dy = mouse.y - cat.y;
			var dist = Math.sqrt(dx*dx + dy*dy);
			var dirX = dx / dist;
			var dirY = dy / dist;
			// Check maze collision
			var collision = false;
			for (var i = 0; i < maze.length; i++) {
				if (collisionRect(cat.x + dirX * cat.speed, cat.y, catImg.width, catImg.height, maze[i].x, maze[i].y, maze[i].w, maze[i].h)) {
					collision = true;
					break;
				}
			}
			if (!collision) {
				cat.x += dirX * cat.speed;
			}
			collision = false;
			for (var i = 0; i < maze.length; i++) {
				if (collisionRect(cat.x, cat.y + dirY * cat.speed, catImg.width, catImg.height, maze[i].x, maze[i].y, maze[i].w, maze[i].h)) {
					collision = true;
					break;
				}
			}
			if (!collision) {
				cat.y += dirY * cat.speed;
			}
		}
		
		// Check collision between two rectangles
		function collisionRect(x1, y1, w1, h1, x2, y2, w2, h2) {
			if (x1 + w1 >= x2 && x1 <= x2 + w2 && y1 + h1 >= y2 && y1 <= y2 + h2) {
				return true;
			} else {
				return false;
			}
		}
		
		// Game loop
		function gameLoop() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			// Draw maze
			drawMaze();
			// Draw cheese
			ctx.drawImage(cheeseImg, cheese.x, cheese.y);
			// Draw cat
			ctx.drawImage(catImg, cat.x, cat.y);
			// Move cat
			moveCat();
			// Draw mouse
			ctx.drawImage(mouseImg, mouse.x, mouse.y);
			// Check collision with cheese
			if (collisionRect(mouse.x, mouse.y, mouseImg.width, mouseImg.height, cheese.x, cheese.y, cheeseImg.width, cheeseImg.height)) {
				alert("You win!");
			}
			// Check collision with cat
			if (collisionRect(mouse.x, mouse.y, mouseImg.width, mouseImg.height, cat.x, cat.y, catImg.width, catImg.height)) {
				alert("You lose!");
			}
			// Request animation frame
			requestAnimationFrame(gameLoop);
		}
		
		// Start game loop
		requestAnimationFrame(gameLoop);
		
		// Add event listeners
		canvas.addEventListener("touchmove", moveMouse);
		canvas.addEventListener("mousemove", moveMouse);
		
		// Keyboard controls
		document.addEventListener("keydown", function(e) {
			switch (e.keyCode) {
				case 37: // left
					mouse.x -= mouse.speed;
					break;
				case 38: // up
					mouse.y -= mouse.speed;
					break;
				case 39: // right
					mouse.x += mouse.speed;
					break;
				case 40: // down
					mouse.y += mouse.speed;
					break;
			}
		});
	</script>
</body>
</html>