AI game creator

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

No:2995

259

←

Prev Next

→

Jumping over holes
Developer User3651｜Date and time 23/6/23 10:58:20
Build time 18.771 sec｜Game capacity 1.687KB｜

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>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
		}
		#game {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 5rem;
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			animation: jump 1s infinite alternate;
			font-size: 4rem;
			transition: transform 0.1s;
		}
		#hole {
			position: absolute;
			bottom: 100px;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #666;
			animation: hole 2s linear infinite;
		}
		@keyframes jump {
			from {
				transform: translate(0, 0);
			}
			to {
				transform: translate(0, -50px);
			}
		}
		@keyframes hole {
			from {
				transform: translateY(0);
			}
			to {
				transform: translateY(200px);
			}
		}
	</style>
</head>
<body>
	<div id="game">
		<div id="player">🤾‍♀️</div>
		<div id="hole"></div>
		<p>タップでジャンプ！</p>
	</div>
	<script>
		var player = document.getElementById("player");
		var hole = document.getElementById("hole");

document.addEventListener("click", function() {
			player.style.transform = "translateY(-50px)";
			setTimeout(function() {
				player.style.transform = "translateY(0)";
			}, 800);

var holeTop = parseInt(window.getComputedStyle(hole, null).getPropertyValue("transform").split(",")[5].trim());
			if (holeTop > 0 && holeTop < 100) {
				alert("ゲームオーバー！");
				location.reload();
			}
		});
	</script>
</body>
</html>