【ゲーム】JavaScript：46 セーラームーンクイズ
「🌙セーラームーンクイズ」は、アニメ・マンガ『美少女戦士セーラームーン』の知識を楽しく試せる4択クイズWebゲームです。登場キャラクターや名セリフ、エピソードなどファンなら思わずニヤリとする設問が30問用意されており、毎回ランダムに10問が出題されます。
遊び方・操作方法
- タイトル画面で「🌟 スタート！」ボタンをクリックします。
- 4つの選択肢が表示されたら、正解だと思うボタンを1つクリックしてください。
- 回答すると、正解/不正解のメッセージが画面中央に表示され、「次の問題 ➡️」ボタンで次の設問へ進みます。
- 10問終了すると、正答率と正解数が表示されます。
- 「🏠 タイトル画面に戻る」ボタンでタイトル画面に戻り、再挑戦できます。
ルール
- 全30問の中からランダムで10問が毎回出題されます。
- 各問題には4択の選択肢が用意され、正解を1つ選びます。
- 回答するとその場で正誤判定され、全問回答後にスコアと正答率が表示されます。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
46 セーラームーンクイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| sailor_moon_quiz_title.png | sailor_moon_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（sailor_moon_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('sailor_moon_quiz_bg.png');
background-size: cover;
background-position: center;
min-height: 100vh;
color: #F9F7F0;
display: flex; justify-content: center; align-items: center;
}
#quiz-container {
background: linear-gradient(135deg, rgba(40,60,100,0.90) 85%, rgba(255,161,230,0.14) 100%);
border: 5px solid #a469ac;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 32px 6px #52396b;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #e7aee7;
margin-bottom: 16px;
letter-spacing: 3px;
text-shadow: 2px 2px 10px #623b69, 1px 1px 2px #fff;
font-family: 'BIZ UDPGothic','Arial Black', 'Arial', sans-serif;
background: rgba(255,255,255,0.18);
border-radius: 12px;
padding: 8px 0 8px 0;
box-shadow: 0 2px 12px #fff4;
}
#title-screen img {
display: block;
margin: 0 auto 16px auto;
max-width: 72%;
height: auto;
border-radius: 16px;
box-shadow: 0 4px 18px #52396b;
border: 2px solid #e7aee7;
background: #fff8;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
color: #e7aee7;
margin-top: 15px;
text-shadow: 1px 1px 7px #312452;
letter-spacing: 1.5px;
background: rgba(255,255,255,0.21);
border-radius: 7px;
padding: 6px 0;
}
.rules-body {
text-align: left;
margin: 0 10px 16px 10px;
font-size: 1.12rem;
line-height: 1.8;
color: #FFFDF8;
text-shadow: 0 1px 3px #312452;
background: rgba(255,255,255,0.14);
border-radius: 7px;
padding: 9px 11px 11px 15px;
}
button {
padding: 12px 38px;
font-size: 1.18rem;
border-radius: 9px;
border: 2.5px solid #e7aee7;
margin: 15px 10px 0 10px;
background: linear-gradient(90deg, #7941a6 65%, #ffe0f6 100%);
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 1px 2px 9px #312452;
transition: background 0.2s, transform 0.1s, color 0.13s;
text-shadow: 1px 1px 1px #fff9;
}
button:hover {
background: linear-gradient(90deg, #56318c 75%, #ffcaf3 100%);
color: #e7aee7;
transform: scale(1.03);
}
#choices-container button {
background: linear-gradient(90deg, #9266c4 75%, #ffe7f6 100%);
margin: 7px 0;
font-size: 1.13rem;
border-radius: 9px;
border: 2px solid #e7aee7;
box-shadow: 0 1px 6px #5e4376;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 2px #fff8;
width: 100%;
min-width: 0;
max-width: 100%;
transition: background 0.18s, color 0.12s;
}
#choices-container button:hover {
background: linear-gradient(90deg, #a469ac 80%, #ffe7f6 100%);
color: #e7aee7;
border-color: #e7aee7;
}
#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: #e7aee7;
font-weight: bold;
text-shadow: 1px 1px 4px #312452;
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: #fff8fd;
background: rgba(60,30,70,0.12);
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 5px #312452, 0 1px #fff7;
}
#feedback {
font-size: 1.28rem;
font-weight: bold;
background: linear-gradient(90deg, #a469ac70 80%, #ffd6fa50 100%);
border-radius: 12px;
padding: 13px 0;
min-height: 36px;
margin-bottom: 15px;
color: #fff;
text-shadow: 1px 1px 4px #52396b, 0 1px #fff9;
border: 2px solid #e7aee7;
box-shadow: 0 2px 8px #f7e8fd;
width: 100%;
margin-left: auto;
margin-right: auto;
display: none;
}
#result-message {
font-size: 1.52rem;
color: #e7aee7;
font-weight: bold;
margin: 50px 0 27px 0;
text-shadow: 2px 2px 9px #412e52, 1px 1px 3px #fff7;
background: rgba(255,255,255,0.19);
border-radius: 12px;
padding: 14px 0;
box-shadow: 0 2px 12px #fff3;
}
#return-button {
display: block;
margin: 0 auto;
background: linear-gradient(90deg, #9266c4 85%, #ffe0f6 100%);
font-size: 1.17rem;
color: #fff;
font-weight: bold;
border: 2.3px solid #e7aee7;
border-radius: 9px;
box-shadow: 2px 4px 12px #fff, 0 1px 7px #a469ac;
text-shadow: 1px 1px 1px #fff8;
letter-spacing: 1px;
border-bottom: 4px solid #e7aee7;
transition: background 0.15s, color 0.1s;
}
#return-button:hover { background: #f7c6f2; color: #a469ac; }
@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="sailor_moon_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: "セーラーマーズの本名は？",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: ["6月30日","7月7日","8月15日","3月3日"],answer: "6月30日"},
{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:#e7aee7">${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() | 設問カウンタを進め、残りあればshowQuestion()、なければendGame() |
| endGame() | 終了画面のスコア・正答率表示 |
| toTitle() | タイトル画面復帰 |
関数の解説
| 関数名 | 主な処理内容 |
|---|---|
| shuffle(array) | 配列の要素をランダムな順番に並べ替える |
| startGame() | ゲーム初期化・10問選出・最初の問題表示 |
| showQuestion() | 現在の問題と4択ボタンを表示 |
| selectAnswer() | 回答判定・正誤メッセージと効果音の再生 |
| nextQuestion() | 次の設問進行または終了画面遷移 |
| endGame() | 終了画面で正答率・正答数表示 |
| toTitle() | タイトル画面復帰処理 |
改造のポイント
- 設問・選択肢の追加や修正
→questions配列の内容を書き換えるだけでOK。自由に設問・選択肢を追加できます。 - 効果音や画像の追加
→<audio>や<img>タグを増やすことで演出をパワーアップできます。 - デザインや色彩の変更
→CSSのカラーや背景、ボタンデザインなどをカスタマイズして雰囲気を変えられます。 - 出題数や難易度の調整
→quizList.slice(0, 10)の数字を変えれば出題数が調整できます。
アドバイス
このクイズゲームはHTML/CSS/JavaScriptの基本のみで作成されており、設問追加やデザインアレンジも簡単。自分だけのオリジナル「セーラームーンクイズ」に発展させて楽しんでください。演出やキャラクター画像を追加すれば、さらに魅力がアップします！