[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;
}

本

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！