🎮ノバクエスト🎮
30秒
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モグラたたきゲーム</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; background-color: #888; margin: 0 auto; text-align: center;">
<h1 style="color: white;">🎮ノバクエスト🎮</h1>
<div id="game" style="position: relative; width: 100%; height: 300px;">
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
<div class="circle" style="width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute;" onclick="hitCircle(this)"></div>
</div>
<button onclick="startGame()" style="margin-top: 10px; font-size: 20px; padding: 10px;">▶️スタート</button>
<div id="time" style="font-size: 20px; margin-top: 10px; color: white;">30秒</div>
</div>
<script>
let timer;
let gameInterval;
let remainingTime = 30;
let activeCircle = null;
const circles = document.querySelectorAll('.circle');
function startGame() {
remainingTime = 30;
document.getElementById('time').innerText = remainingTime + "秒";
timer = setInterval(countdown, 1000);
gameInterval = setInterval(randomizeCircle, 500);
circles.forEach(circle => circle.style.backgroundColor = 'white');
}
function countdown() {
remainingTime--;
document.getElementById('time').innerText = remainingTime + "秒";
if (remainingTime <= 0) {
clearInterval(timer);
clearInterval(gameInterval);
alert("ゲームオーバー!✨🎉");
}
}
function randomizeCircle() {
if (activeCircle) {
activeCircle.style.backgroundColor = 'white';
}
const randomIndex = Math.floor(Math.random() * circles.length);
activeCircle = circles[randomIndex];
activeCircle.style.backgroundColor = 'black';
activeCircle.style.animation = 'pop 0.5s';
}
function hitCircle(circle) {
if (circle === activeCircle) {
circle.style.backgroundColor = 'white';
circle.removeAttribute('style');
activeCircle = null;
randomizeCircle();
}
}
</script>
</body>
</html>
```