【ゲーム】JavaScript：47 銀河英雄伝説クイズ
「🚀 銀河英雄伝説クイズ」は、日本の人気SF小説・アニメ『銀河英雄伝説』を題材にしたファン向け4択クイズゲームです。登場人物、艦隊、名セリフなど、シリーズの世界観や物語に関する30問から、毎回ランダムに10問が出題されます。知識を試したいファン、復習したい人、仲間同士で競いたい人にもおすすめです。
遊び方・操作方法
- タイトル画面で「🚀 スタート！」ボタンを押すとクイズが開始されます。
- 各問題では4つの選択肢の中から、正解だと思うボタンをクリックしてください。
- 選択後は正誤メッセージと効果音が鳴り、「次の問題 ➡️」ボタンで次の問題に進みます。
- 全10問が終わると、正答率と正解数が表示されます。
- 「🏠 タイトル画面に戻る」ボタンでタイトル画面へ戻り、繰り返しプレイできます。
ルール
- 全30問の中から毎回ランダムで10問が出題されます。
- 各問題は4択で、1つ選択すると即座に正誤判定・解説メッセージが表示されます。
- 全問終了後にスコアと正答率が表示されます。
- 問題・解説は日本語で表示されます。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
47 銀河英雄伝説クイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| legend_galactic_heroes_quiz_title.png | legend_galactic_heroes_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（legend_galactic_heroes_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('legend_galactic_heroes_quiz_bg.png');
background-size: cover;
background-position: center;
min-height: 100vh;
color: #f2f2f2;
display: flex; justify-content: center; align-items: center;
}
#quiz-container {
background: linear-gradient(135deg, rgba(6,36,70,0.90) 85%, rgba(255,208,54,0.13) 100%);
border: 5px solid #b9a644;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 30px 8px #0b223a;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #ffd037;
margin-bottom: 18px;
letter-spacing: 3px;
text-shadow: 2px 2px 13px #13264d, 1px 1px 2px #fff;
font-family: 'BIZ UDPGothic','Arial Black', 'Arial', sans-serif;
background: rgba(12,24,52,0.32);
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 #0e2239;
border: 2px solid #ffd037;
background: #fff8;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
color: #ffd037;
margin-top: 15px;
text-shadow: 1px 1px 7px #102c56;
letter-spacing: 1.5px;
background: rgba(20,27,53,0.14);
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: #f2f2f2;
text-shadow: 0 1px 3px #0e2239;
background: rgba(32,45,70,0.13);
border-radius: 8px;
padding: 11px 12px 13px 15px;
}
button {
padding: 12px 38px;
font-size: 1.18rem;
border-radius: 9px;
border: 2.5px solid #ffd037;
margin: 17px 10px 0 10px;
background: linear-gradient(90deg, #243969 70%, #ffd037 100%);
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 1px 2px 8px #13264d;
transition: background 0.18s, transform 0.09s, color 0.13s;
text-shadow: 1px 1px 1px #fff8;
}
button:hover {
background: linear-gradient(90deg, #162a49 75%, #fff4ad 100%);
color: #ffd037;
transform: scale(1.03);
}
#choices-container button {
background: linear-gradient(90deg, #284a7e 75%, #ffd037 100%);
margin: 7px 0;
font-size: 1.13rem;
border-radius: 9px;
border: 2px solid #ffd037;
box-shadow: 0 1px 6px #0b223a;
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, #0d1e36 80%, #fff4ad 100%);
color: #ffd037;
border-color: #ffd037;
}
#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: #ffd037;
font-weight: bold;
text-shadow: 1px 1px 4px #1a2642;
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(18,32,52,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 #23395d, 0 1px #fff7;
}
#feedback {
font-size: 1.28rem;
font-weight: bold;
background: linear-gradient(90deg, #35527c90 80%, #ffe49550 100%);
border-radius: 12px;
padding: 13px 0;
min-height: 36px;
margin-bottom: 15px;
color: #fff;
text-shadow: 1px 1px 6px #0e2239, 0 1px #fff9;
border: 2px solid #ffd037;
box-shadow: 0 2px 8px #cfc49b;
width: 100%;
margin-left: auto;
margin-right: auto;
display: none;
}
#result-message {
font-size: 1.52rem;
color: #ffd037;
font-weight: bold;
margin: 48px 0 30px 0;
text-shadow: 2px 2px 12px #13264d, 1px 1px 3px #fff7;
background: rgba(22,36,54,0.16);
border-radius: 13px;
padding: 14px 0;
box-shadow: 0 2px 13px #fff3;
}
#return-button {
display: block;
margin: 0 auto;
background: linear-gradient(90deg, #35527c 85%, #ffd037 100%);
font-size: 1.17rem;
color: #fff;
font-weight: bold;
border: 2.3px solid #ffd037;
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 #ffd037;
transition: background 0.15s, color 0.1s;
}
#return-button:hover { background: #fffbe9; color: #35527c; }
@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="legend_galactic_heroes_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問サンプル。自由に編集/追加OK） ====
const questions = [
{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: "ローゼンリッター"},
{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: "シェーンコップ"},
{q: "ワーレン艦隊の特徴は？",choices: ["堅実な戦術","猪突猛進","電撃戦","遊撃戦"],answer: "堅実な戦術"},
{q: "ビッテンフェルト艦隊の特徴は？",choices: ["突撃重視","持久戦","防衛重視","外交重視"],answer: "突撃重視"},
{q: "ラインハルトの旗艦の名前は？",choices: ["ブリュンヒルト","ヒューベリオン","バルバロッサ","グリンメルスハウゼン"],answer: "ブリュンヒルト"},
{q: "ヤンの旗艦の名前は？",choices: ["ヒューベリオン","バルバロッサ","アレクサンドル","ブリュンヒルト"],answer: "ヒューベリオン"},
{q: "帝国暦と同盟暦の年号差は？",choices: ["488年","200年","100年","800年"],answer: "488年"},
{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:#ffd037">${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() | 初期化・問題抽選・最初の問題表示 |
| showQuestion() | 現在の問題と選択肢を画面描画 |
| selectAnswer(selected, correct) | 回答判定、メッセージ＆効果音、次の問題ボタン有効化 |
| nextQuestion() | カウンタ加算、次の設問 or 終了画面 |
| endGame() | 終了画面にスコア・正答率表示 |
| toTitle() | タイトル画面復帰処理 |
関数の詳細
| 関数名 | 主な処理内容 |
|---|---|
| shuffle(array) | 配列の要素をランダムに入れ替える（シャッフル） |
| startGame() | クイズリスト初期化・10問抽出・ゲーム画面表示 |
| showQuestion() | 問題・選択肢を描画 |
| selectAnswer() | 正誤判定・フィードバック・効果音 |
| nextQuestion() | 現在の問題数管理＆遷移 |
| endGame() | 正答数・正答率表示、終了画面へ |
| toTitle() | 終了画面非表示・タイトル再表示 |
改造のポイントとアドバイス
- 設問の追加・編集
questions配列に新しい問題・選択肢を追加・編集するだけで拡張できます。 - 演出やデザインのカスタマイズ
CSSの色や背景、ボタンデザインを変更すると雰囲気が大きく変わります。 - 音声・画像の追加
効果音やキャラ画像を増やすことで、より臨場感あるクイズに！ - 出題数の変更
quizList.slice(0, 10)の数字を書き換えれば出題数が変えられます。 - ヒント機能やタイムリミットの導入
クイズの難易度や遊び方を工夫したい場合におすすめです。
アドバイス
設問や演出の追加・修正がとても簡単な構造なので、知識を活かした「銀河英雄伝説クイズ」を自由にカスタマイズして楽しんでください。効果音やイラスト、ちょっとした解説を加えれば、ファン同士の交流やイベントにもぴったりです！