【ゲーム】JavaScript：48 キン肉マンクイズ

　「💪キン肉マンクイズ」は、人気プロレス漫画『キン肉マン』に関する知識を楽しく試せる4択クイズゲームです。原作の登場キャラクターや技、ストーリーなど幅広いジャンルから全30問を用意し、毎回ランダムで10問が出題されます。ファン同士の対戦やイベントにもおすすめです。

遊び方・操作方法

  1. タイトル画面で「💥 スタート！」ボタンを押してゲームを始めます。
  2. 各問題は4つの選択肢ボタンから1つ選んでクリックします。
  3. 選択後は即座に正誤メッセージと効果音が鳴り、「次の問題 ➡️」ボタンで次の問題へ進みます。
  4. 全10問解答後、正解数と正答率が表示されます。
  5. 「🏠 タイトル画面に戻る」ボタンで最初の画面に戻り、何度でも挑戦可能です。

ゲームのルール

  • 毎回30問の中からランダムに10問が出題されます。
  • 全て4択クイズ形式、選択肢は都度ランダムに並び替えられます。
  • 回答後に正解・不正解の解説メッセージと効果音が表示・再生されます。
  • 全問終了時に正解数と正答率が表示されます。
  • 問題・解説は日本語で表示されます。

🎮ゲームプレイ

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

48 キン肉マンクイズ

素材のダウンロード

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

効果音：魔王魂

kinnikuman_quizダウンロード
kinnikuman_quiz_title.pngkinnikuman_quiz_bg.png

ゲーム画面イメージ

