連打王

「連打王」

ミッション：ボタンを何回押せるか、スコアを記録しよう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

<button id="btn">たたけ！</button>
<p id="score">0</p>

CSSタブに下のコードを貼り付けてください。

#btn {
  font-size: 2rem;
  padding: 20px 40px;
  cursor: pointer;
}

#score {
  font-size: 3rem;
  font-weight: bold;
}

JSタブに下のコードを貼り付けてください。

const btn = document.querySelector('#btn');
const score = document.querySelector('#score');
let count = 0;

btn.addEventListener('click', function() {
  count = count + 1;
  score.textContent = count;
});

ボタンを連打してスコアが増えることを確認してください。

コードを読み解こう

このコードは「数を刻む石板」とまったく同じ仕組みです。let count で回数を記憶して、クリックのたびに1増やして画面に表示しています。

シンプルな仕組みでも、見た目やゲーム感を変えるだけでまったく違う体験になります。

改造しよう

ミッション：ゴールを設定しよう

スコアが目標に達したら「クリア！」と表示してみましょう。

「色変わり石」で学んだ if を使います。count = count + 1 の行のあとに下のコードを追加してください。

if (count === 30) {
  score.textContent = 'クリア！🎉';
}

=== は「等しい」を確認する記号です。count が 30 になったときだけ「クリア！🎉」を表示します。

自己チェック

• [ ] ボタンを押すとスコアが増える
• [ ] スコアが目標に達すると「クリア！」が表示される