実験エフェクトを沢山出すクリアで一面緑にするゲームオーバーで黒にする花火を避ける's game

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

No:2675

4474

←

Prev Next

→

実験エフェクトを沢山出すクリアで一面緑にするゲームオーバーで黒にする花火を避ける
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 2100 sec｜Game capacity 2.1KB｜

Script

👦

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>花火を避けるゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #6BE30B;
		}
		#player {
			position: absolute;
			top: 80%;
			left: 50%;
			transform: translate(-50%);
			font-size: 2em;
			text-align: center;
			cursor: pointer;
			user-select: none;
		}
		#fireworks {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}
	</style>
</head>
<body>
	<div id="player">👦</div>
	<div id="fireworks"></div>
	<script>
		var player = document.getElementById("player");
		var fireworks = document.getElementById("fireworks");
		var fireworkInterval;

function createFirework() {
			var fw = document.createElement("div");
			fw.innerHTML = "🎆";
			fw.style.position = "absolute";
			fw.style.top = "50%";
			fw.style.left = Math.round(Math.random() * 100) + "%";
			fw.style.fontSize = Math.round(Math.random() * 3 + 1) + "em";
			fw.style.animationDuration = Math.round(Math.random() * 3 + 1) + "s";
			fw.style.animationTimingFunction = "cubic-bezier(.2,.8,.2,1)";
			fw.style.pointerEvents = "none";
			fireworks.appendChild(fw);
			setTimeout(function() {
				fw.parentNode.removeChild(fw);
			}, parseInt(fw.style.animationDuration) * 1000);
			checkCollision();
		}

fireworkInterval = setInterval(createFirework, 1000);

document.addEventListener("mousemove", function(e) {
			player.style.left = e.clientX + "px";
		});
	</script>
</body>
</html>