【ゲーム】JavaScript：24 表情当てゲーム

　「表情当てゲーム」は、画面に表示される顔アイコン（絵文字）が表す感情を、５つの選択肢から瞬時に当てるシンプルなクイズゲームです。全５問に挑戦し、何問正解できるかを競います。

遊び方・操作方法

  1. タイトル画面の「スタート 🚀」ボタンをクリック
  2. 表示される顔アイコンを見て、下の顔文字＋感情ラベルのボタンをクリック
  3. 正解するとスコアが+1され、次の問題に移行
  4. ５問回答後、最終スコア（正解数）が表示される
  5. 「タイトル画面に戻る 🔄」で再挑戦可能

ルール

  • 出題数は５問固定
  • 顔アイコンはランダムに選ばれ、同じ問題が重複する可能性あり
  • 回答は１回限り
  • 正誤のフィードバックは即時には出ず、画面遷移時にスコア更新のみ行われる
  • 全問終了後に最終スコアを表示

🎮ゲームプレイ

以下のリンク先から実際にプレイできます。

24 表情当てゲーム

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

js-facial_expressionダウンロード
facial_expression_title.pngfacial_expression_bg.png

ゲーム画面イメージ

プログラム全文（facial_expression.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>😊 表情当てゲーム 😊</title>
  <style>
    /* 全体の背景に指定画像をフルスクリーンで表示 */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Arial', sans-serif;
      background: url('facial_expression_bg.png') no-repeat center center fixed;
      background-size: cover;
    }
    /* 画面中央に配置するオーバーレイ */
    .overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.85);
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      width: 90%;
      max-width: 400px;
    }
    /* 非表示用クラス */
    .hidden {
      display: none;
    }
    /* タイトル画像のサイズ調整 */
    .title-image {
      display: block;
      margin: 0 auto 10px;
      max-width: 80%;
      height: auto;
    }
    /* 汎用ボタンスタイル */
    .btn {
      padding: 10px 20px;
      font-size: 16px;
      margin-top: 15px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #007BFF;
      color: #fff;
    }
    /* 選択肢ボタン */
    .choices button {
      margin: 5px;
      padding: 10px 15px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #f0f0f0;
      transition: background-color 0.2s;
    }
    .choices button:hover {
      background-color: #ddd;
    }
    /* 表示されるアイコン */
    .icon-display {
      font-size: 80px;
      margin: 15px 0;
    }
    /* スコア表示 */
    .score-display {
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <!-- タイトル画面 -->
  <div id="title-screen" class="overlay">
    <img src="facial_expression_title.png" alt="表情当てゲーム" class="title-image">
    <h1>😊 表情当てクイズ 😊</h1>
    <p>ゲームの遊び方：表示される顔アイコンが表す感情を瞬時に判断してください。</p>
    <p>ルール：全5問。正しい感情を選択するとスコアが加算され、次の問題へ進みます。</p>
    <button id="start-btn" class="btn">スタート 🚀</button>
  </div>

  <!-- ゲーム画面 -->
  <div id="game-screen" class="overlay hidden">
    <h2>問題 <span id="question-number">1</span>/5</h2>
    <div id="icon-display" class="icon-display">😊</div>
    <div id="choices" class="choices"></div>
    <div class="score-display">スコア: <span id="score">0</span></div>
  </div>

  <!-- 終了画面 -->
  <div id="end-screen" class="overlay hidden">
    <h2>ゲーム終了 🎉</h2>
    <p id="final-message">あなたのスコアは 0/5 です！</p>
    <button id="restart-btn" class="btn">タイトル画面に戻る 🔄</button>
  </div>

  <script>
    // 問題データの配列（絵文字とその日本語ラベル）
    const icons = [
      { emoji: '😊', name: '笑顔' },
      { emoji: '😠', name: '怒り' },
      { emoji: '😢', name: '悲しみ' },
      { emoji: '😲', name: '驚き' },
      { emoji: '😎', name: 'クール' }
    ];

    // 定数：問題数
    const TOTAL_QUESTIONS = 5;

    // ゲーム状態を管理する変数
    let currentQuestion = 0;
    let score = 0;
    let questionOrder = [];

    // DOM要素を取得
    const titleScreen   = document.getElementById('title-screen');
    const gameScreen    = document.getElementById('game-screen');
    const endScreen     = document.getElementById('end-screen');
    const startBtn      = document.getElementById('start-btn');
    const restartBtn    = document.getElementById('restart-btn');
    const iconDisplay   = document.getElementById('icon-display');
    const choicesDiv    = document.getElementById('choices');
    const qNumberSpan   = document.getElementById('question-number');
    const scoreSpan     = document.getElementById('score');
    const finalMessageP = document.getElementById('final-message');

    // タイトル画面を表示
    function showTitleScreen() {
      titleScreen.classList.remove('hidden');
      gameScreen.classList.add('hidden');
      endScreen.classList.add('hidden');
    }

    // ゲーム開始処理
    function startGame() {
      // ゲーム変数初期化
      currentQuestion = 0;
      score = 0;
      scoreSpan.textContent = score;

      // 問題の出題順をランダムに作成
      questionOrder = [];
      for (let i = 0; i < TOTAL_QUESTIONS; i++) {
        // ランダムにアイコンを1つ選ぶ
        const idx = Math.floor(Math.random() * icons.length);
        questionOrder.push(idx);
      }

      // 画面切り替え
      titleScreen.classList.add('hidden');
      endScreen.classList.add('hidden');
      gameScreen.classList.remove('hidden');

      // 最初の問題を表示
      showQuestion();
    }

    // 問題表示処理
    function showQuestion() {
      // 問題番号更新
      qNumberSpan.textContent = currentQuestion + 1;
      // 現在のアイコンを取得
      const iconData = icons[questionOrder[currentQuestion]];
      // 表示
      iconDisplay.textContent = iconData.emoji;

      // 既存の選択肢をクリア
      choicesDiv.innerHTML = '';
      // 全選択肢ボタンを生成
      icons.forEach(item => {
        const btn = document.createElement('button');
        btn.textContent = `${item.emoji} ${item.name}`;
        // クリック時の判定処理を設定
        btn.addEventListener('click', () => handleChoice(item.name));
        choicesDiv.appendChild(btn);
      });
    }

    // 選択肢をクリックした際の処理
    function handleChoice(selectedName) {
      const correctName = icons[questionOrder[currentQuestion]].name;
      // 正解判定
      if (selectedName === correctName) {
        score++;
        scoreSpan.textContent = score;
      }
      // 次の問題へ進むか、終了処理
      currentQuestion++;
      if (currentQuestion < TOTAL_QUESTIONS) {
        showQuestion();
      } else {
        endGame();
      }
    }

    // ゲーム終了処理
    function endGame() {
      gameScreen.classList.add('hidden');
      endScreen.classList.remove('hidden');
      finalMessageP.textContent = `あなたのスコアは ${score}/${TOTAL_QUESTIONS} です！`;
    }

    // イベントリスナー設定
    document.addEventListener('DOMContentLoaded', () => {
      // スタートボタン
      startBtn.addEventListener('click', startGame);
      // タイトル画面に戻るボタン
      restartBtn.addEventListener('click', showTitleScreen);
      // 初期表示はタイトル画面
      showTitleScreen();
    });
  </script>
</body>
</html>

アルゴリズムの流れ

ステップ処理内容主な関数・命令
1. 初期化カウンタ・スコアをリセット、出題順をランダム生成startGame()
2. 問題表示問題番号・絵文字アイコンをセット、全選択肢ボタンを生成showQuestion()
3. 回答選択選択肢ボタンをクリック → 正誤判定 → スコア更新handleChoice()
4. 次問 or 終了判定回答後に currentQuestion を進め、次問 or endGame()handleChoice() → endGame()
5. 結果画面表示全問終了後にスコアを表示endGame()

関数の詳しい解説

関数名説明
showTitleScreen()タイトル画面を表示し、ゲーム画面・終了画面を隠す
startGame()currentQuestion と score をリセット、questionOrder をランダム生成、画面切り替え
showQuestion()questionOrder に従い絵文字を表示、全選択肢ボタンをクリア＆再生成
handleChoice()ユーザー選択を正解と比較、スコア加算、次の問題 or 終了判定
endGame()ゲーム画面を隠し、終了画面を表示、最終スコアをセット

改造のポイント

  • 出題数変更：TOTAL_QUESTIONS の値を変えるだけで問題数を増減できます。
  • 選択肢重複排除：現在は重複の可能性あり。出題ループ内で一度使ったインデックスを除外すると良いでしょう。
  • アニメ・演出追加：正解時・不正解時に色やアニメーションを付けると臨場感UP。
  • 効果音導入：正誤時に効果音を再生するAudio要素を追加すると、さらに盛り上がります。
  • データ拡張：icons 配列を外部JSON化して追加・編集を楽に。多様な表情を増やして練習装置としても活用可能。

アドバイス：回答ボタンを押した後に一瞬だけ正誤を色で示し（緑＝正解、赤＝不正解）、一定時間経過後に自動で次問へ切り替える機能を加えると、テンポよく遊べるようになります！