<html lang="ja">
  <head>
    <title>神経衰弱</title>
  </head>
  <script src="main.js"></script>
  <body>
    <style>
      .omote {
        width: 100px;
        height: 140px;
        border: 1px solid red;
        border-radius: 5px;
        text-align: center;
        font-size: 36px;
        box-shadow: rgb(100, 100, 100) 2px 2px;
      }
      .ura {
        background-color: black;
        border: 0px solid black;
      }
    </style>

    <table id="field"></table>
    <h2><span id="time">0</span>秒経過</h2>
  </body>
</html>
let timer = NaN;  
let start = null;  

// 初期化
function init() {
  let table = document.getElementById("field"); 

  let cards = []; // 配列を格納
  for (let a = 1; a <= 10; a++) {
    cards.push(a);
    cards.push(a);
  }
  cards.shuffle(); // カードをシャッフル

  for (let i = 0; i < 4; i++) {
    let itiretu = document.createElement("tr");
    for (let j = 0; j < 5; j++) {
      let itimai = document.createElement("td");
      itimai.className = "omote";
      itimai.number = cards[i * 5 + j];
      itiretu.appendChild(itimai); 
      itimai.textContent = itimai.number;
    }
    table.appendChild(itiretu); 
  }
  start = new Date(); // ゲーム開始時刻を保存
  timer = setInterval(kousin, 1000); // 1秒ごとに「kousin」を発動する
}

// 時間経過を計測
function kousin() {
  let now = new Date();
  let keika = Math.floor((now.getTime() - start.getTime()) / 1000);
  document.getElementById("time").textContent = keika; // 経過時刻を表示
}

// 配列シャッフル
Array.prototype.shuffle = function () {
  let i = this.length;
  while (i) {
    let j = Math.floor(Math.random() * i);
    let t = this[--i];
    this[i] = this[j];
    this[j] = t;
  }
  return this;
};

window.addEventListener("load", init);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.