プログラム全体（kinnikuman_quiz.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=700">
  <title>💪 キン肉マンクイズ 🔥</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'BIZ UDPGothic', 'Arial Black', 'Arial', sans-serif;
      background-image: url('kinnikuman_quiz_bg.png');
      background-size: cover;
      background-position: center;
      min-height: 100vh;
      color: #F9E9BD;
      display: flex; justify-content: center; align-items: center;
    }
    #quiz-container {
      background: linear-gradient(135deg, rgba(44,22,12,0.91) 82%, rgba(252,160,41,0.16) 100%);
      border: 5px solid #f4ad2e;
      border-radius: 22px;
      width: 700px; max-width: 96vw;
      min-height: 540px;
      padding: 30px 40px 30px 40px;
      box-shadow: 0 0 30px 8px #773b11;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    h1 {
      font-size: 2.5rem;
      color: #ffe35c;
      margin-bottom: 18px;
      letter-spacing: 3px;
      text-shadow: 2px 2px 13px #b85c13, 1px 1px 2px #fff;
      font-family: 'BIZ UDPGothic','Arial Black', 'Arial', sans-serif;
      background: rgba(85,38,13,0.19);
      border-radius: 12px;
      padding: 10px 0 10px 0;
      box-shadow: 0 2px 12px #fff4;
    }
    #title-screen img {
      display: block;
      margin: 0 auto 16px auto;
      max-width: 75%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 4px 18px #a64c00;
      border: 2px solid #ffe35c;
      background: #fff8;
    }
    .rules-title {
      text-align: center;
      font-weight: bold;
      font-size: 1.4rem;
      color: #ffe35c;
      margin-top: 15px;
      text-shadow: 1px 1px 7px #a64c00;
      letter-spacing: 1.5px;
      background: rgba(90,44,19,0.11);
      border-radius: 8px;
      padding: 7px 0;
    }
    .rules-body {
      text-align: left;
      margin: 0 10px 16px 10px;
      font-size: 1.13rem;
      line-height: 1.8;
      color: #F9E9BD;
      text-shadow: 0 1px 3px #773b11;
      background: rgba(120,62,18,0.14);
      border-radius: 8px;
      padding: 11px 12px 13px 15px;
    }
    button {
      padding: 12px 38px;
      font-size: 1.18rem;
      border-radius: 9px;
      border: 2.5px solid #ffe35c;
      margin: 17px 10px 0 10px;
      background: linear-gradient(90deg, #c47219 70%, #ffe35c 100%);
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 1px 2px 8px #773b11;
      transition: background 0.18s, transform 0.09s, color 0.13s;
      text-shadow: 1px 1px 1px #fff8;
    }
    button:hover {
      background: linear-gradient(90deg, #8b4000 75%, #ffebb7 100%);
      color: #c47219;
      transform: scale(1.03);
    }
    #choices-container button {
      background: linear-gradient(90deg, #a64c00 75%, #ffe35c 100%);
      margin: 7px 0;
      font-size: 1.13rem;
      border-radius: 9px;
      border: 2px solid #ffe35c;
      box-shadow: 0 1px 6px #773b11;
      color: #fff;
      font-weight: bold;
      text-shadow: 1px 1px 2px #000b;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      transition: background 0.18s, color 0.12s;
    }
    #choices-container button:hover {
      background: linear-gradient(90deg, #c47219 80%, #fff4ad 100%);
      color: #ffe35c;
      border-color: #ffe35c;
    }
    #title-screen, #game-screen, #result-screen {
      display: none;
    }
    #title-screen.active, #game-screen.active, #result-screen.active {
      display: block;
    }
    #question-number {
      font-size: 1.13rem;
      margin-bottom: 7px;
      color: #ffe35c;
      font-weight: bold;
      text-shadow: 1px 1px 4px #a64c00;
      background: rgba(255,255,255,0.13);
      border-radius: 7px;
      padding: 4px 0;
      margin-top: 10px;
      box-shadow: 0 1px 4px #fff7;
      width: 85%;
      margin-left: auto;
      margin-right: auto;
    }
    #question-text {
      font-size: 1.42rem;
      margin: 20px 0 18px 0;
      letter-spacing: 1.2px;
      color: #fffbe9;
      background: rgba(204,110,21,0.16);
      border-radius: 8px;
      box-shadow: 0 1px 7px #fff7;
      padding: 13px 8px 13px 8px;
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      font-weight: bold;
      text-align: center;
      text-shadow: 1px 1px 6px #a64c00, 0 1px #fff7;
    }
    #feedback {
      font-size: 1.28rem;
      font-weight: bold;
      background: linear-gradient(90deg, #a64c0080 80%, #ffe35c99 100%);
      border-radius: 12px;
      padding: 13px 0;
      min-height: 36px;
      margin-bottom: 15px;
      color: #fff;
      text-shadow: 1px 1px 6px #a64c00, 0 1px #fff9;
      border: 2px solid #ffe35c;
      box-shadow: 0 2px 8px #fff3;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      display: none;
    }
    #result-message {
      font-size: 1.52rem;
      color: #ffe35c;
      font-weight: bold;
      margin: 48px 0 30px 0;
      text-shadow: 2px 2px 12px #b85c13, 1px 1px 3px #fff7;
      background: rgba(170,95,15,0.14);
      border-radius: 13px;
      padding: 14px 0;
      box-shadow: 0 2px 13px #fff3;
    }
    #return-button {
      display: block;
      margin: 0 auto;
      background: linear-gradient(90deg, #a64c00 85%, #ffe35c 100%);
      font-size: 1.17rem;
      color: #fff;
      font-weight: bold;
      border: 2.3px solid #ffe35c;
      border-radius: 9px;
      box-shadow: 2px 4px 12px #fff, 0 1px 7px #b9a644;
      text-shadow: 1px 1px 1px #fff8;
      letter-spacing: 1px;
      border-bottom: 4px solid #ffe35c;
      transition: background 0.15s, color 0.1s;
    }
    #return-button:hover { background: #fffbe9; color: #a64c00; }
    @media (max-width:780px) {
      #quiz-container { padding: 8px 3vw; min-width: 0; width: 99vw;}
      h1 { font-size: 1.7rem; }
      #result-message, #question-text, #feedback { font-size: 1.1rem;}
      #choices-container button { font-size: 1rem; padding: 15px 0;}
    }
  </style>
</head>
<body>
  <div id="quiz-container">
    <h1>💪 キン肉マンクイズ 🔥</h1>
    <!-- タイトル画面 -->
    <div id="title-screen" class="active">
      <img src="kinnikuman_quiz_title.png" alt="キン肉マンクイズ タイトル画像">
      <div class="rules-title">🔥 ルール説明 🔥</div>
      <div class="rules-body">
        ・「キン肉マン」に関するクイズが全30問用意されています。<br>
        ・4つの選択肢から正しい答えを1つ選んでください。<br>
        ・<b>毎回ランダムで10問が出題されます！</b><br>
        ・終了時に正答率が表示されます。<br>
        ・問題・結果は全て日本語で表示されます。
      </div>
      <button id="start-button">💥 スタート！</button>
    </div>
    <!-- ゲーム画面 -->
    <div id="game-screen">
      <div id="question-number"></div>
      <div id="question-text"></div>
      <div id="choices-container"></div>
      <div id="feedback"></div>
      <button id="next-button" style="display:none;">次の問題 ➡️</button>
    </div>
    <!-- 結果画面 -->
    <div id="result-screen">
      <div id="result-message"></div>
      <button id="return-button" style="display:none;">🏠 タイトル画面に戻る</button>
    </div>
    <!-- 効果音 -->
    <audio id="correct-sound" src="maoudamashii-quiz_correct.mp3"></audio>
    <audio id="incorrect-sound" src="maoudamashii-quiz_incorrect.mp3"></audio>
  </div>
  <script>
  window.onload = function() {
    // ==== キン肉マンクイズ30問（自由に増減・編集可） ====
    const questions = [
      {q: "キン肉マンの本名は？",choices: ["キン肉スグル", "キン肉アタル", "ロビンマスク", "テリーマン"],answer: "キン肉スグル"},
      {q: "キン肉マンのライバルで“悪魔超人”のリーダーは？",choices: ["バッファローマン", "アシュラマン", "ブラックホール", "ステカセキング"],answer: "バッファローマン"},
      {q: "キン肉マンの得意技は？",choices: ["キン肉バスター", "マッスルスパーク", "パロ・スペシャル", "スピニング・トゥ・ホールド"],answer: "キン肉バスター"},
      {q: "キン肉マンの父親は？",choices: ["キン肉真弓", "キン肉アタル", "ラーメンマン", "ジェロニモ"],answer: "キン肉真弓"},
      {q: "正義超人“テリーマン”の出身国は？",choices: ["アメリカ", "日本", "中国", "イギリス"],answer: "アメリカ"},
      {q: "“ロビンマスク”の国籍は？",choices: ["イギリス", "アメリカ", "日本", "カナダ"],answer: "イギリス"},
      {q: "悪魔六騎士の一人で顔が6つある超人は？",choices: ["アシュラマン", "バッファローマン", "サンシャイン", "ブラックホール"],answer: "アシュラマン"},
      {q: "キン肉マンが最初に戦った悪魔超人は？",choices: ["ブラックホール", "ミスターカーメン", "バッファローマン", "ステカセキング"],answer: "ブラックホール"},
      {q: "“ミートくん”の本名は？",choices: ["アレキサンドリア・ミート", "ミート・グッドマン", "タロー・ミート", "アレキサンドリア・ロビン"],answer: "アレキサンドリア・ミート"},
      {q: "“ウォーズマン”の必殺技は？",choices: ["パロ・スペシャル", "キン肉バスター", "クロスボンバー", "ブリッジドライバー"],answer: "パロ・スペシャル"},
      {q: "ラーメンマンの出身国は？",choices: ["中国", "日本", "アメリカ", "カナダ"],answer: "中国"},
      {q: "正義超人のリーダーは？",choices: ["キン肉マン", "テリーマン", "ロビンマスク", "ラーメンマン"],answer: "キン肉マン"},
      {q: "ネプチューンマンが得意とするプロレス技は？",choices: ["クロスボンバー", "パイルドライバー", "バックドロップ", "レッグラリアット"],answer: "クロスボンバー"},
      {q: "“ジェロニモ”の職業は？",choices: ["インディアン戦士", "科学者", "レスラー", "医者"],answer: "インディアン戦士"},
      {q: "バッファローマンの角の本数は？",choices: ["2本", "4本", "6本", "0本"],answer: "2本"},
      {q: "キン肉マンとロビンマスクの共通点は？",choices: ["正義超人", "悪魔超人", "超人師弟コンビ", "父子"],answer: "正義超人"},
      {q: "“モンゴルマン”の正体は？",choices: ["ラーメンマン", "ウォーズマン", "ジェロニモ", "バッファローマン"],answer: "ラーメンマン"},
      {q: "“ブロッケンJr.”のトレードマークは？",choices: ["軍帽", "サングラス", "ロングヘアー", "コスチューム"],answer: "軍帽"},
      {q: "アシュラマンの父親は？",choices: ["シバ", "サタン", "キン肉真弓", "ネプチューンマン"],answer: "シバ"},
      {q: "キン肉星の王位継承戦に登場する超人は？",choices: ["マリポーサ", "ウォーズマン", "ラーメンマン", "バッファローマン"],answer: "マリポーサ"},
      {q: "“ステカセキング”の能力は？",choices: ["変身", "炎", "氷", "電気"],answer: "変身"},
      {q: "キン肉マンII世の主人公は？",choices: ["キン肉万太郎", "キン肉スグル", "テリーマンJr.", "ロビンマスクJr."],answer: "キン肉万太郎"},
      {q: "“プリンス・カメハメ”の出身国は？",choices: ["ハワイ", "日本", "アメリカ", "ブラジル"],answer: "ハワイ"},
      {q: "“カレクック”が使用する技は？",choices: ["カレーライスボム", "バナナスープレックス", "サンダーサイクロン", "トマトボム"],answer: "カレーライスボム"},
      {q: "“ザ・魔雲天”は何超人？",choices: ["雲超人", "炎超人", "氷超人", "雷超人"],answer: "雲超人"},
      {q: "“ミスターカーメン”のトレードマークは？",choices: ["エジプトの棺", "バッファローマンの角", "マスク", "バナナ"],answer: "エジプトの棺"},
      {q: "超人師弟コンビのメンバーは？",choices: ["キン肉マンとテリーマン", "ウォーズマンとロビンマスク", "バッファローマンとブラックホール", "ジェロニモとラーメンマン"],answer: "キン肉マンとテリーマン"},
      {q: "悪魔超人“サンシャイン”の体は何でできている？",choices: ["砂", "鉄", "水", "氷"],answer: "砂"},
      {q: "キン肉マンの宿敵で完璧超人始祖のリーダーは？",choices: ["シルバーマン", "ゴールドマン", "ネプチューンマン", "アタル"],answer: "ゴールドマン"},
      {q: "“キン肉アタル”はキン肉マンの何？",choices: ["兄", "弟", "親友", "父親"],answer: "兄"},
      {q: "“バッファローマン”の必殺技は？",choices: ["ハリケーン・ミキサー", "キン肉バスター", "クロスボンバー", "カレーライスボム"],answer: "ハリケーン・ミキサー"}
    ];
    let quizList = [];
    let currentQuestion = 0;
    let correctCount = 0;

    // ==== DOM要素取得 ====
    const titleScreen  = document.getElementById('title-screen');
    const gameScreen   = document.getElementById('game-screen');
    const resultScreen = document.getElementById('result-screen');
    const startBtn     = document.getElementById('start-button');
    const questionNum  = document.getElementById('question-number');
    const questionText = document.getElementById('question-text');
    const choicesBox   = document.getElementById('choices-container');
    const feedback     = document.getElementById('feedback');
    const nextBtn      = document.getElementById('next-button');
    const resultMsg    = document.getElementById('result-message');
    const returnBtn    = document.getElementById('return-button');
    const correctSE    = document.getElementById('correct-sound');
    const incorrectSE  = document.getElementById('incorrect-sound');

    // ==== 配列シャッフル ====
    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]];
      }
    }

    // ==== ゲーム開始 ====
    function startGame() {
      quizList = [...questions];
      shuffle(quizList);
      quizList = quizList.slice(0, 10); // 10問だけ出題
      currentQuestion = 0;
      correctCount = 0;
      titleScreen.classList.remove('active');
      resultScreen.classList.remove('active');
      gameScreen.classList.add('active');
      showQuestion();
    }

    // ==== 問題表示 ====
    function showQuestion() {
      let qData = quizList[currentQuestion];
      questionNum.textContent = `第${currentQuestion + 1}問 / 10`;
      questionText.textContent = qData.q;
      let choices = [...qData.choices];
      shuffle(choices);
      choicesBox.innerHTML = '';
      choices.forEach(choice => {
        let btn = document.createElement('button');
        btn.textContent = choice;
        btn.onclick = () => selectAnswer(choice, qData.answer);
        choicesBox.appendChild(btn);
      });
      // メッセージエリアは非表示
      feedback.style.display = "none";
      feedback.textContent = '';
      nextBtn.style.display = 'none';
    }

    // ==== 回答選択 ====
    function selectAnswer(selected, correct) {
      document.querySelectorAll('#choices-container button').forEach(b=>b.disabled=true);
      if (selected === correct) {
        feedback.textContent = "✨ 正解！筋肉の奇跡だ！";
        if (correctSE) { correctSE.currentTime = 0; correctSE.play(); }
        correctCount++;
      } else {
        feedback.textContent = `💀 不正解…正解は「${correct}」だ！`;
        if (incorrectSE) { incorrectSE.currentTime = 0; incorrectSE.play(); }
      }
      feedback.style.display = "block";
      nextBtn.style.display = "inline-block";
    }

    // ==== 次の問題へ ====
    function nextQuestion() {
      currentQuestion++;
      if (currentQuestion < quizList.length) {
        showQuestion();
      } else {
        endGame();
      }
    }

    // ==== 終了画面 ====
    function endGame() {
      gameScreen.classList.remove('active');
      resultScreen.classList.add('active');
      let rate = Math.round((correctCount / quizList.length) * 100);
      resultMsg.innerHTML =
        `🎉 クイズ終了！あなたの正答率は <span style="color:#ffe35c">${rate}%</span> です！<br>` +
        `（${correctCount} / ${quizList.length}問）`;
      returnBtn.style.display = 'block';
    }

    // ==== タイトルへ戻る ====
    function toTitle() {
      resultScreen.classList.remove('active');
      titleScreen.classList.add('active');
      returnBtn.style.display = 'none';
    }

    // ==== イベント登録 ====
    startBtn.addEventListener('click', startGame);
    nextBtn.addEventListener('click', nextQuestion);
    returnBtn.addEventListener('click', toTitle);

    // ==== 初期画面表示 ====
    titleScreen.classList.add('active');
    gameScreen.classList.remove('active');
    resultScreen.classList.remove('active');
  }
  </script>
