1-1. カードのデータを作る

symbols には … と 8 種類の絵柄が入っています。神経衰弱は同じ絵柄のカードが 2 枚ずつあるので、全部で 8 × 2 = 16 枚です。

同じ配列をうしろにもう 1 つつなげれば、どの絵柄もちょうど 2 枚になります。

1-1. deck を作る

コピペ script.js のいちばん最後に書き足します。

// symbols を 2 回連結して 16 枚の deck を作る
const deck = symbols.concat(symbols);

データを用意しただけで、まだ表示するコードがないので、貼っても画面は変わりません。

確認 診断パネルの「変数など」で deck が「(未定義)」から [Array length=16] に変わります。

1-2. HTML の要素を取得する

入れ物は index.html にありますが、中身を作るのは script.js です。
JS のコードから <div id="board"> を触るために、HTML に付けてある id を手がかりに要素を取ってきます。

JS で HTML を作る

HTML に書いていない要素も、JS から作って足せます。作るところと、HTML につなぐところの 2 段階です。

tagName は "div" や "p" のような文字列です。戻り値の element は 2 でも使うので変数で受けます。
parent は入れ先の要素です。今回の入れ先は盤面なので、さきほど取得した boardEl を渡します。

試しに 1 つ作ってみる

コピペ script.js のいちばん最後に貼ります。

const apple = document.createElement("div");   // <div></div> ができる
apple.textContent = "";                      // <div></div> になる
boardEl.appendChild(apple);                    // 盤面の中に入る

貼ると、盤面のところに が 1 つ出ます。

1-3. 作りたいカードの HTML

これから createCard という関数を書きます。createCard("") を呼ぶと、次の HTML が組み立てられて返ってくる形にします。

この HTML はどこにも書きません。出来上がりを確認するためだけのものです。

<div class="card" data-symbol="">
  <div class="card-inner">
    <div class="card-front">?</div>
    <div class="card-back"></div>
  </div>
</div>

1-3. カードの構造

カードの向きは、JavaScript で card に flipped クラスを追加・削除して切り替えます。

1-3. JS と HTML の対応

JS で書いた 1 行が、HTML のどこになるかの対応です。

やること	JS	できる HTML
要素を作る	document.createElement("div")	<div></div>
クラスを追加する	el.className = "card"	<div class="card">
データを持たせる	el.dataset.symbol = ""	<div data-symbol="">
文字を入れる	el.textContent = "?"	<div>?</div>
要素を中に入れる	parent.appendChild(child)	<parent><child></child></parent>

document.createElement で作っただけの要素は、まだどこにも属していません。appendChild でつなげて初めて入れ子になります。

1-3. カード 1 枚を作る関数

記述 コードブロックをそのまま script.js に貼って、【A】〜【C】を書き換えましょう。

// 内側の要素から順に、どこに入れるかを考える
function createCard(symbol) {
  const card = document.createElement("div");
  card.className = "card";
  card.dataset.symbol = symbol;

  const inner = document.createElement("div");
  inner.className = "card-inner";
  const front = document.createElement("div");
  front.className = "card-front";
  front.textContent = "?";
  const back = document.createElement("div");
  back.className = "card-back";
  back.textContent = symbol;

  【A】.appendChild(front);
  【B】.appendChild(back);
  【C】.appendChild(inner);
  return card;
}

1-3 答え合わせ

  // ... 要素を作るところは省略 ...

  inner.appendChild(front);   // A: card-front が card-inner の内側に入る
  inner.appendChild(back);    // B: card-back も card-inner の内側に入る
  card.appendChild(inner);    // C: card-inner が card の内側に入る

  return card;
}

作りたいカードの HTML と見比べると、内側の要素から順に入れていることが分かります。

1-3 の確認: 1 枚だけ出してみる

コピペ 作った関数を 1 回だけ呼びます。

boardEl.appendChild(createCard(""));

伏せた状態のカード (青い「?」) が 1 枚出れば OK です。確認できたらこの 1 行は消します。

何も出ないときは、【A】〜【C】がまだ入れ子になっていません。前のスライドの答えと見比べて直しましょう。

1-3 補足: カードから絵柄を取り出す

Chapter 3 では、めくった 2 枚が同じ絵柄かを判定します。そのためには、カード要素から絵柄だけを取り出せる必要があります。

書かれている文字を取得するには textContent を使います。

