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

No:599

238

←

Prev Next

→

A game where a princess is trapped by a monkey a..ALL
Developer User3050｜Date and time 23/6/16 7:56:32
Build time 32.822 sec｜Game capacity 2.858KB｜

Script

Save the Princess Game

A game where a princess is trapped by a monkey and a plumber saves her. Help the plumber save the princess!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Save the Princess Game</title>
</head>
<body>
	<h1>Save the Princess Game</h1>
	<p>A game where a princess is trapped by a monkey and a plumber saves her. Help the plumber save the princess!</p>
	<div id="game">
		<div id="princess"></div>
		<div id="plumber"></div>
		<div id="monkey"></div>
	</div>
	<button id="left">Move Left</button>
	<button id="right">Move Right</button>
	<button id="jump">Jump</button>
	<script>
		// Add emojis to the game
		document.getElementById("princess").innerHTML = "👸";
		document.getElementById("plumber").innerHTML = "👷";
		document.getElementById("monkey").innerHTML = "🐒";

// Set initial position of the characters
		var princessPosition = 0;
		var plumberPosition = 0;
		var monkeyPosition = 5;

// Move the plumber to the left
		document.getElementById("left").addEventListener("click", function() {
			plumberPosition -= 1;
			if (plumberPosition < 0) {
				plumberPosition = 0;
			}
			document.getElementById("plumber").style.left = plumberPosition * 50 + "px";
		});

// Move the plumber to the right
		document.getElementById("right").addEventListener("click", function() {
			plumberPosition += 1;
			if (plumberPosition > 9) {
				plumberPosition = 9;
			}
			document.getElementById("plumber").style.left = plumberPosition * 50 + "px";
		});

// Make the plumber jump
		document.getElementById("jump").addEventListener("click", function() {
			document.getElementById("plumber").classList.add("jump");
			setTimeout(function() {
				document.getElementById("plumber").classList.remove("jump");
			}, 1000);
		});

// Check if the plumber has reached the princess
		setInterval(function() {
			if (plumberPosition === princessPosition) {
				alert("Congratulations! You saved the princess!");
				window.location.reload();
			}
		}, 100);

// Move the monkey randomly
		setInterval(function() {
			var direction = Math.floor(Math.random() * 3) - 1;
			monkeyPosition += direction;
			if (monkeyPosition < 0) {
				monkeyPosition = 0;
			}
			if (monkeyPosition > 9) {
				monkeyPosition = 9;
			}
			document.getElementById("monkey").style.left = monkeyPosition * 50 + "px";
			// Check if the monkey has caught the plumber
			if (plumberPosition === monkeyPosition) {
				alert("Game over! The monkey caught you!");
				window.location.reload();
			}
		}, 1000);
	</script>
	<style>
		#game {
			width: 500px;
			height: 250px;
			position: relative;
			border: 1px solid black;
		}
		#princess, #plumber, #monkey {
			width: 50px;
			height: 50px;
			position: absolute;
			bottom: 0;
		}
		#princess {
			left: 0;
			background-color: pink;
		}
		#plumber {
			left: 250px;
			background-color: blue;
		}
		#monkey {
			left: 250px;
			background-color: brown;
		}
		.jump {
			bottom: 50px;
			transition: bottom 1s;
		}
	</style>
</body>
</html>