```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>数字記憶30個</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }
        .btn:hover {
            animation: bounce 2s infinite;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; position: relative; border: 2px solid black;">
        <h2>数字記憶30個</h2>
        <div id="number-container" style="font-size: 24px; display: none;"></div>
        <div id="buttons">
            <input type="button" class="btn" id="start-btn" value="開始" style="font-size: 20px; padding: 10px 20px;" onclick="startGame()">
            <input type="button" class="btn" id="end-btn" value="終了" style="font-size: 20px; padding: 10px 20px; display: none;" onclick="endGame()">
            <input type="button" class="btn" id="show-answer-btn" value="回答" style="font-size: 20px; padding: 10px 20px; display: none;" onclick="showAnswer()">
        </div>
        <div id="time-elapsed" style="font-size: 20px; display: none;"></div>
    </div>
    <script>
        let startTime, digits;

        function generateRandomDigits() {
            return Array.from({ length: 30 }, () => Math.floor(Math.random() * 10));
        }

        function displayDigits(digits) {
            const container = document.getElementById('number-container');
            container.innerHTML = '';
            for (let i = 0; i < 30; i += 10) {
                container.innerHTML += digits.slice(i, i + 10).join(' ') + '<br>';
            }
        }

        function startGame() {
            digits = generateRandomDigits();
            displayDigits(digits);
            startTime = new Date();
            document.getElementById('number-container').style.display = 'block';
            document.getElementById('start-btn').style.display = 'none';
            document.getElementById('end-btn').style.display = 'inline-block';
            document.getElementById('time-elapsed').style.display = 'none';
        }

        function endGame() {
            const endTime = new Date();
            const timeElapsed = ((endTime - startTime) / 1000).toFixed(1);
            document.getElementById('number-container').style.display = 'none';
            document.getElementById('end-btn').style.display = 'none';
            document.getElementById('show-answer-btn').style.display = 'inline-block';
            document.getElementById('time-elapsed').innerHTML = `経過時間: ${timeElapsed}秒`;
            document.getElementById('time-elapsed').style.display = 'block';
        }

        function showAnswer() {
            displayDigits(digits);
            document.getElementById('show-answer-btn').style.display = 'none';
            document.getElementById('start-btn').style.display = 'inline-block';
            document.getElementById('number-container').style.display = 'block';
        }
    </script>
</body>
</html>
```