ただし、カードの中には伏せているときに見える ? と、めくると見える絵柄が両方入っています。

<!-- createCard で作ったカードの再掲。書き足すものではない -->
<div class="card">                    <!-- ここの textContent を読むと -->
  <div class="card-inner">
    <div class="card-front">?</div>   <!-- この ? と -->
    <div class="card-back"></div>   <!-- この  がつながって返る -->
  </div>
</div>

textContent は中にある文字を全部つなげて返すので、伏せているときに見える ? が混ざります。

card.textContent      // "?"

1-3 補足: dataset で絵柄を持たせる

そこで、絵柄をカードの中の文字としてではなく、カード要素自身に持たせます。ここで dataset という仕組みを使います。

card.dataset.symbol = "";   // 要素に data-symbol="" が付く
card.dataset.symbol           // "" — 絵柄だけ取れる

dataset を使うと、HTML の要素に自分で決めた名前でデータを紐付けられます。今回の場合なら symbol の部分がその名前です。

1-4. 盤面全体を描く関数

deck の各要素をカードにして盤面に並べる renderBoard 関数を書きます。

記述 コードブロックをそのまま script.js に貼って、【A】〜【B】を書き換えましょう。

// deck の各要素をカードにして盤面に並べる
function renderBoard() {
  boardEl.replaceChildren(); // 中身を全部削除

  // deck の要素を 1 つずつ取り出して繰り返す
  for (let i = 0; i < deck.length; i++) {
    const card = 【A】(deck[i]);
    boardEl.【B】(card);
  }
}

renderBoard();

確認 16 枚のカードが 4×4 に並びます。「盤面 (DOM)」のカード枚数も 16 になります。

Chapter 2 のゴール

カードをクリックするとめくれるようにします。ただし次のルールを守ります。

• すでにめくったカードは再クリックしても反応しない
• 2 枚めくったあと、絵柄を比べている間はクリックしてもめくれないようにする (あとで比べる処理を入れるときに使う)

2-1. 状態変数を用意する

「1 枚目にめくったカード」「2 枚目にめくったカード」「ロック中か」の 3 つを変数で持ちます。

コピペ いちばん最後ではなく、const deck の行のすぐ下に追加します。

// めくりの状態を持つ変数を用意する
let firstCard = null;    // 1 枚目にめくったカード
let secondCard = null;   // 2 枚目にめくったカード
let lockBoard = false;   // 2 枚めくったあとに他のカードを押させないためのロック

確認 診断パネルの「変数など」で、firstCard と secondCard が null、lockBoard が false になります。3 つとも「(未定義)」から変われば貼れています。

2-2. 先にカードと繋いでおく

element.addEventListener("click", 関数) で、その要素がクリックされたときに実行する関数を紐づけられます。呼ばれる側の handleCardClick はまだ作らず、この 1 行だけ先に置きます。こうしておくと、次のスライドで穴を 1 つ埋めるたびに画面で確かめられます。

コピペ createCard 関数の中の return card; の直前に置きます。

function createCard(symbol) {
  // ... (ここまでに書いた中身は省略) ...
  card.appendChild(inner);

  card.addEventListener("click", () => handleCardClick(card));

  return card;
}

確認 カードをクリックすると、診断パネルの「診断」に Uncaught ReferenceError: handleCardClick is not defined が出ます。呼ぶ先をまだ作っていないので、これが出れば繋がっています。押すたびに (×2) (×3) と数が増えます。診断パネルの Chapter 2 は 3/8 です。

2-2. クリック処理を関数にする (コード)

記述 ファイルの末尾にこの形で書き、さきほどのフロー図を見ながら【A】〜【D】を埋めます。

// フロー図に沿って書く
function handleCardClick(card) {
  if (【A】) return;
  if (card.classList.contains(【B】)) return;

  card.classList.【C】(【B】);

  if (【D】 === null) {
    firstCard = card;
    return;
  }

  secondCard = card;
}

確認 カードがめくれるようになり、もう一度押しても反応しません。診断パネルの「変数など」で firstCard が Card( @3) に変わります。【A】はクリックでは確かめられないので、同じパネルの Chapter 2 が 8/8 ✓ になるかで見ます。

2-2 答え合わせ

