```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.2); }
            100% { transform: scale(1); }
        }
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: center; align-items: center; height: 400px; background-color: #FFDDDD;">
        <div style="width: 400px; height: 400px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px; position: relative;">
            <div id="cell0" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(0)"></div>
            <div id="cell1" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(1)"></div>
            <div id="cell2" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(2)"></div>
            <div id="cell3" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(3)"></div>
            <div id="cell4" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(4)"></div>
            <div id="cell5" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(5)"></div>
            <div id="cell6" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(6)"></div>
            <div id="cell7" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(7)"></div>
            <div id="cell8" style="width: 100px; height: 100px; background-color: white; border-radius: 50%;" onclick="clickCell(8)"></div>
        </div>
        <div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 24px; color: #FFFFFF;">スコア: 0 🎉</div>
    </div>
    <script>
        let score = 0;
        let currentCell = 0;

        function randomizeCell() {
            currentCell = Math.floor(Math.random() * 9);
            document.querySelectorAll("[id^='cell']").forEach((cell, index) => {
                cell.style.backgroundColor = 'white';
                if (index === currentCell) {
                    cell.style.backgroundColor = 'black';
                }
            });
        }

        function clickCell(index) {
            if (index === currentCell) {
                score += 1;
                document.getElementById('score').innerText = 'スコア: ' + score + ' 🎉';
                document.getElementById('score').style.animation = 'pop 0.5s';
                setTimeout(() => document.getElementById('score').style.animation = '', 500);
                randomizeCell();
            } else {
                document.getElementById('score').style.animation = 'shake 0.5s';
                setTimeout(() => document.getElementById('score').style.animation = '', 500);
            }
        }
        
        randomizeCell();
        setInterval(randomizeCell, 3000); // 自動的に黒丸を移動
    </script>
</body>
</html>
```