ミッション：3秒以内にボタンを何回押せるか挑戦しよう！
HTMLタブに下のコードを貼り付けてください。
<button id="startBtn">スタート</button>
<button id="hitBtn" disabled>たたけ！</button>
<p id="score">0</p>
<p id="message">スタートを押してね</p>
CSSタブに下のコードを貼り付けてください。
#hitBtn {
font-size: 2rem;
padding: 20px 40px;
cursor: pointer;
}
#score {
font-size: 3rem;
font-weight: bold;
}
JSタブに下のコードを貼り付けてください。
const startBtn = document.querySelector('#startBtn');
const hitBtn = document.querySelector('#hitBtn');
const score = document.querySelector('#score');
const message = document.querySelector('#message');
let count = 0;
startBtn.addEventListener('click', function() {
count = 0;
score.textContent = '0';
message.textContent = '3秒でたたけ！';
startBtn.disabled = true;
hitBtn.disabled = false;
setTimeout(function() {
hitBtn.disabled = true;
startBtn.disabled = false;
message.textContent = count + '回！また挑戦する？';
}, 3000);
});
hitBtn.addEventListener('click', function() {
count = count + 1;
score.textContent = count;
});
「スタート」を押して3秒間連打し、結果が表示されることを確認してください。
disabled でボタンを制御するstartBtn.disabled = true; // スタートボタンを押せなくする
hitBtn.disabled = false; // たたくボタンを押せるようにする
disabled = true でボタンを操作できない状態にします。ゲーム中はスタートボタンを押せなくして、ゲーム終了後はたたくボタンを押せなくすることで、順番通りに遊んでもらえます。
setTimeout でゲームオーバーを作るsetTimeout(function() {
hitBtn.disabled = true;
startBtn.disabled = false;
message.textContent = count + '回！また挑戦する？';
}, 3000);
「スタート」を押した3000ミリ秒（3秒）後にこの処理が実行されます。setTimeout は「反応速度測定」でも使いましたが、今回は「3秒後にゲームを終了させる」ために使っています。
count を毎回リセットするcount = 0;
score.textContent = '0';
「スタート」を押したときに count を 0 に戻しています。「数を刻む石板」のリセットボタンと同じ考え方で、もう一度ゲームを始めたときに前回のスコアが残らないようにしています。
setTimeout(function() {
...
}, 3000); ← ここを変える（ミリ秒）
3000 を 5000 にすると5秒チャレンジになります。
setTimeout を使っている