function handleCardClick(card) {
  if (lockBoard) return;                          // A
  if (card.classList.contains("flipped")) return; // B

  card.classList.add("flipped");                  // C

  if (firstCard === null) {                       // D
    firstCard = card;
    return;
  }

  secondCard = card;
}

classList は contains で調べて add で付けます。付いた "flipped" に配布 CSS が反応して、めくれるアニメーションが流れます。

lockBoard が true の間は先頭で打ち切るので、絵柄を比べている最中のクリックはめくる処理まで進みません。lockBoard は真偽値なのでそのまま if に置けます。firstCard に入るのはカードか null なので、null と比べて「1 枚目がまだ無い」を真偽値にしてから置きます。

2-2 補足: カッコがいつ効くか

addEventListener に預けるのは、クリックされたときに実行してほしい処理です。カッコを付けて handleCardClick(card) と書くと、その場での呼び出しになります。

✕ を試すと 16 枚すべてが最初からめくれ、あとは何も起きません。✓ の () => handleCardClick(card) は「card を渡して handleCardClick を呼ぶ」という処理で、内側のカッコが効くのは実行の瞬間です。

預ける相手には呼ばずに渡し、渡したいものがあるときだけ () => (アロー関数) で包む。

3-1. handleCardClick に判定分岐を追加

コピペ handleCardClick の中、secondCard = card; の下に貼ります。

secondCard = card;

// 2 枚目がめくれたら判定する
const isMatch = firstCard.dataset.symbol === secondCard.dataset.symbol;

if (isMatch) {
  handleMatch();
} else {
  handleMismatch();
}

比べているのは、1-3 で card.dataset.symbol = symbol と入れておいた絵柄です。2 枚のカードから同じ名前で取り出し、=== で突き合わせます。=== と == の違いは末尾の付録に回します。

確認 2 枚めくると、絵柄が違えば handleMismatch is not defined、同じなら handleMatch is not defined が出ます。呼び出しがここまで届いた印なので、この時点ではこれで正解です。呼ばれる側は 3-3 と 3-4 で作ります。

3-2. ターンの片付け

一致でも不一致でも、2 枚判定した後は「次のターンを迎える」ための後片付けが必要です。3-1 で呼び分けた handleMatch と handleMismatch は、どちらも最後にこれを通ります。共通で使うものなので先に作ります。

やることは、めくりの状態を持つ 3 つの変数を、それぞれ宣言したときの値に戻すことです。

記述 コードブロックをそのまま script.js に貼って、【A】〜【B】を書き換えましょう。

// 一致でも不一致でも、次のターンに向けて状態を戻す
function resetTurn() {
  firstCard = 【A】;
  secondCard = 【A】;
  lockBoard = 【B】;
}

確認 まだどこからも呼んでいないので画面は変わりません。診断パネルの Chapter 3 で「resetTurn 関数が定義されている」に ✓ が付きます。

3-3. 一致しなかったときの処理

コピペ

// 一致しなかったときは 800ms 待って伏せに戻す
function handleMismatch() {
  lockBoard = true;
  setTimeout(unflipCards, 800);
}

function unflipCards() {
  firstCard.classList.remove("flipped");
  secondCard.classList.remove("flipped");
  resetTurn();
}

確認 違う絵柄を 2 枚めくると 800 ms 後に伏せに戻り、そのまま次の 2 枚をめくれます。「変数など」の lockBoard が true になり、伏せに戻ると false に戻ります。同じ絵柄を引いたときは handleMatch is not defined が出ます。3-4 で作れば消えます。

なぜ lockBoard = true するのか

setTimeout(関数, 800) は、ブラウザに「800 ms 後にこれを呼んで」と関数を預けて、すぐ次の行に進みます。2-2 の addEventListener で関数を預けたのと同じ形で、呼ぶきっかけがクリックから時間に変わっただけです。預けた関数が後から呼ばれるこの動きを非同期と呼びます。

3-4. 一致したときの処理

3-1 で handleMatch() を呼ぶところまでは書けています。呼ばれる側を作ります。

記述 コードブロックをそのまま script.js に貼って、【A】〜【B】を書き換えましょう。

// 一致した 2 枚を光らせて、次のターンに向けて片付ける
function handleMatch() {
  firstCard.classList.【A】("【B】");
  secondCard.classList.【A】("【B】");
  resetTurn();
}

resetTurn() は 3-2 で書いた後片付けです。ここでは呼ぶだけです。

