The player is in a corridor with a blind monster which will walk around the corridor. If you touch the blind monster you die. The player must find 5 books scattered around the corridor without touching the blind monster to escape.'s game

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

No:3501

1298

←

Prev Next

→

The player is in a corridor with a blind monster w..ALL
Developer User3709｜Date and time 23/6/25 8:46:35
Build time 43.847 sec｜Game capacity 5.106KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Blind Monster Game</title>
	<style>
		body {
			margin: auto;
			padding: 0;
			background-color: #666;
		}
		#corridor {
			margin: auto;
			margin-top: 50px;
			background-color: white;
			width: 400px;
			height: 300px;
			position: relative;
		}
		#player {
			background-color: yellow;
			width: 20px;
			height: 20px;
			position: absolute;
			left: 10px;
			top: 20px;
		}
		#monster {
			background-color: red;
			width: 30px;
			height: 30px;
			position: absolute;
			left: 200px;
			top: 150px;
			border-radius: 50%;
		}
		.book {
			background-color: green;
			width: 20px;
			height: 20px;
			position: absolute;
			border-radius: 50%;
		}
		#book-1 {
			left: 50px;
			top: 100px;
		}
		#book-2 {
			left: 250px;
			top: 150px;
		}
		#book-3 {
			left: 150px;
			top: 50px;
		}
		#book-4 {
			left: 150px;
			top: 250px;
		}
		#book-5 {
			left: 350px;
			top: 200px;
		}
	</style>
	<script>
		window.onload = function() {

// get references to elements
			var corridor = document.getElementById("corridor");
			var player = document.getElementById("player");
			var monster = document.getElementById("monster");
			var books = document.getElementsByClassName("book");

// function to check if player touches monster or book
			function checkCollision(element) {
				var playerLeft = parseInt(player.style.left);
				var playerTop = parseInt(player.style.top);
				var elementLeft = parseInt(element.style.left);
				var elementTop = parseInt(element.style.top);
				var distance = Math.sqrt(Math.pow(playerLeft-elementLeft, 2) + Math.pow(playerTop-elementTop, 2));
				if (distance <= 25) {
					return true;
				}
				return false;
			}

// function to move monster randomly
			function moveMonster() {
				var direction = Math.floor(Math.random() * 4); // 0=left, 1=up, 2=right, 3=down
				switch(direction) {
					case 0: // left
						var left = parseInt(monster.style.left);
						if (left > 0) {
							monster.style.left = (left - 10) + "px";
						}
						break;
					case 1: // up
						var top = parseInt(monster.style.top);
						if (top > 0) {
							monster.style.top = (top - 10) + "px";
						}
						break;
					case 2: // right
						var left = parseInt(monster.style.left);
						if (left < 370) { // 400 (corridor width) - 30 (monster width)
							monster.style.left = (left + 10) + "px";
						}
						break;
					case 3: // down
						var top = parseInt(monster.style.top);
						if (top < 270) { // 300 (corridor height) - 30 (monster height)
							monster.style.top = (top + 10) + "px";
						}
						break;
				}

// check for collision with player
				if (checkCollision(monster)) {
					alert("You've been caught by the blind monster! Game over.");
					location.reload(); // reload page to restart game
				}
			}

setInterval(moveMonster, 1000); // move monster every second

// function to check if player has found all books
			function checkWin() {
				for (var i = 0; i < books.length; i++) {
					if (!books[i].classList.contains("found")) {
						return false;
					}
				}
				alert("You've found all the books and escaped the blind monster! You win.");
				location.reload(); // reload page to restart game
			}

// function to check for collision with books
			function checkBooks() {
				for (var i = 0; i < books.length; i++) {
					if (!books[i].classList.contains("found") && checkCollision(books[i])) {
						books[i].classList.add("found");
						alert("You've found a book!");
						checkWin();
						return;
					}
				}
			}

setInterval(checkBooks, 100); // check for collision with books every 100 milliseconds

// function to handle player movement
			function handleMovement(e) {
				e.preventDefault();
				switch(e.keyCode) {
					case 37: // left
						var left = parseInt(player.style.left);
						if (left > 0) {
							player.style.left = (left - 10) + "px";
						}
						break;
					case 38: // up
						var top = parseInt(player.style.top);
						if (top > 0) {
							player.style.top = (top - 10) + "px";
						}
						break;
					case 39: // right
						var left = parseInt(player.style.left);
						if (left < 380) { // 400 (corridor width) - 20 (player width)
							player.style.left = (left + 10) + "px";
						}
						break;
					case 40: // down
						var top = parseInt(player.style.top);
						if (top < 280) { // 300 (corridor height) - 20 (player height)
							player.style.top = (top + 10) + "px";
						}
						break;
				}

// check for collision with monster
				if (checkCollision(monster)) {
					alert("You've been caught by the blind monster! Game over.");
					location.reload(); // reload page to restart game
				}
			}

document.addEventListener("keydown", handleMovement); // listen for arrow key presses

};
	</script>
</head>
<body>
	<div id="corridor">
		<div id="player"></div>
		<div id="monster"></div>
		<div class="book" id="book-1"></div>
		<div class="book" id="book-2"></div>
		<div class="book" id="book-3"></div>
		<div class="book" id="book-4"></div>
		<div class="book" id="book-5"></div>
	</div>
</body>
</html>