JavaScriptで瞬間記憶能力テスト

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

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

setIntervalでカウントダウン
Math.randomを使って0〜nの整数を作成
0.1秒でも8桁の数字を記憶することは可能

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

setIntervalでカウントダウン

HTML

<div id="display"></div>
<button type="button" id="start">START</button>

CSS

body { text-align: center }
#display { height: 160px; font-size: 100px }
button { width: 180px; padding: 5px; font-size: 48px }

JavaScript

display = document.querySelector('#display');
start = document.querySelector('#start');

start.onclick = function() {
  //カウントダウンの初期値
  count = 5;
  display.innerHTML = count;

  timer = setInterval(function() {
    //カウントを1ずつ減らして表示
    count--;
    display.innerHTML = count;

    //カウントが0になったら処理を中断
    if(count == 0) {
      clearInterval(timer);
    }
  }, 1000);
}

setTimeoutで1桁の数字を表示

HTMLとCSSは上のカウントダウンと同じなのでJavaScriptのコードだけ記述します。

display = document.querySelector('#display');
start = document.querySelector('#start');

start.onclick = function() {
  setTimeout(function() {
    //ランダムな1桁の整数を作成してdivタグに入れる
    display.innerHTML = Math.floor(Math.random() * 10);
  }, 1000);
}

Math.randomを使うと0以上1未満の少数を取得できます。この少数をn倍して小数点以下を切り捨てれば0以上n未満の整数、小数点以下を切り上げれば1以上n以下の整数を作成できます。

瞬間記憶能力テスト

HTML

<div id="display"></div>
<div>
  <input type="number" id="number" />
</div>
<div>
  <button type="button" id="start">START</button>
  <button type="button" id="answer">ANSWER</button>
</div>

CSS

body { text-align: center }
#display { height: 160px; font-size: 100px }
input { width: 565px; padding: 5px; font-size: 48px }
button { width: 280px; padding: 5px; font-size: 48px }
div { margin-bottom: 10px }

JavaScript

display = document.querySelector('#display');
number = document.querySelector('#number');

//スタートボタン
start = document.querySelector('#start');
start.onclick = function() {
  number.value = '';

  //カウントダウンの初期値
  count = 3;
  display.innerHTML = count;

  //6桁の数字を作成する
  arr = [];
  while(arr.length < 6) {
    i = Math.floor(Math.random() * 10);

    if(!arr.includes(i)) {
      arr.push(i);
    }
  }
  correct = arr.join('');

  //カウントダウン
  timer = setInterval(function() {
    count--;

    if(count == 0) {
      //カウントが0になったら6桁の数字を表示する
      display.innerHTML = correct;
      clearInterval(timer);

      setTimeout(function() {
        display.innerHTML = '';
      }, 100);
    } else {
      display.innerHTML = count;
    }
  }, 1000);
}

//解答ボタン
answer = document.querySelector('#answer');
answer.onclick = function() {
  if(number.value == correct) {
    display.innerHTML = '正解！';
  } else {
    display.innerHTML = correct;
  }
}

桁数や秒数のプルダウンを加えたパターン

HTML

<div id="display"></div>
<div>
  <input type="number" id="number" />
</div>
<div>
  <select id="digit">
    <option value="4">4桁</option>
    <option value="6">6桁</option>
    <option value="8">8桁</option>
  </select>
  <select id="second">
    <option value="100">0.1秒</option>
    <option value="500">0.5秒</option>
    <option value="1000">1.0秒</option>
  </select>
</div>
<div>
  <button type="button" id="start">START</button>
  <button type="button" id="answer">ANSWER</button>
</div>

JavaScript

display = document.querySelector('#display');
number = document.querySelector('#number');

//スタートボタン
start = document.querySelector('#start');
start.onclick = function() {
  //桁数と秒数のプルダウンの値を取得する
  digit = document.querySelector('#digit').value;
  second = document.querySelector('#second').value;

  number.value = '';

  //カウントダウンの初期値
  count = 3;
  display.innerHTML = count;

  //digitの桁数の数字を作成
  arr = [];
  while(arr.length < Number(digit)) {
    i = Math.floor(Math.random() * 10);

    if(!arr.includes(i)) {
      arr.push(i);
    }
  }
  correct = arr.join('');
  console.log(correct);

  //カウントダウン
  timer = setInterval(function() {
    count--;

    if(count == 0) {
      //カウントが0になったら数字を表示
      display.innerHTML = correct;
      clearInterval(timer);
      
      //secondで指定した秒後に消えるようにする
      setTimeout(function() {
        display.innerHTML = '';
      }, Number(second));
    } else {
      display.innerHTML = count;
    }
  }, 1000);
}

//解答ボタン
answer = document.querySelector('#answer');
answer.onclick = function() {
  if(number.value == correct) {
    display.innerHTML = '正解！';
  } else {
    display.innerHTML = correct;
  }
}

変更点としてはdigitとsecondという二つの変数を追加してそれぞれ桁数と秒数のプルダウンの値を入れているところと、while文で数字を作成するところの桁数にdigit、数字が表示された後のsetTimeoutで数字を消す秒数のところにsecondを入れているところだけです。他は先ほどのコードと同じです。