確認 同じ絵柄を 2 枚めくると両方が緑に光ったまま残り、続けて次のペアを探せます。「盤面 (DOM)」の matched が 2 になり、「変数など」の firstCard と secondCard は null に戻ります。まだシャッフルしていないので、いちばん左上のカードと、その 2 行下のカードが同じ絵柄です。

5-2. 手数を更新

書く場所は handleCardClick の中、secondCard = card; と const isMatch = ... の間です。この 2 行が「状態を変えたら描画を更新する」という型になります。

記述 前後の既存行を目印に、【A】〜【B】を埋めた 2 行を書き足しましょう。

  secondCard = card;

  【A】++;
  【B】.textContent = 【A】;

  const isMatch = firstCard.dataset.symbol === secondCard.dataset.symbol;

確認 2 枚めくるたびに画面上部の「手数」が 1 ずつ増えます。「変数など」の moves も同じ数になります。

5-3. タイマーの開始と停止

コピペ そのまま貼って OK。

function startTimer() {
  startTime = Date.now();
  // 1000 ms 間隔だと秒表示のズレが目立つので少し細かめに回す
  timerId = setInterval(renderTimer, 250);
}

function renderTimer() {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  const mm = String(Math.floor(elapsed / 60)).padStart(2, "0");
  const ss = String(elapsed % 60).padStart(2, "0");
  timerEl.textContent = `${mm}:${ss}`;
}

function stopTimer() {
  clearInterval(timerId);
  timerId = null;
}

setInterval は clearInterval を呼ぶまで止まりません。不要になったら必ず止めます (stopTimer の役割)。
確認 呼び出しをまだ書いていないので、動かして確かめる方法はありません。5-4 を入れてから確認します。

5-5. handleMatch にペア数とクリア判定を追加

記述 handleMatch を書き換えます。【A】〜【C】を埋めましょう。

function handleMatch() {
  firstCard.classList.add("matched");
  secondCard.classList.add("matched");
  // ペア数を 1 増やして、その場で表示も更新する 2 行。表示は「3 / 8」の形
  【A】
  resetTurn();
  if (matchedPairs === 【B】) {
    【C】;
    clearMessageEl.textContent = `クリア！ ${moves}手 / ${timerEl.textContent}`;
  }
}

確認 ペアを取るたびに「ペア」の表示が 1 / 8 のように増えます。

6-1. resetGame 関数

記述 状態変数を初期値に戻し、盤面を作り直します。【A】〜【C】を埋めて、ファイルのいちばん最後に書きます。

// ゲームを初期状態に戻す
function resetGame() {
  stopTimer();
  deck = 【A】;
  【B】;  // めくりの状態を戻す
  moves = 0;
  matchedPairs = 0;
  timerEl.textContent = "00:00";
  movesEl.textContent = "0";
  pairsEl.textContent = `0 / ${symbols.length}`;
  clearMessageEl.textContent = "";
  【C】;
}

// 初回の描画も resetGame に任せる
// (renderBoard 関数の下の renderBoard(); は消す)
resetGame();

6-1 答え合わせ

function resetGame() {
  stopTimer();
  deck = shuffle(symbols.concat(symbols)); // A
  resetTurn();                             // B
  moves = 0;
  matchedPairs = 0;
  timerEl.textContent = "00:00";
  movesEl.textContent = "0";
  pairsEl.textContent = `0 / ${symbols.length}`;
  clearMessageEl.textContent = "";
  renderBoard();                           // C
}

めくりの状態を戻す 3 行は resetTurn にまとまっているので、ここでは呼ぶだけで済みます。初回起動もリセットも同じ処理で扱えるようになり、状態変数の初期化が一箇所に集約されます。

並び順が効くのは deck への代入と renderBoard() の関係だけです。renderBoard() は呼ばれた時点の deck を読むので、代入より前に置くと古い並びで盤面を作ってしまい、「もう一度」を押しても配置が変わりません。resetTurn() と表示を戻す 4 行は、この関数の中ならどこに置いても結果は同じです。

応用課題の目次

もっとやりたい人向けの応用課題です。着手しやすい順に 10 個、1 個につき 1 スライドで説明します。1 から 3 は数行の書き換え、4 から 6 は少し書き足し、7 から 10 は作りそのものが変わります。

応用課題 4: 記憶タイム

resetGame の renderBoard(); の下に数行足して、伏せに戻す処理を関数にすると、始まる前に全部のカードを 3 秒だけ見せられます。

