<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボックスクリックゲーム</title>
<style>
.box {
width: 80px;
height: 80px;
border: 1px solid black;
border-radius: 50%;
display: inline-block;
margin: 5px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#timer {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="game-area"></div>
<button id="start-button">スタート</button>
<div id="timer"></div>
<script>
const gameArea = document.getElementById('game-area');
const startButton = document.getElementById('start-button');
const timerDisplay = document.getElementById('timer');
let winningBox;
let timer;
let timeLeft;
function createBoxes() {
gameArea.innerHTML = '';
for (let i = 1; i <= 10; i++) {
const box = document.createElement('div');
box.className = 'box';
box.textContent = i;
box.addEventListener('click', checkWin);
gameArea.appendChild(box);
}
winningBox = Math.floor(Math.random() * 10) + 1;
}
function startGame() {
createBoxes();
timeLeft = 3;
startButton.disabled = true;
updateTimer();
timer = setInterval(() => {
timeLeft--;
updateTimer();
if (timeLeft === 0) {
endGame('失敗');
}
}, 1000);
}
function updateTimer() {
timerDisplay.textContent = `${timeLeft}秒前...`;
}
function checkWin(event) {
if (parseInt(event.target.textContent) === winningBox) {
endGame('当たり');
}
}
function endGame(result) {
clearInterval(timer);
timerDisplay.textContent = result;
startButton.disabled = false;
gameArea.innerHTML = '';
}
startButton.addEventListener('click', startGame);
</script>
</body>
</html>
