【JavaScript】10分でできる神経衰弱

神経衰弱は英語だとconcentrationなどと言うらしい
この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。





HTML

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="container">
      <div class="card"><span class="material-symbols-outlined">favorite</span></div>
      <div class="card"><span class="material-symbols-outlined">favorite</span></div>
      <div class="card"><span class="material-symbols-outlined">star</span></div>
      <div class="card"><span class="material-symbols-outlined">star</span></div>
      <div class="card"><span class="material-symbols-outlined">local_bar</span></div>
      <div class="card"><span class="material-symbols-outlined">local_bar</span></div>
      <div class="card"><span class="material-symbols-outlined">mood</span></div>
      <div class="card"><span class="material-symbols-outlined">mood</span></div>
      <div class="card"><span class="material-symbols-outlined">sunny</span></div>
      <div class="card"><span class="material-symbols-outlined">sunny</span></div>
      <div class="card"><span class="material-symbols-outlined">thumb_up</span></div>
      <div class="card"><span class="material-symbols-outlined">thumb_up</span></div>
    </div>
    <div class="button">
      <button id="start">START</button>
    </div>
  </body>
</html>



CSS

body { margin-top: 20px }  
#container {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 100px;
  gap: 10px;
  margin: 20px;
}
.card {
  display: grid;
  place-content: center;
  cursor: pointer;
  border: solid 2px #444;
}
.material-symbols-outlined {
  font-size: 60px;
  color: #444;
}
#start {
  width: 430px;
  height: 40px;
}
.one { color: #f00 }
.two { color: #00f }
.hidden { opacity: 0 }
.button { text-align: center }



JavaScript

const start = document.getElementById('start');
const cards = document.querySelectorAll('.material-symbols-outlined');
let selected = '', player = 'one', lock = false, interval = 1000;

// アイコンのクリックイベント
cards.forEach((card) => {
  card.onclick = () => {
    // lockがtrueかhiddenのついていないアイコンの場合は処理終了
    if(lock || !card.classList.contains('hidden')) {
      return;
    }

    card.classList.remove('hidden');
    card.classList.add('selected');
    interval = 2000;

    // 1枚目のカードをめくったとき
    if(selected == '') {
      selected = card.innerText;
      interval = 1000;

    // 1枚目と2枚目が一致していたとき
    } else if(card.innerText == selected) {
      nextTurn(player);

    // 1枚目と2枚目が不一致だったとき
    } else {
      // lockをtrueにしてプレイヤーを交代
      lock = true;
      player = (player == 'one') ? 'two' : 'one';

      setTimeout(() => {
        nextTurn('hidden');
        lock = false;
      }, 1000);
    }

    // プレイヤーがtwoだったら自動でクリックイベントを発動
    if(player == 'two') {
      setTimeout(() => {
        clickables = document.querySelectorAll('.hidden');
        i = Math.floor(Math.random() * clickables.length);
        clickables[i].click();
      }, interval);
    }
  }
})

// 2枚目をめくった後の処理
nextTurn = (add) => {
  selected = '';
  let selects = document.querySelectorAll('.selected');

  selects.forEach((card) => {
    card.classList.add(add);
    card.classList.remove('selected');
  })
}

// スタートボタンを押したとき
start.onclick = () => {
  let container = document.getElementById('container');

  cards.forEach((card) => {
    card.classList.add('hidden');
    card.classList.remove('one', 'two');

    // ランダムにカードを選択して親要素の末尾に移動させる
    i = Math.floor(Math.random() * container.children.length);
    container.appendChild(container.children[i]);
  })
}
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください