【HTML,CSS,JavaScript】数字パズルゲームを作成

// 難易度設定の定義
const DIFFICULTY_SETTINGS = {
  easy: { target: 15, description: "3つの数字を選んで合計15にしてください。" },
  normal: {
    target: 17,
    description: "3つの数字を選んで合計17にしてください。",
  },
  hard: { target: 19, description: "3つの数字を選んで合計19にしてください。" },
};

// サウンドファイルのパス
const SOUND_PATHS = {
  correct: "sounds/correct.mp3",
  wrong: "sounds/wrong.mp3",
  gameOver: "sounds/game-over.mp3",
};

// ゲーム時間（秒）
const GAME_DURATION = 60;

// ランダムな数字を生成する関数
function getRandomNumber(max) {
  return Math.floor(Math.random() * max) + 1;
}

// サウンドを再生する関数
function playSound(sound, isMuted) {
  if (!isMuted) {
    sound.play();
  }
}

// UI管理クラス
class UI {
  constructor() {
    // DOM要素の取得
    this.elements = {
      puzzleGrid: document.getElementById("puzzle-grid"),
      startButton: document.getElementById("start-button"),
      timerDisplay: document.getElementById("timer"),
      scoreDisplay: document.getElementById("score"),
      highScoreDisplay: document.getElementById("high-score"),
      difficultySelect: document.getElementById("difficulty-select"),
      gameInfo: document.getElementById("game-info"),
      gameInstructions: document.getElementById("game-instructions"),
      muteButton: document.getElementById("mute-button"),
      resetHighScoreButton: document.getElementById("reset-high-score"),
    };
  }

  // パズルグリッドの作成
  createPuzzleGrid(tileCount, onTileClick) {
    // 既存のグリッドをクリア
    this.elements.puzzleGrid.innerHTML = "";
    const gridSize = Math.sqrt(tileCount);
    this.elements.puzzleGrid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;

    // タイルの生成
    for (let i = 0; i < tileCount; i++) {
      const tile = document.createElement("div");
      tile.classList.add("puzzle-tile");
      tile.textContent = getRandomNumber(this.getMaxNumber());
      tile.addEventListener("click", () => onTileClick(tile));
      this.elements.puzzleGrid.appendChild(tile);
    }
  }

  // 難易度に応じた最大数を取得
  getMaxNumber() {
    const difficulty = this.elements.difficultySelect.value;
    return difficulty === "easy" ? 9 : difficulty === "normal" ? 12 : 15;
  }

  // タイマーの更新
  updateTimer(timeLeft) {
    this.elements.timerDisplay.textContent = `時間: ${timeLeft}秒`;
  }

  // スコアの更新
  updateScore(score) {
    this.elements.scoreDisplay.textContent = `スコア: ${score}`;
  }

  // ハイスコアの表示
  displayHighScore(highScore) {
    this.elements.highScoreDisplay.textContent = `ハイスコア: ${highScore}`;
  }

  // 全難易度のハイスコアを表示
  displayAllHighScores(highScores) {
    this.elements.highScoreDisplay.innerHTML = `
      <h3>ハイスコア</h3>
      <p>Easy: ${highScores.easy || 0}</p>
      <p>Normal: ${highScores.normal || 0}</p>
      <p>Hard: ${highScores.hard || 0}</p>
    `;
  }

  // ゲーム説明の表示
  showGameInstructions() {
    this.elements.gameInstructions.innerHTML = `
      <h2>ゲーム説明</h2>
      <p>このゲームは、制限時間内にできるだけ多くの正解を見つけるパズルゲームです。</p>
      <h3>遊び方</h3>
      <ol>
        <li>難易度を選択し、「ゲーム開始」ボタンをクリックします。</li>
        <li>表示された数字のタイルから3つを選びます。</li>
        <li>選んだ3つの数字の合計が目標値と一致すれば正解です。</li>
        <li>制限時間内にできるだけ多くの正解を見つけてください。</li>
      </ol>
      <p>難易度が上がるほど、タイルの数が増え、数字の範囲が広がり、目標値も大きくなります。</p>
    `;
  }

  // ミュートボタンの切り替え
  toggleMuteButton(isMuted) {
    this.elements.muteButton.textContent = isMuted ? "🔇" : "🔊";
  }

  // ゲーム状態に応じたUI更新
  setGameState(isPlaying) {
    this.elements.startButton.disabled = isPlaying;
    this.elements.difficultySelect.disabled = isPlaying;
    this.elements.resetHighScoreButton.disabled = isPlaying;
    this.elements.gameInstructions.style.display = isPlaying ? "none" : "block";
    this.elements.gameInfo.style.display = isPlaying ? "block" : "none";
  }
}

// ゲーム管理クラス
class Game {
  constructor(ui) {
    this.ui = ui;
    this.state = {
      timer: null,
      score: 0,
      timeLeft: GAME_DURATION,
      selectedTiles: [],
      difficulty: "easy",
      highScores: JSON.parse(localStorage.getItem("highScores")) || {
        easy: 0,
        normal: 0,
        hard: 0,
      },
      isMuted: false,
    };
    this.sounds = {
      correct: new Audio(SOUND_PATHS.correct),
      wrong: new Audio(SOUND_PATHS.wrong),
      gameOver: new Audio(SOUND_PATHS.gameOver),
    };

    this.bindEvents();
  }