// resetGame の renderBoard(); の下
const allCards = document.querySelectorAll(".card");
for (let i = 0; i < allCards.length; i++) {
  allCards[i].classList.add("flipped");
}
setTimeout(hidePreview, 3000);

// 他の関数と並べて置く
function hidePreview() {
  const cards = document.querySelectorAll(".card");
  for (let i = 0; i < cards.length; i++) {
    cards[i].classList.remove("flipped");
  }
}

使っているのは、めくる処理で書いた classList と、不一致のときに書いた setTimeout だけです。それでも、運任せだったゲームが記憶を試すゲームに変わります。

3000 を 1000 にすると一気に難しくなります。ちょうどいい長さを探してみてください。

応用課題 5: ベストスコアを保存する

クリアしたときの手数を残して、次にページを開いたときも「これまでの最小手数」を出せるようにします。ページを閉じても消えない置き場所が要ります。

答えは付録にあります。

応用課題 6: リセットに残るバグを直す

完成したコードには 1 つバグが残っています。まず再現させてみてください。

同じカード 1 枚がペア成立と判定され、ペア数が 1 つ進みます。Console には Cannot read properties of null が出ています。

原因と直し方は付録にあります。

応用課題 7: ペアの条件を変える

「同じ絵柄どうし」ではなく「英単語とその和訳」でペアにします。元素記号と元素名、都道府県と県庁所在地でも同じ作りです。

表に出す文字 (label) と、判定に使う印 (pairId) をカードに別々に持たせるのがコツです。

const PAIRS = [["dog", "犬"], ["cat", "猫"], ["bird", "鳥"], /* ... */];

// 組ごとに 2 枚作る。同じ組の 2 枚には同じ pairId を付ける
function buildDeck() {
  const cards = [];
  for (let pairId = 0; pairId < PAIRS.length; pairId++) {
    cards.push({ label: PAIRS[pairId][0], pairId: pairId });
    cards.push({ label: PAIRS[pairId][1], pairId: pairId });
  }
  return shuffle(cards);
}

const isMatch = firstCard.dataset.pairId === secondCard.dataset.pairId;

deck の中身が文字列からオブジェクトに変わるので、createCard が受け取るものも変わります。全文は examples/challenges/pair-rule.js です。ルールを変えたら、Share ボタンで人に遊んでもらえます。絵柄を変えたときより反応があります。

応用課題 8: 難易度切り替え (4×4 / 6×6 / 8×8)

難易度で変わるのは列数とペア数の 2 つです。バラバラに持たずに 1 つの表にまとめると、切り替えが数行で済みます。

const LEVELS = {
  easy: { label: "4×4", cols: 4, pairs: 8 },
  normal: { label: "6×6", cols: 6, pairs: 18 },
  hard: { label: "8×8", cols: 8, pairs: 32 },
};

function resetGame() {
  const level = LEVELS[currentLevel];
  symbols = ALL_SYMBOLS.slice(0, level.pairs);
  boardEl.style.gridTemplateColumns = `repeat(${level.cols}, 1fr)`;
  // 以下はそのまま
}

応用課題 3 では styles.css を手で書き換えましたが、遊びながら切り替えるなら JS 側から style を触ります。symbols は難易度で中身が変わるので const ではなく let にします。

難易度ボタン自体も createElement で作れます。全文は examples/challenges/difficulty.js です。

応用課題 9: カウントダウンモード

60 秒でクリアできなければゲームオーバーにします。5-3 で作ったタイマーはそのまま使えて、表示する数を経過から残りに変えるだけです。

const TIME_LIMIT = 60;
let isGameOver = false;

function renderTimer() {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  const remaining = Math.max(0, TIME_LIMIT - elapsed);
  // remaining を mm:ss に整形して timerEl に入れる
  if (remaining === 0) gameOver();
}

function gameOver() {
  stopTimer();
  isGameOver = true;
  clearMessageEl.textContent = `時間切れ！ ${matchedPairs} / ${symbols.length} ペア`;
}

盤面を止めるのに lockBoard は使えません。あれは 1 ターンごとに resetTurn が false に戻すためです。時間切れは別の状態として isGameOver で持ち、handleCardClick の先頭で見ます。全文は examples/challenges/countdown.js です。

応用課題 10: 状態を state にまとめる

