スコア: 0
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Circle Clicker Game</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; border: 3px solid #000;">
<div id="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; height: 50%;"></div>
<div style="display: flex; justify-content: space-around; width: 100%; margin-top: 20px;">
<button onclick="startGame()" style="padding: 10px 20px; font-size: 16px;">スタート</button>
<button onclick="stopGame()" style="padding: 10px 20px; font-size: 16px;">ストップ</button>
</div>
<div style="margin-top: 10px; font-size: 18px;">スコア: <span id="score">0</span></div>
</div>
<script>
let score = 0;
let timer;
let activeCell;
function createGrid() {
const grid = document.getElementById('grid');
grid.innerHTML = '';
for (let i = 0; i < 9; i++) {
const cell = document.createElement('div');
cell.style.width = '100%';
cell.style.height = '100%';
cell.style.background = 'white';
cell.style.borderRadius = '50%';
cell.style.border = '2px solid black';
cell.style.display = 'flex';
cell.style.alignItems = 'center';
cell.style.justifyContent = 'center';
cell.style.fontSize = '24px';
cell.style.cursor = 'pointer';
cell.onclick = () => handleCellClick(i);
grid.appendChild(cell);
}
}
function handleCellClick(index) {
if (index === activeCell) {
score++;
document.getElementById('score').innerText = score;
document.querySelectorAll('#grid div')[activeCell].style.background = 'white';
assignBlackCell();
} else {
document.querySelectorAll('#grid div')[index].style.animation = 'shake 0.5s';
}
}
function assignBlackCell() {
const cells = document.querySelectorAll('#grid div');
activeCell = Math.floor(Math.random() * 9);
cells[activeCell].style.background = 'black';
cells[activeCell].style.animation = 'bounce 1s';
}
function startGame() {
score = 0;
document.getElementById('score').innerText = score;
createGrid();
assignBlackCell();
clearTimeout(timer);
timer = setTimeout(() => {
alert('ゲーム終了！スコア: ' + score);
stopGame();
}, 30000);
}
function stopGame() {
createGrid();
clearTimeout(timer);
score = 0;
document.getElementById('score').innerText = score;
}
createGrid();
</script>
</body>
</html>
```