絵文字消し

そーし 03/26 14:42

アプリを動かす

コードを見る

<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>

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

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 + ' ミリ秒でクリア！🎉';
    }
  });
});