モグラ叩きゲーム

制限時間：30秒
現在のスコア：0ポイント
JavaScriptを使ってモグラ叩きゲームを作ります。以下がゲームの仕様です。

- 9つの穴があり、ランダムなタイミングでモグラが頭を出します。
- モグラが頭を出したら、クリックして叩いてください。
- モグラを叩くと1ポイント加算されます。
- 時間制限があり、制限時間内に何ポイント取れるか競います。
- 制限時間内にクリックできなかった場合はゲームオーバーとなります。

さあ、モグラを叩く準備はできましたか？いざ、叩きましょう！

以下が実際のゲームのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>モグラ叩きゲーム</title>
	<meta charset="UTF-8">
</head>
<body>
	<h1>モグラ叩きゲーム</h1>
	<p>制限時間：<span id="time-remaining">30</span>秒</p>
	<p>現在のスコア：<span id="score">0</span>ポイント</p>

	<div id="game-area">
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
		<div class="hole"></div>
	</div>

	<script>
		// 設定
		const HOLES = document.querySelectorAll('.hole');
		const MOLE = document.querySelectorAll('.mole');
		const TIME_LIMIT = 30;
		const SCORE_INCREMENT = 1;

		// 変数
		let timeRemaining = TIME_LIMIT;
		let score = 0;
		let moleIntervalId = null;
		let timeIntervalId = null;
		let lastHole = null;

		// 関数
		function randomHole(holes) {
			const index = Math.floor(Math.random() * holes.length);
			const hole = holes[index];

			// 直前と同じ穴には出さない
			if (hole === lastHole) {
				return randomHole(holes);
			}

			lastHole = hole;
			return hole;
		}

		function peep() {
			const hole = randomHole(HOLES);
			const time = Math.random() * 1200 + 400;
			hole.classList.add('up');

			// モグラを穴から頭を出す
			setTimeout(() => {
				hole.classList.remove('up');
				if (!timeRemaining <= 0) {
					peep();
				}
			}, time);
		}

		function startGame() {
			timeRemaining = TIME_LIMIT;
			score = 0;
			updateScore();
			updateTimeRemaining();

			// モグラを出す
			peep();

			// 制限時間をカウントダウンする
			timeIntervalId = setInterval(() => {
				timeRemaining--;
				updateTimeRemaining();

				if (timeRemaining <= 0) {
					endGame();
				}
			}, 1000);
		}

		function endGame() {
			clearInterval(moleIntervalId);
			clearInterval(timeIntervalId);
			alert("ゲームオーバー！あなたのスコアは" + score + "ポイントでした。");
		}

		function updateScore() {
			const scoreBoard = document.getElementById('score');
			scoreBoard.textContent = score;
		}

		function updateTimeRemaining() {
			const timeRemainingBoard = document.getElementById('time-remaining');
			timeRemainingBoard.textContent = timeRemaining;
		}

		function bonk(event) {
			if (!event.isTrusted) {
				return;
			}
			// スコアを加算する
			score += SCORE_INCREMENT;
			updateScore();

			// モグラを穴に戻す
			this.classList.remove('up');
		}

		// イベントリスナーの設定
		MOLE.forEach(mole => mole.addEventListener('click', bonk));

		startGame();
	</script>

	<style>
		* {
			box-sizing: border-box;
		}

		body {
			padding: 20px;
			font-size: 24px;
			background-color: lightgreen;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		h1 {
			margin: 0;
		}

		#game-area {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;
			width: 600px;
			height: 400px;
			justify-content: center;
			align-items: center;
		}

		.hole {
			width: 150px;
			height: 150px;
			margin: 10px;
			background-image: url('https://cdn.pixabay.com/photo/2016/04/01/11/08/animal-1307606_960_720.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center bottom;
			cursor: pointer;
		}

		.mole {
			width: 150px;
			height: 150px;
			margin: 10px;
			background-image: url('https://cdn.pixabay.com/photo/2016/04/01/11/08/animal-1307606_960_720.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center top;
			transition: transform 0.2s;
			will-change: transform;
		}

		.mole.up {
			transform: translateY(-100%);
		}
	</style>
</body>
</html>
```

※注意：このコードはオンラインでは試さないでください！自己責任で試してみる場合は、必ずローカル環境で行ってください。また、安全性のために、外部JavaScriptファイルや外部CSSファイルを使用しないようにしてください。