【ゲーム】JavaScript：41 ドラゴンボールクイズ
「ドラゴンボールクイズ」は、人気アニメ『ドラゴンボール』に関する知識を問うクイズゲームです。
毎回ランダムで10問が出題され、選択肢から正解を選ぶことでドラゴンボールの世界を楽しく復習できます！
遊び方・操作方法
- タイトル画面が表示されるので「🌟スタート」ボタンを押してください。
- 問題文と4つの選択肢が表示されます。正しい答えをクリックしてください。
- 選択後、正誤メッセージが表示されます。「次の問題」ボタンで次へ進みます。
- 10問終了後、正答率と結果が表示されます。
- 「タイトル画面に戻る」ボタンで再挑戦できます。
ルール
- 問題は全30問。毎回ランダムで10問が出題されます。
- すべての問題に4択の選択肢があります。
- 回答すると即座に正誤判定と正答が表示されます。
- 全問回答後、正答率が表示されます。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
41 ドラゴンボールクイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| dragonball_quiz_title.png | dragonball_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（dragonball_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: 'Arial Black', 'BIZ UDPGothic', 'Arial', sans-serif;
background-image: url('dragonball_quiz_bg.png');
background-size: cover;
background-position: center;
min-height: 100vh;
color: #333;
display: flex; justify-content: center; align-items: center;
}
#quiz-container {
background: linear-gradient(135deg, rgba(255,153,0,0.93) 80%, rgba(255,215,0,0.30) 100%);
border: 5px solid #FFD700;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 28px 4px #b87333;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #FFD700;
margin-bottom: 16px;
letter-spacing: 3px;
text-shadow: 2px 2px 10px #fff, 1px 1px 2px #b87333;
font-family: 'Arial Black','BIZ UDPGothic', 'Arial', sans-serif;
background: rgba(255,255,255,0.72);
border-radius: 12px;
padding: 8px 0 8px 0;
box-shadow: 0 2px 12px #fff5;
}
#title-screen img {
display: block;
margin: 0 auto 18px auto;
max-width: 78%;
height: auto;
border-radius: 14px;
box-shadow: 0 4px 18px #b87333;
border: 2px solid #FFD700;
background: #fff8;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.33rem;
color: #E65100;
margin-top: 15px;
background: rgba(255,255,255,0.92);
border-radius: 9px;
padding: 5px 0;
letter-spacing: 1.3px;
box-shadow: 0 1px 7px #fff5;
}
.rules-body {
text-align: left;
margin: 0 10px 16px 10px;
font-size: 1.13rem;
line-height: 1.8;
color: #1a1a1a;
text-shadow: none;
background: rgba(255,255,255,0.88);
border-radius: 8px;
box-shadow: 0 1px 6px #fff4;
padding: 13px 12px 13px 16px;
}
button {
padding: 11px 38px;
font-size: 1.18rem;
border-radius: 9px;
border: 2.5px solid #FFD700;
margin: 18px 10px 0 10px;
background: rgba(255,255,255,0.94);
color: #F57C00;
font-weight: bold;
cursor: pointer;
box-shadow: 2px 4px 12px #fff, 0 1px 7px #b87333;
transition: background 0.2s, transform 0.1s, color 0.15s;
text-shadow: 1px 1px 1px #fff, 0 1px 4px #b87333;
letter-spacing: 1px;
border-bottom: 4px solid #FFA000;
}
button:hover {
background: #fffde4;
color: #d35400;
transform: scale(1.04);
}
#choices-container {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
align-items: stretch;
width: 100%;
max-width: 100%;
}
#choices-container button {
background: rgba(255,255,255,0.98);
color: #E65100;
font-size: 1.12rem;
border-radius: 9px;
border: 2.2px solid #FFA000;
box-shadow: 0 2px 8px #fff8, 0 1px 3px #b87333;
text-shadow: 0 1px 1px #fff, 0 1px 4px #b87333;
font-weight: bold;
letter-spacing: 0.5px;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 18px 0;
display: block;
box-sizing: border-box;
transition: background 0.15s, color 0.12s;
}
#choices-container button:hover {
background: #fffde7;
color: #c0392b;
border-color: #FFD700;
}
#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: #E65100;
font-weight: bold;
background: rgba(255,255,255,0.85);
border-radius: 7px;
padding: 4px 0;
margin-top: 10px;
box-shadow: 0 1px 6px #fff7;
width: 85%;
margin-left: auto;
margin-right: auto;
}
#question-text {
font-size: 1.47rem;
margin: 20px 0 18px 0;
letter-spacing: 1.1px;
color: #222;
background: rgba(255,255,255,0.94);
border-radius: 8px;
box-shadow: 0 1px 7px #fff8;
padding: 14px 10px 14px 10px;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
text-align: center;
}
#feedback {
font-size: 1.23rem;
font-weight: bold;
background: rgba(255,255,255,0.98);
border-radius: 10px;
padding: 16px 6px;
min-height: 36px;
margin-bottom: 13px;
color: #D84315;
text-shadow: 0 1px 2px #fff, 0 2px 6px #FFA726;
border: 2px solid #FFA000;
box-shadow: 0 2px 8px #fff, 0 1px 8px #b87333;
width: 80%;
margin-left: auto;
margin-right: auto;
display: none;
}
#result-message {
font-size: 1.5rem;
color: #FF6F00;
font-weight: bold;
margin: 48px 0 27px 0;
text-shadow: 2px 2px 10px #fff, 1px 1px 2px #b87333;
background: rgba(255,255,255,0.92);
border-radius: 12px;
padding: 14px 0;
box-shadow: 0 2px 12px #fff5;
}
#return-button {
display: block;
margin: 0 auto;
background: rgba(255,255,255,0.98);
color: #F57C00;
font-size: 1.17rem;
font-weight: bold;
border: 2.3px solid #FFD700;
border-radius: 9px;
box-shadow: 2px 4px 12px #fff, 0 1px 7px #b87333;
text-shadow: 1px 1px 1px #fff, 0 1px 4px #b87333;
letter-spacing: 1px;
border-bottom: 4px solid #FFA000;
}
#return-button:hover { background: #fffde4; color: #d35400; }
@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="dragonball_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: "ドラゴンボールの7つ目の球には何個の星が描かれている？",choices: ["1つ", "5つ", "7つ", "6つ"],answer: "7つ"},
{q: "ピッコロの本来の名前は？",choices: ["ナメック星人", "ピッコロ大魔王", "マジュニア", "カタッツ"],answer: "マジュニア"},
{q: "孫悟空の妻は誰？",choices: ["ブルマ", "チチ", "ビーデル", "18号"],answer: "チチ"},
{q: "最初に地球に来たサイヤ人は？",choices: ["ベジータ", "ラディッツ", "ナッパ", "カカロット"],answer: "ラディッツ"},
{q: "フリーザ編でクリリンが倒された技は？",choices: ["デスビーム", "デスボール", "気円斬", "爆発"],answer: "爆発"},
{q: "ベジータの名言「○○王子」",choices: ["サイヤ人", "宇宙一", "最強", "誇り高き"],answer: "サイヤ人"},
{q: "悟飯の弟の名前は？",choices: ["悟空", "悟天", "トランクス", "クリリン"],answer: "悟天"},
{q: "セルの完全体になるために吸収したのは？",choices: ["クリリン", "18号", "17号", "16号"],answer: "18号"},
{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: ["第2形態", "第1形態", "最終形態", "ゴールデンフリーザ"],answer: "第2形態"},
{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: "18号の本名は？",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:#FFD700">${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>アルゴリズムの流れ
| ステップ | 内容 |
|---|---|
| ① タイトル表示 | タイトル画像とルール説明、スタートボタンを表示 |
| ② ゲーム開始 | 30問から10問をランダム選出。クイズリストに格納 |
| ③ 問題表示 | 問題番号、問題文、シャッフルした選択肢4つを画面に表示 |
| ④ 回答選択 | ボタン押下で正誤判定・即時フィードバック表示。ボタンは非活性に |
| ⑤ 次の問題 | 「次の問題」ボタンで次のクイズへ（10問繰り返す） |
| ⑥ 結果表示 | 全問終了後、正答率と正解数を表示。「タイトル画面に戻る」へ |
主要な関数・命令の解説
| 関数・変数名 | 内容・役割 |
|---|---|
| questions | 全30問のクイズ問題データ配列 |
| shuffle() | 配列をランダムにシャッフルするユーティリティ関数 |
| startGame() | ゲーム開始処理。10問をランダム選択し状態初期化 |
| showQuestion() | 現在の問題を画面に表示し、選択肢ボタンを生成 |
| selectAnswer(selected, correct) | 選択肢の回答処理・正誤判定・メッセージ表示 |
| nextQuestion() | 次の問題へ遷移 |
| endGame() | 結果画面に遷移し、正答率とスコアを表示 |
| toTitle() | タイトル画面に戻る |
関数の詳細解説
| 関数名 | 主な役割 |
|---|---|
| shuffle(array) | 配列の内容をランダムに並び替える |
| startGame() | クイズをリセットし、10問選択してゲーム画面に遷移 |
| showQuestion() | 現在のクイズ問題と選択肢を画面表示 |
| selectAnswer() | 回答選択後に正誤を判定し、メッセージを表示 |
| nextQuestion() | 次の問題に進める（もしくは終了処理へ） |
| endGame() | 結果画面へ遷移し、スコアを表示 |
| toTitle() | タイトル画面へ戻る |
改造のポイント
- 問題数や出題数の変更は
questions配列やquizList.slice(0, 10)を変更するだけで簡単です。 - 問題データの追加・編集は
questions配列を編集するだけでOK！ - サウンドやタイマー、ランキング機能などを追加してさらに盛り上がる演出も可能です。
- ボタンやメッセージの色・効果をCSSでアレンジして「ドラゴンボール風」にするのもおすすめ。
- モバイル対応済みですが、画像や文字サイズ調整も適宜工夫してください。
この「ドラゴンボールクイズ」は、原作ファン同士で盛り上がるのにも最適な手軽なWebクイズです。
ぜひ自分流にカスタマイズして、より楽しいクイズ体験にアレンジしてみてください！