```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
.bounce {
animation: bounce 1s;
}
</style>
</head>
<body>
<div id="app" style="width:400px; height:400px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;">
<!-- Start Screen -->
<div id="start-screen" style="display:flex; flex-direction:column; align-items:center;">
<h1 style="font-size:24px; margin-bottom:20px;">数字記憶300個</h1>
<button id="start-button" style="padding:10px 20px; font-size:16px; cursor:pointer;">開始</button>
</div>
<!-- Game Screen -->
<div id="game-screen" style="display:none; flex-direction:column; align-items:center;">
<button id="end-button" style="padding:5px 10px; font-size:14px; cursor:pointer; margin-bottom:10px;">終了</button>
<div id="number-grid" style="display:flex; flex-wrap:wrap; width:100%;"></div>
</div>
<!-- Result Screen -->
<div id="result-screen" style="display:none; flex-direction:column; align-items:center;">
<p id="time-elapsed" style="font-size:16px; margin-bottom:10px;"></p>
<button id="answer-button" style="padding:5px 10px; font-size:14px; cursor:pointer; display:none;">回答</button>
</div>
<!-- Answer Screen -->
<div id="answer-screen" style="display:none; flex-direction:column; align-items:center;">
<div id="answer-grid" style="display:flex; flex-wrap:wrap; width:100%; margin-bottom:10px;"></div>
<button id="restart-button" style="padding:5px 10px; font-size:14px; cursor:pointer;">もう一度</button>
</div>
</div>
<script>
// JavaScript to handle game logic
let startTime;
let numbers = [];
const startButton = document.getElementById('start-button');
const endButton = document.getElementById('end-button');
const answerButton = document.getElementById('answer-button');
const restartButton = document.getElementById('restart-button');
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const resultScreen = document.getElementById('result-screen');
const answerScreen = document.getElementById('answer-screen');
const numberGrid = document.getElementById('number-grid');
const answerGrid = document.getElementById('answer-grid');
const timeElapsed = document.getElementById('time-elapsed');
function generateNumbers() {
numbers = [];
for(let i=0; i<300; i++) {
numbers.push(Math.floor(Math.random() * 10));
}
}
function displayNumbers(grid, nums) {
grid.innerHTML = '';
for(let i=0; i<nums.length; i++) {
const numDiv = document.createElement('div');
numDiv.textContent = nums[i];
numDiv.style.width = '20px';
numDiv.style.textAlign = 'center';
numDiv.style.margin = '1px';
grid.appendChild(numDiv);
}
}
startButton.addEventListener('click', () => {
generateNumbers();
displayNumbers(numberGrid, numbers);
startTime = new Date();
startScreen.style.display = 'none';
gameScreen.style.display = 'flex';
numberGrid.classList.add('fade-in');
endButton.classList.add('bounce');
});
endButton.addEventListener('click', () => {
const endTime = new Date();
const elapsed = (endTime - startTime)/1000;
timeElapsed.textContent = '経過時間: ' + elapsed.toFixed(1) + '秒';
gameScreen.style.display = 'none';
resultScreen.style.display = 'flex';
answerButton.style.display = 'block';
resultScreen.classList.add('fade-in');
});
answerButton.addEventListener('click', () => {
displayNumbers(answerGrid, numbers);
resultScreen.style.display = 'none';
answerScreen.style.display = 'flex';
answerGrid.classList.add('fade-in');
});
restartButton.addEventListener('click', () => {
answerScreen.style.display = 'none';
startScreen.style.display = 'flex';
});
</script>
</body>
</html>
```
