はじめに

いよいよ本格的な冬になってきましたね。
外は寒くて家の中にいることも多くなったと思います。そこで今回は、カードゲームの定番の一つの神経衰弱をjsを使って書いていこうと思います。

ソースコード一覧

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>神経衰弱 - CPU対戦</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>神経衰弱 - CPU対戦</h1>
  <p id="instructions">プレイヤー vs CPU！カードを2枚めくってペアを揃えましょう。</p>
  <div id="score-board">
    <span id="player-score">プレイヤー: 0</span> | 
    <span id="cpu-score">CPU: 0</span>
  </div>
  <div id="game-board" class="game-board"></div>
  <button id="restart-button">リスタート</button>
  <script src="script.js"></script>
</body>
</html>

javaScript

const symbols = ["🍎", "🍌", "🍇", "🍓", "🍍", "🍒"];
const cards = [...symbols, ...symbols]; // ペアを作成

const gameBoard = document.getElementById("game-board");
const playerScoreElement = document.getElementById("player-score");
const cpuScoreElement = document.getElementById("cpu-score");
const restartButton = document.getElementById("restart-button");

// 状態管理
let firstCard = null;
let secondCard = null;
let preventClick = false;
let matchedCount = 0;
let playerScore = 0;
let cpuScore = 0;
let isPlayerTurn = true; // プレイヤーのターン管理

// カードをシャッフルする関数
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
shuffle(cards);

// カード生成
function createCards() {
  cards.forEach((symbol) => {
    const card = document.createElement("div");
    card.classList.add("card");
    card.dataset.symbol = symbol;

    card.addEventListener("click", () => {
      if (preventClick || !isPlayerTurn || card.classList.contains("flipped") || card.classList.contains("matched")) {
        return;
      }

      flipCard(card);

      if (!firstCard) {
        firstCard = card; // 最初のカード
      } else {
        secondCard = card; // 2枚目のカード
        checkMatch();
      }
    });

    gameBoard.appendChild(card);
  });
}

// カードを裏返す
function flipCard(card) {
  card.classList.add("flipped");
  card.textContent = card.dataset.symbol;
}

// カードを裏返す（元に戻す）
function unflipCards(card1, card2) {
  setTimeout(() => {
    card1.classList.remove("flipped");
    card2.classList.remove("flipped");
    card1.textContent = "";
    card2.textContent = "";
  }, 1000);
}

// ペア判定
function checkMatch() {
  if (firstCard.dataset.symbol === secondCard.dataset.symbol) {
    firstCard.classList.add("matched");
    secondCard.classList.add("matched");

    // スコア加算
    if (isPlayerTurn) {
      playerScore++;
      playerScoreElement.textContent = `プレイヤー: ${playerScore}`;
    } else {
      cpuScore++;
      cpuScoreElement.textContent = `CPU: ${cpuScore}`;
    }

    matchedCount += 1;

    // ゲーム終了判定
    if (matchedCount === cards.length / 2) {
      setTimeout(() => {
        const winner = playerScore > cpuScore ? "プレイヤーの勝ち！" : "CPUの勝ち！";
        alert(`${winner}`);
      }, 500);
    }

    // ペアが揃った場合はターンを維持
    resetTurn(false); // ターンを切り替えない
    if (!isPlayerTurn) {
      setTimeout(cpuTurn, 1000); // CPUがペアを当てたらもう一度カードをめくる
    }
  } else {
    preventClick = true;
    unflipCards(firstCard, secondCard);
    setTimeout(() => {
      resetTurn(true); // ターンを切り替える
    }, 1000);
  }
}

// ターンをリセット
function resetTurn(switchTurn) {
  firstCard = null;
  secondCard = null;
  preventClick = false;

  // ターンを切り替える場合のみフラグを変更
  if (switchTurn) {
    isPlayerTurn = !isPlayerTurn;

    // CPUのターンの場合は自動で動作
    if (!isPlayerTurn) {
      setTimeout(cpuTurn, 1000);
    }
  }
}

// CPUのターン
function cpuTurn() {
  const availableCards = Array.from(document.querySelectorAll(".card:not(.flipped):not(.matched)"));

  if (availableCards.length < 2) return;

  // ランダムで2枚のカードを選ぶ
  const firstChoice = availableCards[Math.floor(Math.random() * availableCards.length)];
  flipCard(firstChoice);

  let secondChoice;
  do {
    secondChoice = availableCards[Math.floor(Math.random() * availableCards.length)];
  } while (secondChoice === firstChoice);

  setTimeout(() => {
    flipCard(secondChoice);
    firstCard = firstChoice;
    secondCard = secondChoice;
    checkMatch();
  }, 1000);
}

// ゲームリセット
function resetGame() {
  gameBoard.innerHTML = "";
  firstCard = null;
  secondCard = null;
  preventClick = false;
  matchedCount = 0;
  playerScore = 0;
  cpuScore = 0;
  isPlayerTurn = true;

  playerScoreElement.textContent = "プレイヤー: 0";
  cpuScoreElement.textContent = "CPU: 0";

  shuffle(cards);
  createCards();
}

// 初期化
createCards();
restartButton.addEventListener("click", resetGame);

CSS

/* 基本スタイル */
body {
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

h1 {
  margin-top: 20px;
  color: #333;
}

#instructions {
  margin: 10px 0;
  font-size: 16px;
  color: #555;
}

/* ゲームボード */
.game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  max-width: 600px;
  margin: 20px auto;
}

/* カードスタイル */
.card {
  width: 100px;
  height: 150px;
  background-color: #ccc;
  border: 2px solid #333;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: transparent;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s;
}

.card.flipped, .card.matched {
  background-color: #fff;
  color: #000;
  cursor: default;
  transform: rotateY(180deg);
}

/* リスタートボタン */
#restart-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#restart-button:hover {
  background-color: #0056b3;
}
/* スコア表示 */
#score-board {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

コードの解説

　カードの生成をしている関数では、配列 cards をループして、それぞれのシンボルに対応するカードを1枚ずつ作成します。最初のカードをクリックすると firstCard にセットし、2枚目のカードをクリックすると secondCard にセットし、ペア判定を行います。さらに、生成されたカードをすべて gameBoard に追加し、プレイ可能な状態にします。
　ペア判定をしている関数ではdataset.symbol を比較して、2枚のカードが同じシンボルであるかを判定しています。
　CPUの行動を設定している関数では、random関数を使用し一枚目のめくるカードを決定し、二枚目のめくるカードを決めるときはdo文を使い一枚目のカードと被らないようにしています。

実行結果

スタート画面
実行中

ペアを当てた時

プレイヤー勝利時

CPU勝利時

まとめ

　神経衰弱を作ってみて思ったことはカードのペア判定やCPUのカードのめくり方を定義することがとても難しいと感じました。
　また、改善点として、CPUのカードのめくり方をめくられたことのあるカードの配置を記憶し、そのデータをもとにめくるカードを決めるといった機能の追加ができればさらにjsについての理解を深めることができると思いました。