</body>
</html>

アルゴリズムの流れ

ステップ内容
1. 初期表示タイトル画面を表示し、「スタート！」ボタン待ち
2. ゲーム開始問題リストをシャッフル→10問抽出→ゲーム画面に切り替え、最初の問題を表示
3. 問題表示問題・4択ボタンを表示（選択肢もシャッフル）、回答ボタンの有効化
4. 回答選択選択肢をクリック→正誤判定→メッセージ表示＆効果音→次の問題ボタン表示
5. 次の問題問題カウンタ加算、残りがあれば「3」に戻る、無ければ「6」に進む
6. 終了画面スコア（正解数と正答率）を表示、「タイトル画面に戻る」ボタンを有効化
7. タイトル復帰タイトル画面に戻り、再挑戦可能

主な関数・命令の役割

関数・変数名役割・説明
questions問題・選択肢・答えのデータ配列
shuffle(array)配列要素をランダムに並べ替える（Fisher–Yatesアルゴリズム）
startGame()クイズリスト初期化、10問抽出、初期状態セット
showQuestion()問題文・4択選択肢を画面に描画
selectAnswer(selected, correct)回答判定、正誤メッセージと効果音、ボタン無効化・次ボタン表示
nextQuestion()次の問題 or 終了判定
endGame()正答率・正解数を表示、終了画面切り替え
toTitle()タイトル画面に復帰

