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

No:1642

428

←

Prev Next

→

Tap to hit the enemy for ten seconds.
Developer User3333｜Date and time 23/6/18 20:48:03
Build time 33.484 sec｜Game capacity 3.312KB｜

Script

十秒間の殴りゲーム

🤬

残り秒数: 10

このゲームは、１０秒間でタップを使って敵をできるだけ殴るゲームです。プレイヤーは画面上に表示される敵の絵文字をタップし、殴ってスコアを稼ぎます。制限時間が終了した後にプレイヤーのスコアが表示されます。なお、タイマーとスコアはリアルタイムに更新されます。

←

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 {
			text-align: center;
			background-color: #f9f9f9;
		}
		h1 {
			font-size: 36px;
			margin-top: 60px;
			margin-bottom: 30px;
		}
		#enemy {
			display: inline-block;
			width: 200px;
			height: 200px;
			margin-bottom: 50px;
			user-select: none;
			cursor: pointer;
		}
		#timer {
			font-size: 24px;
			margin-bottom: 20px;
		}
		#score {
			font-size: 48px;
			color: #00bfff;
			margin-bottom: 60px;
		}
		button {
			font-size: 24px;
			padding: 10px 20px;
			background-color: #00bfff;
			color: #fff;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>十秒間の殴りゲーム</h1>
	<div id="enemy" onclick="whack()">🤬</div>
	<div id="timer">残り秒数: <span id="seconds">10</span></div>
	<div id="score">0</div>
	<button onclick="start()">スタート</button>
	<script>
		var secondsLeft;
		var score = 0;
		var timerId;

function start() {
			score = 0;
			document.getElementById("score").innerHTML = score;
			secondsLeft = 10;
			document.getElementById("seconds").innerHTML = secondsLeft;
			timerId = setInterval(countdown, 1000);
			document.getElementById("enemy").style.display = "inline-block";
			document.getElementById("enemy").style.animation = "shake 0.5s linear infinite alternate";
			document.getElementById("enemy").style.cursor = "pointer";
			document.getElementById("enemy").style.color = "#000";
			document.getElementById("enemy").innerHTML = "🤬";
			document.getElementById("enemy").setAttribute("onclick", "whack()");
			document.getElementById("enemy").setAttribute("disabled", false);
		}

function countdown() {
			secondsLeft--;
			document.getElementById("seconds").innerHTML = secondsLeft;
			if (secondsLeft == 0) {
				clearInterval(timerId);
				document.getElementById("enemy").setAttribute("disabled", true);
				document.getElementById("enemy").style.cursor = "default";
				document.getElementById("enemy").style.color = "#ccc";
				document.getElementById("enemy").innerHTML = "";
				document.getElementById("enemy").style.animation = "";
				alert("タイムアップ！あなたのスコアは" + score + "点です！");
			}
		}

function whack() {
			score++;
			document.getElementById("score").innerHTML = score;
			document.getElementById("enemy").style.animation = "shake 0.2s linear";
			document.getElementById("enemy").innerHTML = "🤭";
			document.getElementById("enemy").removeAttribute("onclick");
			setTimeout(function() {
				document.getElementById("enemy").style.animation = "shake 0.5s linear infinite alternate";
				document.getElementById("enemy").innerHTML = "🤬";
				document.getElementById("enemy").setAttribute("onclick", "whack()");
			}, 500);
		}
	</script>
</body>
</html>