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

No:3463

6917

←

Prev Next

→

Lots of bees coming out of the hive.
Developer User3707｜Date and time 23/6/25 5:59:48
Build time 21.851 sec｜Game capacity 1.58KB｜

Script

BEEHIVE

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Beehive Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #FDD835;
		}
		.beehive {
			width: 100px;
			height: 100px;
			background-color: #8D6E63;
			position: relative;
			margin: 100px auto;
			border-radius: 50%;
		}
		.beehive h1 {
			text-align: center;
			font-family: Arial, sans-serif;
			color: #FFFFFF;
			margin-top: 35%;
		}
		.bee {
			width: 30px;
			height: 30px;
			background-color: #FFA000;
			position: absolute;
			border-radius: 50%;
			animation: moveBee 4s infinite;
			opacity: 0;
		}
		@keyframes moveBee {
			0% {
				transform: translate(0,0);
				opacity: 0;
			}
			50% {
				transform: translate(100px,0);
				opacity: 1;
			}
			100% {
				transform: translate(0,0);
				opacity: 0;
			}
		}
	</style>
	<script>
		window.onload = function() {
			var beehive = document.getElementById("beehive");
			var score = 0;

beehive.addEventListener("click", function() {
				var bee = document.createElement("div");
				bee.className = "bee";
				bee.style.left = Math.random() * 70 + 15 + "px";
				bee.style.top = Math.random() * 70 + 15 + "px";
				beehive.appendChild(bee);
				score++;
				document.getElementById("score").innerHTML = "Score: " + score;
				setTimeout(function() {
					beehive.removeChild(bee);
				}, 4000);
			});
		};
	</script>
</head>
<body>
	<div class="beehive" id="beehive">
		<h1>BEEHIVE</h1>
	</div>
	<div id="score" style="text-align: center; font-size: 24px; color: #FFFFFF;">Score: 0</div>
</body>
</html>