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

No:1757

1372

←

Prev Next

→

Explosion game if you tap a lot
Developer User3403｜Date and time 23/6/19 0:31:40
Build time 20.576 sec｜Game capacity 2.307KB｜

Script

たくさんタップしたら爆発するゲーム

爆弾

💥

このアプリは「たくさんタップしたら爆発するゲーム」で、赤いボタンをタップするとカウントが1増えます。カウントが30に達すると、赤いボタンが消えて爆発アニメーションが表示されます。スマホで操作することを前提として、ボタンをタップしやすい大きさにし、絵文字を使ってわかりやすくしました。アプリ自体は1枚のHTMLファイルにJavaScriptを含んでいます。

←

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">
	<style>
		body {
			background-color: #ffd700;
		}
		h1 {
			font-size: 3rem;
			text-align: center;
			padding-top: 2rem;
			margin-bottom: 2rem;
		}
		#counter {
			font-size: 5rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 2rem;
		}
		#red-button {
			background-color: #ff0000;
			color: white;
			font-size: 2rem;
			font-weight: bold;
			width: 10rem;
			height: 10rem;
			border-radius: 50%;
			display: block;
			margin: 0 auto;
			text-align: center;
			line-height: 10rem;
			box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
			cursor: pointer;
		}
		#red-button:active {
			box-shadow: none;
			transform: scale(0.95);
		}
		#explosion {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: none;
			font-size: 7rem;
			font-weight: bold;
			color: #ff0000;
			animation: explode 2s infinite;
		}
		@keyframes explode {
			0% {
				transform: translate(-50%, -50%) rotate(0deg);
			}
			50% {
				transform: translate(-50%, -50%) rotate(180deg);
			}
			100% {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<h1>たくさんタップしたら爆発するゲーム</h1>
	<div id="counter">0</div>
	<div id="red-button">爆弾</div>
	<div id="explosion">💥</div>
	<script>
		var count = 0;
		document.getElementById("red-button").addEventListener("click", function() {
			count++;
			document.getElementById("counter").innerHTML = count;
			if (count >= 30) {
				document.getElementById("red-button").style.display = "none";
				document.getElementById("explosion").style.display = "block";
			}
		});
	</script>
</body>
</html>