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

No:3238

710

←

Prev Next

→

Destructive Economy💥.
Developer User3589｜Date and time 23/6/24 9:41:29
Build time 22.527 sec｜Game capacity 2.252KB｜

Script

破壊経済💥

スコア：0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>破壊経済</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #ffcc99;
			text-align: center;
		}

h1 {
			font-size: 3rem;
			margin-top: 50px;
			color: #990000;
		}

#container {
			margin: auto;
			margin-top: 50px;
			width: 80%;
			height: 500px;
			background-color: #ffffff;
			border: 3px solid #990000;
			position: relative;
		}

#score {
			position: absolute;
			top: 20px;
			left: 20px;
			font-size: 2rem;
			color: #990000;
			font-weight: bold;
		}

.bomb {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #ff3333;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
			animation-name: bomb-fall;
			animation-duration: 1s;
			animation-timing-function: ease-out;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-play-state: paused;
		}

@keyframes bomb-fall {
			from {
				top: -50px;
			}

to {
				top: 100%;
			}
		}

.bomb:hover {
			animation-play-state: running;
		}

@keyframes bomb-explode {
			from {
				transform: scale(1);
				background-color: #ff3333;
			}

to {
				transform: scale(3);
				background-color: #ffff00;
			}
		}

.bomb.exploded {
			animation-name: bomb-explode;
			animation-duration: 500ms;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
			z-index: 10;
		}
	</style>
</head>
<body>
	<h1>破壊経済💥</h1>
	<div id="container">
		<div id="score">スコア：<span id="score-value">0</span></div>
	</div>

function addScore() {
			score += 1;
			document.querySelector("#score-value").textContent = score;
		}

function explode(bomb) {
			bomb.classList.add("exploded");
			setTimeout(() => {
				bomb.remove();
			}, 500);
		}

function createBomb() {
			let bomb = document.createElement("div");
			bomb.classList.add("bomb");
			bomb.addEventListener("click", () => {
				addScore();
				explode(bomb);
			});
			document.querySelector("#container").appendChild(bomb);
		}

setInterval(() => {
			createBomb();
		}, 1000);
	</script>
</body>
</html>