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

No:708

225

←

Prev Next

→

whack-a-mole (game)
Developer User3096｜Date and time 23/6/17 14:12:08
Build time 26.543 sec｜Game capacity 2.02KB｜

Script

くまのもぐらたたき

🐻

スコア: 0

「くまのもぐらたたき」は、くまがもぐらを叩くゲームです。プレイヤーはクマをタップし、もぐらが出てきたらすぐにタップして叩くことができます。一度ももぐらを叩き損ねずに連続で叩くと、スコアが上がります。スマホで遊べるよう、タップ操作に対応しています。絵文字を多用し、可愛らしい雰囲気を演出しています。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>くまのもぐらたたき</title>
	<style>
		body {
			font-size: 20px;
			text-align: center;
			margin-top: 50px;
		}
		#gameBox {
			display: inline-block;
			height: 300px;
			width: auto;
			border: 5px solid brown;
			border-radius: 10px;
			background-color: #fffacd;
			padding-top: 40px;
			position: relative;
		}
		#mole {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			font-size: 50px;
			user-select: none;
		}
		#score {
			font-size: 30px;
			margin-bottom: 20px;
			color: brown;
		}
	</style>
</head>
<body>
	<h1>くまのもぐらたたき</h1>
	<div id="gameBox">
		<div id="mole" onclick="hitMole()">🐻</div>
	</div>
	<div id="score">スコア: 0</div>
	<script>
		let score = 0;
		let mole;
		let timeOut;

function showMole() {
			let x = Math.floor(Math.random() * (document.getElementById("gameBox").clientWidth - 100));
			let y = Math.floor(Math.random() * (document.getElementById("gameBox").clientHeight - 100));
			mole.style.top = y + "px";
			mole.style.left = x + "px";
			mole.style.display = "block";
			timeOut = setTimeout(function(){
				mole.style.display = "none";
				showMole();
			}, 3000);
		}

function hitMole() {
			if (mole.style.display === "block") {
				score += 100;
				document.getElementById("score").innerHTML = "スコア: " + score;
				mole.style.display = "none";
			}
		}

document.addEventListener("DOMContentLoaded", function() {
			mole = document.getElementById("mole");
			showMole();
		});
	</script>
</body>
</html>