🎮ノバクエスト🎮

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>
```