Running on water game's game

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

No:3308

1044

←

Prev Next

→

Running on water game
Developer User3655｜Date and time 23/6/24 12:40:54
Build time 19.608 sec｜Game capacity 2.09KB｜

Script

🏃

←

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>
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 50px;
		}
		.box {
			position: absolute;
			background-color: blue;
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="player">🏃</div>
	<script>
		let player = document.getElementById("player");
		let position = 0;
		let move = 10;
		let boxes = [];
		
		window.addEventListener("keydown", (event) => {
			if(event.key === "ArrowRight") {
				movePlayer("right");
			}
			else if(event.key === "ArrowLeft") {
				movePlayer("left");
			}
		});
		
		function movePlayer(direction) {
			if(direction === "right") {
				if(position < document.body.clientWidth - 100) {
					position += move;
				}
			} else if(direction === "left") {
				if(position > 0) {
					position -= move;
				}
			}
			player.style.left = position + "px";
		}
		
		function createBox() {
			let box = document.createElement("div");
			box.className = "box";
			box.style.top = "-100px";
			box.style.left = Math.floor(Math.random() * (document.body.clientWidth - 100)) + "px";
			document.body.appendChild(box);
			boxes.push(box);
		}
		
		function moveBoxes() {
			boxes.forEach((box, index) => {
				let top = parseInt(box.style.top) + move;
				box.style.top = top + "px";
				if(collision(player, box)) {
					alert("ゲームオーバー");
					location.reload();
				}
				if(top > document.body.clientHeight) {
					document.body.removeChild(box);
					boxes.splice(index, 1);
				}
			});
		}
		
		function collision(player, box) {
			let playerRect = player.getBoundingClientRect();
			let boxRect = box.getBoundingClientRect();
			return !(
				(playerRect.bottom < boxRect.top) ||
				(playerRect.top > boxRect.bottom) ||
				(playerRect.right < boxRect.left) ||
				(playerRect.left > boxRect.right)
			);
		}
		
		setInterval(() => {
			createBox();
		}, 1000);
		setInterval(() => {
			moveBoxes();
		}, 50);
	</script>
</body>
</html>