山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[JavaScript] 神経衰弱

神経衰弱

15パズルのときと同じ様に、表を使ってカードを表現します。

カードのシャッフル

Fisher-Yates のシャッフルアルゴリズムを使います。

// Fisher-Yates のシャッフルアルゴリズム
function shuffle(a) {
  const len = a.length;
  for (let i = len - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const tmp = a[i];
    a[i] = a[j];
    a[j] = tmp;
  }
}

カードのめくり

神経衰弱は二回カードを連続でめくり、同じ値ならペアとして確定させ、異なればカードを伏せます。

// カードをめくる
function flip(e) {
  const src = e.srcElement;
  if (flipTimer || src.textContent != "") {
    return;
  }
  src.className = "card";
  src.textContent = src.number;
  if (prevCard ==  null) {
    prevCard = src;
    return;
  }
  if (prevCard.number == src.number) {
    if (++score == 10) {
      clearInterval(timer);
    }
    prevCard = null;
    clearTimeout(flipTimer);
  } else {
    flipTimer = setTimeout(function() {
      src.className = "card-back";
      src.textContent = "";
      prevCard.className = "card-back";
      prevCard.textContent = "";
      prevCard = null;
      flipTimer = NaN;
    }, 1000);
  }
}

時間計測

tick() をsetInterval()で定期的に実行します。

// 経過時間計測
function tick() {
  const now = new Date();
  const elapsed = Math.floor((now.getTime() - startTime.getTime()) / 1000);
  document.getElementById('time').textContent = elapsed;
}