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();
    }
  }
});