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

No:1068

135

←

Prev Next

→

The game to eradicate all advertisements in the wo..ALL
Developer User3232｜Date and time 23/6/18 1:28:48
Build time 33.384 sec｜Game capacity 2.95KB｜

Script

以下が、スマートフォンで操作できるアプリの例であります。

広告ブロッカーゲーム

広告を全て撲滅するゲームです！

スコア： 0

このアプリは、広告を表示するボタンを叩くことで、スコアを加算していくゲームになっています。スコアが10点以上になると、広告を表示するボタンが無効になり、リセットボタンが表示されます。リセットボタンをクリックすると、ゲームがリセットされ、スタートボタンが再度表示されます。絵文字は使用していませんが、ボタンには緑色のハートマークが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下が、スマートフォンで操作できるアプリの例であります。

<!DOCTYPE html>
<html>
<head>
	<title>Ad Blocker Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #FFD700;
		}

button {
			font-size: 1em;
			background-color: #3CB371;
			padding: 1em;
			border: none;
			border-radius: 0.5em;
			color: #FFF;
			transition: all 0.3s ease-in-out;
			cursor: pointer;
		}

button:hover {
			background-color: #2E8B57;
		}

#ad {
			font-size: 4em;
			margin-top: 2em;
		}

#score {
			font-size: 3em;
			margin-top: 1em;
			background-color: #000;
			color: #FFF;
			padding: 0.5em 1em;
			border-radius: 0.5em;
		}

.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<h1>広告ブロッカーゲーム</h1>
	<p>広告を全て撲滅するゲームです！</p>
	<p>スコア： <span id="score">0</span></p>
	<button id="ad">広告を叩く</button>
	<button id="start" class="hidden">スタート！</button>
	<button id="reset" class="hidden">リセット</button>
	<script>
		let score = 0;

window.onload = function() {
			document.getElementById("start").addEventListener("click", startGame);
			document.getElementById("ad").addEventListener("click", hitAd);
			document.getElementById("reset").addEventListener("click", resetGame);
		}

function startGame() {
			document.getElementById("ad").disabled = false;
			document.getElementById("start").classList.add("hidden");
			document.getElementById("score").innerText = 0;
			score = 0;
			spawnAd();
		}

function spawnAd() {
			document.getElementById("ad").disabled = true;
			setTimeout(function() {
				document.getElementById("ad").disabled = false;
				document.getElementById("ad").classList.remove("hidden");
			}, Math.random() * 2000 + 1000);
		}

function hitAd() {
			score++;
			document.getElementById("score").innerText = score;
			document.getElementById("ad").classList.add("hidden");
			spawnAd();
			if (score >= 10) {
				document.getElementById("ad").disabled = true;
				document.getElementById("reset").classList.remove("hidden");
			}
		}

function resetGame() {
			document.getElementById("start").classList.remove("hidden");
			document.getElementById("reset").classList.add("hidden");
		}
	</script>
</body>
</html>