今日は「状態を +1」と「画面に反映」の 2 行 1 セットを何度も書きました。片方を書き忘れると画面だけ古いままになります。状態を変える入口を 1 つに絞ると、この 2 行が 1 行になります。

const state = { moves: 0, matchedPairs: 0, /* ... */ };

// 状態を変える唯一の入口。変えたら必ず描画も走る
function setState(patch) {
  Object.assign(state, patch);
  render();
}

// state を読むだけで、state は変えない
function render() {
  movesEl.textContent = state.moves;
  pairsEl.textContent = `${state.matchedPairs} / ${symbols.length}`;
}

setState({ secondCard: card, moves: state.moves + 1 }); // 2 行が 1 行になる

めくれているかどうかだけは state に入れず、カードの flipped クラスのままにしています。ここも state に寄せると、めくるたびに盤面を作り直すことになり、CSS のアニメーションが再生されないためです。全文は examples/challenges/state.js です。

付録: 応用課題 5 の答え — ベストスコア

localStorage はブラウザにデータを残す仕組みです。ページを閉じても消えません。

// 最小手数を更新できたら保存する。更新したときだけ true を返す
function saveBest(currentMoves) {
  const best = Number(localStorage.getItem("bestMoves"));
  if (!best || currentMoves < best) {
    localStorage.setItem("bestMoves", currentMoves);
    return true;
  }
  return false;
}

handleMatch のクリア判定のところで呼びます。

if (matchedPairs === symbols.length) {
  stopTimer();
  if (saveBest(moves)) {
    clearMessageEl.textContent = `自己ベスト更新！ ${moves}手 / ${timerEl.textContent}`;
  } else {
    clearMessageEl.textContent = `クリア！ ${moves}手 (ベスト ${localStorage.getItem("bestMoves")}手)`;
  }
}

保存できるのは文字列だけなので、数値として比べるときは Number(...) で戻します。

付録: 応用課題 6 の答え — リセットに残るバグ

原因は 3-3 の setTimeout(unflipCards, 800) です。リセットで盤面は作り直されますが、ブラウザに預けた予約はそのまま残り、800ms 後に発火します。発火した unflipCards は、リセットで null に戻った firstCard を読もうとして落ちます。

setTimeout の返り値を控えておいて、リセットのときに取り消します。

let unflipTimerId = null; // 他の状態変数と並べて置く

function handleMismatch() {
  lockBoard = true;
  unflipTimerId = setTimeout(unflipCards, 800); // id を控えておく
}

function resetGame() {
  stopTimer();
  clearTimeout(unflipTimerId); // 予約も取り消す
  // 以下はそのまま
}

5-3 で setInterval に clearInterval を用意したのと同じ形です。ブラウザに預けたものは、要らなくなったら取り消します。

付録: sort でシャッフル — 分布を比べてみる

同じ条件 (N=8, 200,000 回) で sort と Fisher-Yates を回した結果です。左は特定のセルが濃くなっているのに対し、右は全セルが 12.5% 前後に収まります。

付録: sort でシャッフル — なぜ偏るのか

要素が 3 つのときで考えます。

理想: 並び方は 3! = 6 通り。一様シャッフルなら、6 通りが各 1/6 ≈ 16.7% で出るべきです。

実際: sort(() => Math.random() - 0.5) の内部で作れる「比較の答えの組み合わせ」は、比較を 3 回行う実装なら全部で 27 通り (= 3^3) あります。27 通りの結果を 6 通りの並びに割り当てると、27 ÷ 6 = 4 あまり 3。あまりのぶんが偏りとして現れます。

比較の回数は処理系によって変わるため、上の数値も実装依存です。ただし n^n が n! の倍数にならない限り、要素数を増やしても偏り自体は残ります。

詳しくは → シャッフルした結果が偏ると相談を受けたときに確認すること (Zenn)

付録: ブラウザが関数を呼ぶ仕組み (イベント駆動)

script.js が実行するのは、変数の宣言と renderBoard() の呼び出しだけです。それでもクリックするとカードがめくれます。handleCardClick を呼んでいるのは誰でしょうか。

ブラウザです。addEventListener で関数を預けると、待つのも呼ぶのもブラウザがやります。この作りをイベント駆動と呼びます。

不一致のカードを伏せに戻す setTimeout も同じ形です。きっかけがクリックから時間に変わるだけです。