  // イベントリスナーの設定
  bindEvents() {
    this.ui.elements.startButton.addEventListener("click", () =>
      this.startGame()
    );
    this.ui.elements.muteButton.addEventListener("click", () =>
      this.toggleMute()
    );
    this.ui.elements.resetHighScoreButton.addEventListener("click", () =>
      this.resetHighScore()
    );
  }

  // ゲーム開始
  startGame() {
    this.state.difficulty = this.ui.elements.difficultySelect.value;
    this.createPuzzleGrid();
    this.state.score = 0;
    this.state.timeLeft = GAME_DURATION;
    this.ui.updateTimer(this.state.timeLeft);
    this.ui.updateScore(this.state.score);
    this.ui.displayHighScore(this.state.highScores[this.state.difficulty]);
    this.ui.setGameState(true);

    // タイマーの設定
    if (this.state.timer) {
      clearInterval(this.state.timer);
    }

    this.state.timer = setInterval(() => {
      this.state.timeLeft--;
      this.ui.updateTimer(this.state.timeLeft);
      if (this.state.timeLeft <= 0) {
        clearInterval(this.state.timer);
        this.endGame();
      }
    }, 1000);
  }

  // パズルグリッドの作成
  createPuzzleGrid() {
    const tileCount =
      this.state.difficulty === "easy"
        ? 16
        : this.state.difficulty === "normal"
        ? 25
        : 36;
    this.ui.createPuzzleGrid(tileCount, (tile) => this.handleTileClick(tile));
    this.ui.elements.gameInfo.textContent =
      DIFFICULTY_SETTINGS[this.state.difficulty].description;
  }

  // タイルクリック時の処理
  handleTileClick(tile) {
    if (
      this.state.selectedTiles.length < 3 &&
      !this.state.selectedTiles.includes(tile)
    ) {
      tile.classList.add("selected");
      this.state.selectedTiles.push(tile);

      if (this.state.selectedTiles.length === 3) {
        setTimeout(() => this.checkSum(), 300);
      }
    }
  }

  // 選択された数字の合計チェック
  checkSum() {
    const sum = this.state.selectedTiles.reduce(
      (acc, tile) => acc + parseInt(tile.textContent),
      0
    );
    const target = DIFFICULTY_SETTINGS[this.state.difficulty].target;

    if (sum === target) {
      // 正解の場合
      this.state.score +=
        this.state.difficulty === "easy"
          ? 10
          : this.state.difficulty === "normal"
          ? 15
          : 20;
      this.ui.updateScore(this.state.score);
      playSound(this.sounds.correct, this.state.isMuted);
      this.state.selectedTiles.forEach((tile) => {
        tile.classList.add("correct");
        setTimeout(() => {
          tile.textContent = getRandomNumber(this.ui.getMaxNumber());
          tile.classList.remove("selected", "correct");
        }, 500);
      });
    } else {
      // 不正解の場合
      this.state.selectedTiles.forEach((tile) =>
        tile.classList.remove("selected")
      );
      playSound(this.sounds.wrong, this.state.isMuted);
    }
    this.state.selectedTiles = [];
  }

  // ゲーム終了処理
  endGame() {
    playSound(this.sounds.gameOver, this.state.isMuted);
    setTimeout(() => {
      alert(`ゲーム終了！スコア: ${this.state.score}`);
      this.ui.setGameState(false);
      this.ui.elements.puzzleGrid.innerHTML = "";
      this.ui.showGameInstructions();
      this.updateHighScore();
      this.ui.displayAllHighScores(this.state.highScores);
    }, 100);
  }

  // ハイスコアの更新
  updateHighScore() {
    if (this.state.score > this.state.highScores[this.state.difficulty]) {
      this.state.highScores[this.state.difficulty] = this.state.score;
      localStorage.setItem("highScores", JSON.stringify(this.state.highScores));
    }
  }

  // ミュート切り替え
  toggleMute() {
    this.state.isMuted = !this.state.isMuted;
    this.ui.toggleMuteButton(this.state.isMuted);
  }

  // ハイスコアのリセット
  resetHighScore() {
    const difficulty = this.ui.elements.difficultySelect.value;
    if (
      confirm(
        `${
          difficulty.charAt(0).toUpperCase() + difficulty.slice(1)
        }のハイスコアをリセットしますか？`
      )
    ) {
      this.state.highScores[difficulty] = 0;
      localStorage.setItem("highScores", JSON.stringify(this.state.highScores));
      this.ui.displayAllHighScores(this.state.highScores);
    }
  }
}

// DOMコンテンツ読み込み完了時の処理
document.addEventListener("DOMContentLoaded", () => {
  const ui = new UI();
  const game = new Game(ui);

  ui.showGameInstructions();
  ui.displayAllHighScores(game.state.highScores);
});