Whack-a-Mole

.mole-game {
    text-align: center;
}

.mole-info {
    margin: 10px 0 20px;
    font-size: 1.2em;
}

.mole-grid {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-gap: 12px;
    justify-content: center;
}

.hole {
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 50%;
    background-color: #5b3a1a;
    font-size: 2.5em;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hole.up {
    background-color: #8d6234;
}

.mole-message {
    margin-top: 20px;
    font-weight: bold;
}

.start-btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.start-btn:hover {
    background-color: #555;
}

.start-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

<div class="mole-game">
    <h1>Whack-a-Mole</h1>
    <div class="mole-info">Time: <span id="moleTime">30</span>s &nbsp;|&nbsp; Score: <span id="moleScore">0</span></div>
    <div class="mole-grid" id="moleGrid">
        <button class="hole" data-i="0"></button>
        <button class="hole" data-i="1"></button>
        <button class="hole" data-i="2"></button>
        <button class="hole" data-i="3"></button>
        <button class="hole" data-i="4"></button>
        <button class="hole" data-i="5"></button>
        <button class="hole" data-i="6"></button>
        <button class="hole" data-i="7"></button>
        <button class="hole" data-i="8"></button>
    </div>
    <div class="mole-message" id="moleMessage">Press "Start" and whack the moles!</div>
    <button class="start-btn" id="moleStart">Start</button>
</div>

const holes = document.querySelectorAll('.hole');
    const scoreDisplay = document.getElementById('moleScore');
    const timeDisplay = document.getElementById('moleTime');
    const message = document.getElementById('moleMessage');
    const startButton = document.getElementById('moleStart');
    const hiddenScore = document.getElementById('hiddenScore');

    const GAME_DURATION = 30;
    let score = 0;
    let timeLeft = GAME_DURATION;
    let activeHole = -1;
    let countdown;
    let moleTimer;
    let playing = false;

    function hideMole() {
        if (activeHole >= 0) {
            holes[activeHole].classList.remove('up');
            holes[activeHole].textContent = '';
            activeHole = -1;
        }
    }

    function showMole() {
        hideMole();
        let next;
        do {
            next = Math.floor(Math.random() * holes.length);
        } while (next === activeHole);
        activeHole = next;
        holes[next].classList.add('up');
        holes[next].textContent = '🐹';

        // Moles get faster as the score grows
        const stay = Math.max(350, 900 - score * 15);
        moleTimer = setTimeout(showMole, stay);
    }

    function endGame() {
        playing = false;
        clearInterval(countdown);
        clearTimeout(moleTimer);
        hideMole();
        startButton.disabled = false;
        message.textContent = 'Time’s up! Your score: ' + score;
        document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
    }

    function startGame() {
        score = 0;
        timeLeft = GAME_DURATION;
        playing = true;
        scoreDisplay.textContent = score;
        timeDisplay.textContent = timeLeft;
        hiddenScore.value = score;
        message.textContent = 'Whack them!';
        startButton.disabled = true;
        document.querySelector('.share-buttons').style.display = 'none';

        showMole();
        countdown = setInterval(() => {
            timeLeft--;
            timeDisplay.textContent = timeLeft;
            if (timeLeft <= 0) {
                endGame();
            }
        }, 1000);
    }

    holes.forEach((hole, index) => {
        hole.addEventListener('click', () => {
            if (!playing || index !== activeHole) {
                return;
            }
            score++;
            scoreDisplay.textContent = score;
            hiddenScore.value = score; // Update hidden score field
            clearTimeout(moleTimer);
            showMole();
        });
    });

    startButton.addEventListener('click', startGame);