JavaScript反射神経ゲームのソースコード

<style>
#gameArea {
width: 200px;
height: 200px;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
</style>

<h1>反射神経ゲーム</h1>
<p id="instructions">クリックしてスタート！</p>
<div id="gameArea">START</div>
<p id="result"></p>

<script>
// ゲームエリアの要素を取得
const gameArea = document.getElementById('gameArea');
const result = document.getElementById('result');
const instructions = document.getElementById('instructions');

// ゲームの開始時間と色が変わるまでのタイマーIDを保存する変数
let startTime, timeoutId;
let gameStarted = false;
let isWaiting = false;

// ゲームをリセットする関数
function resetGame() {
gameArea.style.backgroundColor = 'lightgray';
gameArea.textContent = 'START';
instructions.textContent = 'クリックしてスタート';
result.textContent = '';
gameStarted = false;
isWaiting = false;
}

// ゲーム開始時に呼ばれる関数
function startGame() {

// ランダムな時間(2秒～5秒の間)で色を変える
const randomTime = Math.random() * 3000 + 2000;
gameArea.textContent = 'Waiting...';
instructions.textContent = '色が変わったらクリックしてください';
isWaiting = true;
timeoutId = setTimeout(() => {
gameArea.style.backgroundColor = 'green';
gameArea.textContent = 'CLICK';
startTime = Date.now();
gameStarted = true;
isWaiting = false;
}, randomTime);
}

// ゲームエリアがクリックされたときの処理
gameArea.addEventListener('click', () => {
if (!gameStarted && !isWaiting) {
// ゲームがまだ始まっていない（クリックでスタートする段階）
resetGame();
startGame();

// Waiting...の状態でクリックした場合（お手付き）
} else if (isWaiting) {
clearTimeout(timeoutId);
result.textContent = 'お手付き！';
instructions.textContent = 'もう一度クリックして再挑戦！';
gameStarted = false;
isWaiting = false;

// 色が変わってからのクリック（反応時間を測定）
} else {
const reactionTime = Date.now() - startTime;
let seconds = Math.floor(reactionTime / 1000);
let milliseconds = Math.floor((reactionTime % 1000) / 10);
result.textContent = `反応時間: ${seconds}.${milliseconds}秒`;
instructions.textContent = 'もう一度クリックして再挑戦！';
gameStarted = false;
}
});

// 初期状態をセット
resetGame();
</script>