もぐらたたき

「もぐらたたき」

ミッション：10秒間で何点取れるか！次々と現れるもぐらをすばやくたたこう！

コードを写そう

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

html

<button id="startBtn">スタート</button>
<p id="score">0点</p>
<p id="timer">10秒</p>
<div id="stage"></div>

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

css

#stage {
  position: relative;
  width: 300px;
  height: 300px;
  background: #8B4513;
  border-radius: 8px;
  margin-top: 10px;
}

.mole {
  position: absolute;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
}

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

const startBtn = document.querySelector('#startBtn');
const score    = document.querySelector('#score');
const timer    = document.querySelector('#timer');
const stage    = document.querySelector('#stage');

let count    = 0;
let timeLeft = 10;
let gameInterval;
let timerInterval;

startBtn.addEventListener('click', function() {
  count    = 0;
  timeLeft = 10;
  score.textContent = '0点';
  timer.textContent = '10秒';
  stage.innerHTML   = '';
  startBtn.disabled = true;

  // もぐらを出すインターバル
  gameInterval = setInterval(function() {
    const mole = document.createElement('div');
    mole.textContent = '🐭';
    mole.classList.add('mole');
    mole.style.left = Math.random() * 250 + 'px';
    mole.style.top  = Math.random() * 250 + 'px';
    stage.appendChild(mole);

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

    // 1秒後に自動で消える
    setTimeout(function() {
      mole.remove();
    }, 1000);
  }, 800);

  // タイマーのインターバル
  timerInterval = setInterval(function() {
    timeLeft = timeLeft - 1;
    timer.textContent = timeLeft + '秒';

    if (timeLeft === 0) {
      clearInterval(gameInterval);
      clearInterval(timerInterval);
      stage.innerHTML   = '';
      startBtn.disabled = false;
      timer.textContent = '終了！' + count + '点でした！';
    }
  }, 1000);
});

「スタート」を押すともぐらが出てくることを確認してください。もぐらをクリックすると得点が増え、10秒後にゲームが終わります。

コードを読み解こう

`setInterval`：一定間隔で処理を繰り返す

gameInterval = setInterval(function() {
  // もぐらを出す処理
}, 800);

setInterval(処理, 時間) は「指定した時間（ミリ秒）ごとに処理を繰り返す」命令です。setTimeout は1回だけ実行しますが、setInterval は止めるまで繰り返し実行します。800ミリ秒ごとにもぐらが新しく出てくるのはこのためです。

`clearInterval`：インターバルを止める

clearInterval(gameInterval);
clearInterval(timerInterval);

setInterval を使うときは必ず「止める手段」が必要です。setInterval は変数に代入しておき、止めたいときに clearInterval に渡します。ゲームが終了したとき（timeLeft === 0）に2つのインターバルを止めています。

2つのインターバルを使い分ける

変数	間隔	役割
`gameInterval`	800ms	もぐらを出す
`timerInterval`	1000ms	残り時間を1秒ずつ減らす

それぞれ別の変数に入れておくことで、独立して止めることができます。

もぐらが自動で消える仕組み

setTimeout(function() {
  mole.remove();
}, 1000);

もぐらが出てから1秒後に remove() で消えます。setInterval でもぐらを作るたびに、そのもぐら専用の setTimeout も一緒に作られます。「召喚を取り消せ」の削除ボタンが「自分のペアの精霊だけを消す」のと同じように、作られた瞬間の mole を覚えているので自分だけを消せます。

改造しよう

ミッション：難易度を変えよう

もぐらの出る間隔（速さ）と表示時間を変えると難易度が変わります。

gameInterval = setInterval(function() { ... }, 800);
// ↑ 800を小さくすると速く出てくる（難しくなる）

setTimeout(function() { mole.remove(); }, 1000);
// ↑ 1000を小さくするとすぐ消える（難しくなる）

自己チェック

[ ] スタートするともぐらが次々と現れる
[ ] もぐらをクリックすると得点が増える
[ ] 1秒後にもぐらが自動で消える
[ ] 10秒後にゲームが終了する
[ ] setInterval と clearInterval を使っている