JavaScriptで色彩テスト

この記事を三行にまとめると

正解数が10に達したらゲーム終了
不正解の場合もその時点でゲーム終了
正解すればするほど色の差がなくなっていく

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

10問正解するまでゲームが続く色彩テスト

HTML

<div id="judge"><span id="corrects">0</span>/10</div>
<div class="grid">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

CSS

#judge {
  text-align: center;
  font-size: 48px;
  margin-bottom: 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(3, 120px);
  column-gap: 10px;
  row-gap: 10px;
  justify-content: center;
}
.panel {
  border: 1px solid;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: #fff;
}

JavaScript

panels = document.querySelectorAll('.panel');

//正解数
count = 0;

//ゲーム終了フラグ
end = false;

//パネルの色をセットする関数
function setColor() {
  color = [], diff = [];
  for(i = 0; i < 3; i++) {
    c = Math.floor(Math.random() * 216);
    color.push(c);

    //正解数が増えていくと差が少なくなるように調整
    diff.push(c + (40 - count * 4));
  }

  correct = Math.floor(Math.random() * 9);

  panels.forEach(function(panel, i) {
    rgb = (i == correct) ? diff : color;
    panel.style.backgroundColor = 'rgb(' + rgb.join(',') + ')';
  });
}
setColor();

//正解数を表示するspan
corrects = document.getElementById('corrects');

panels.forEach(function(panel, i) {
  panel.onclick = function() {
    //終了フラグが立っていたらここで処理終了
    if(end) {
      return;
    }

    //不正解だったら正解のパネルに白丸を出して処理終了
    if(i != correct) {
      panels[correct].innerText = '●';
      end = true;
      return;
    }

    //正解数を+1してspanの中に表示
    count++;
    corrects.innerText = count;

    //正解数が10に達したらゲーム終了しそれ以外は次の色をセット
    if(count == 10) {
      end = true;
    } else {
      setColor();
    }
  }
});