絵文字消し

「絵文字消し」

ミッション：5個の絵文字を全部クリックして消し、タイムアタックに挑戦しよう！

コードを写そう

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

html

<p id="message">全部消してね！タイムアタック！</p>
<div id="stage">
  <span class="emoji">🍎</span>
  <span class="emoji">🍊</span>
  <span class="emoji">🍋</span>
  <span class="emoji">🍇</span>
  <span class="emoji">🍓</span>
</div>
<p id="result"></p>

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

css

.emoji {
  font-size: 60px;
  cursor: pointer;
}

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

const emojis    = document.querySelectorAll('.emoji');
const result    = document.querySelector('#result');
const startTime = Date.now();

let remaining = emojis.length;

emojis.forEach(function(emoji) {
  emoji.addEventListener('click', function() {
    emoji.style.visibility = 'hidden';
    remaining = remaining - 1;

    if (remaining === 0) {
      const elapsed = Date.now() - startTime;
      result.textContent = elapsed + ' ミリ秒でクリア！🎉';
    }
  });
});

5個の絵文字を全部クリックするとタイムが表示されることを確認してください。

コードを読み解こう

`emojis.length`：要素の個数を調べる

let remaining = emojis.length;

querySelectorAll で取得した要素のリストに .length を付けると、個数を取得できます。絵文字が5個あるので emojis.length は 5 になります。個数を直接 5 と書いてもいいですが、length を使うと絵文字の数をHTMLで変更したとき自動的に追いかけてくれます。

`visibility: hidden` と `display: none` の違い

emoji.style.visibility = 'hidden';

visibility: hidden は要素を見えなくしますが、スペースは残ります。display: none はスペースごと消えます。今回はスペースを残すことで絵文字の位置がずれないようにしています。

全部消えたかを `remaining` で判定する

remaining = remaining - 1;

if (remaining === 0) {
  // 全部消えた
}

クリックするたびに remaining を1減らし、0 になったら全部消えたと判定します。「数を刻む石板」のカウントアップを逆にカウントダウンするイメージです。

改造しよう

ミッション：絵文字の種類や数を変えよう

HTMLの stage の中の絵文字を変えたり増やしたりできます。

html

<div id="stage">
  <span class="emoji">🍎</span>  ← 絵文字を変えたり
  <span class="emoji">🐶</span>  ← 増やしたりできる
</div>

JSは変えなくても自動的に対応します（emojis.length で個数を取得しているため）。

自己チェック

[ ] 絵文字をクリックすると消える
[ ] 全部消えるとタイムが表示される
[ ] querySelectorAll と forEach を使っている
[ ] Date.now() でタイムを計測している