関数の詳細

関数名主な処理内容
shuffle(array)配列の要素をランダムにシャッフル
startGame()クイズリスト初期化・抽選・画面切り替え
showQuestion()問題文、選択肢ボタンの動的生成・配置
selectAnswer()選択肢の正誤判定・メッセージ＆効果音再生・ボタン無効化
nextQuestion()カウンタ加算し、次の問題 or 終了処理へ
endGame()スコア表示、終了画面表示
toTitle()終了画面を隠し、タイトル画面表示

改造のポイント

  • 問題の追加や差し替え
    → questions配列に問題オブジェクト（q/choices/answer）を追加・編集するだけでOK。
  • 出題数の変更
    → quizList.slice(0, 10) の「10」を他の数字に変更すれば、毎回の出題数が変わります。
  • 難易度設定やタイムアタック
    → 問題を難易度別に分けてランダム選択、タイマー制限などもアレンジ可能です。
  • デザイン・演出の強化
    → CSSや効果音・画像・キャラ演出を増やしてオリジナル性を出すと盛り上がります。
  • 解説文やヒント追加
    → 回答後にミニ解説やヒント表示もできます。

アドバイス

　この「キン肉マンクイズ」は設問・デザイン・演出を簡単にカスタマイズできる構造です。
ファン同士の対戦イベントや、知識自慢大会にもぴったり！設問や演出を工夫し、みんなで「キン肉マン」の世界をもっと楽しみましょう。