【ゲーム】JavaScript：50 キャプテン翼クイズ
「⚽ キャプテン翼クイズ🏆」は、サッカー漫画の金字塔『キャプテン翼』の知識を問う4択クイズゲームです。翼や日向などおなじみのキャラクターや、ストーリー、必殺技など、30問の中から毎回ランダムで10問出題されます。ファン同士はもちろん、初見の方でも楽しみながら知識を深められます。
遊び方・操作方法
- タイトル画面で「⚽ スタート！」ボタンをクリックするとクイズが開始します。
- 各問題で4つの選択肢ボタンから1つ選んで解答します。
- 選択すると正誤のメッセージと効果音が表示され、「次の問題 ➡️」ボタンが出現します。
- 10問すべて答え終わると、正解数と正答率が結果画面に表示されます。
- 「🏠 タイトル画面に戻る」ボタンで最初から再挑戦できます。
ルール
- 全30問からランダムで10問が出題されます。
- 4択形式。選択肢の順序も毎回シャッフルされます。
- 1問ごとに解答後、正誤・正解が分かるコメントが表示されます。
- 全問終了後に正解数と正答率が表示されます。
- インターフェース・問題文・結果表示は全て日本語です。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
50 キャプテン翼クイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| captain_tsubasa_quiz_title.png | captain_tsubasa_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（captain_tsubasa_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('captain_tsubasa_quiz_bg.png');
background-size: cover;
background-position: center;
min-height: 100vh;
color: #FFF8DC;
display: flex; justify-content: center; align-items: center;
}
#quiz-container {
background: linear-gradient(135deg, rgba(33,39,67,0.92) 82%, rgba(255,215,0,0.16) 100%);
border: 5px solid #215ec9;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 32px 7px #215ec9bb;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #ffe400;
margin-bottom: 18px;
letter-spacing: 3px;
text-shadow: 2px 2px 13px #012463, 1px 1px 2px #fff;
background: rgba(10,25,55,0.10);
border-radius: 12px;
padding: 10px 0 10px 0;
box-shadow: 0 2px 12px #fff3;
}
#title-screen img {
display: block;
margin: 0 auto 16px auto;
max-width: 75%;
height: auto;
border-radius: 13px;
box-shadow: 0 4px 18px #164b97;
border: 2px solid #ffe400;
background: #fff8;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
color: #ffe400;
margin-top: 15px;
text-shadow: 1px 1px 7px #012463;
letter-spacing: 1.5px;
background: rgba(33,39,67,0.08);
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: #FFF8DC;
text-shadow: 0 1px 3px #111a4d;
background: rgba(33,39,67,0.08);
border-radius: 8px;
padding: 11px 12px 13px 15px;
}
button {
padding: 12px 38px;
font-size: 1.18rem;
border-radius: 9px;
border: 2.5px solid #ffe400;
margin: 17px 10px 0 10px;
background: linear-gradient(90deg, #215ec9 70%, #ffe400 100%);
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 1px 2px 8px #111a4d;
transition: background 0.18s, transform 0.09s, color 0.13s;
text-shadow: 1px 1px 1px #fff8;
}
button:hover {
background: linear-gradient(90deg, #012463 80%, #fffaad 100%);
color: #215ec9;
transform: scale(1.03);
}
#choices-container button {
background: linear-gradient(90deg, #215ec9 75%, #ffe400 100%);
margin: 7px 0;
font-size: 1.13rem;
border-radius: 9px;
border: 2px solid #ffe400;
box-shadow: 0 1px 6px #215ec9bb;
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, #012463 85%, #fffde1 100%);
color: #ffe400;
border-color: #ffe400;
}
#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: #ffe400;
font-weight: bold;
text-shadow: 1px 1px 4px #215ec9;
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(255,228,0,0.09);
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 #215ec9, 0 1px #fff7;
}
#feedback {
font-size: 1.28rem;
font-weight: bold;
background: linear-gradient(90deg, #215ec988 80%, #ffe40099 100%);
border-radius: 12px;
padding: 13px 0;
min-height: 36px;
margin-bottom: 15px;
color: #fff;
text-shadow: 1px 1px 6px #215ec9, 0 1px #fff9;
border: 2px solid #ffe400;
box-shadow: 0 2px 8px #fff3;
width: 100%;
margin-left: auto;
margin-right: auto;
display: none;
}
#result-message {
font-size: 1.52rem;
color: #ffe400;
font-weight: bold;
margin: 48px 0 30px 0;
text-shadow: 2px 2px 12px #012463, 1px 1px 3px #fff7;
background: rgba(255,228,0,0.13);
border-radius: 13px;
padding: 14px 0;
box-shadow: 0 2px 13px #fff3;
}
#return-button {
display: block;
margin: 0 auto;
background: linear-gradient(90deg, #215ec9 85%, #ffe400 100%);
font-size: 1.17rem;
color: #fff;
font-weight: bold;
border: 2.3px solid #ffe400;
border-radius: 9px;
box-shadow: 2px 4px 12px #fff, 0 1px 7px #d6cb44;
text-shadow: 1px 1px 1px #fff8;
letter-spacing: 1px;
border-bottom: 4px solid #ffe400;
transition: background 0.15s, color 0.1s;
}
#return-button:hover { background: #fffbe9; color: #215ec9; }
@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="captain_tsubasa_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:["南葛小","明和FC","東邦学園","武蔵FC"],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:"南葛SCのユニフォームの色は？",choices:["青","赤","白","黄色"],answer:"青"},
{q:"松山光のポジションは？",choices:["ミッドフィルダー","フォワード","ディフェンダー","ゴールキーパー"],answer:"ミッドフィルダー"},
{q:"翼と岬太郎のコンビ名は？",choices:["ゴールデンコンビ","シルバーコンビ","ダブルシュートコンビ","タイガーコンビ"],answer:"ゴールデンコンビ"},
{q:"日向小次郎の背番号は？",choices:["10","9","1","7"],answer:"10"},
{q:"ロベルト本郷の出身国は？",choices:["ブラジル","日本","ドイツ","アルゼンチン"],answer:"ブラジル"},
{q:"新田瞬の得意技は？",choices:["隼シュート","カミソリシュート","タイガーショット","ドライブシュート"],answer:"隼シュート"},
{q:"南葛中の監督は？",choices:["見上哲治","吉良耕三","ロベルト本郷","滝一"],answer:"見上哲治"},
{q:"日本代表のキャプテンを務めるのは？",choices:["大空翼","若林源三","岬太郎","日向小次郎"],answer:"大空翼"},
{q:"若林源三がプロ入りしたドイツのクラブは？",choices:["ハンブルガーSV","バイエルン","ドルトムント","ブレーメン"],answer:"ハンブルガーSV"},
{q:"松山光がキャプテンを務めるチームは？",choices:["ふらの中","南葛中","東邦中","修哲中"],answer:"ふらの中"},
{q:"岬太郎の得意なプレーは？",choices:["アシスト","シュート","タックル","ゴールキーパー"],answer:"アシスト"},
{q:"ドイツ代表のGKで翼のライバルは？",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:#ffe400">${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. ゲーム開始 | 問題リスト（30問）をシャッフルし、10問抽出→ゲーム画面に切替 |
| 3. 問題表示 | 問題文・4択ボタン（順序ランダム）を動的描画 |
| 4. 回答選択 | 回答ボタンを押すと正誤判定、正誤メッセージ・効果音、「次の問題」ボタンを表示 |
| 5. 次の問題 | 問題カウンタを進め、残問があれば3へ。全問終了で6へ |
| 6. 結果表示 | 正答率と正解数を画面に表示し、「タイトル画面に戻る」ボタンを有効化 |
| 7. タイトル復帰 | 結果画面を非表示、タイトル画面を再表示し再プレイ可能 |
関数・命令の役割
| 関数・変数名 | 役割・説明 |
|---|---|
questions | 問題文・選択肢・正解データの配列 |
shuffle(array) | 配列の要素をランダム順にシャッフル |
startGame() | クイズリスト初期化、10問抽選、画面切替、1問目表示 |
showQuestion() | 問題文・選択肢ボタンを描画 |
selectAnswer(selected, correct) | 回答判定、メッセージ＆効果音表示、ボタン無効化、「次の問題」表示 |
nextQuestion() | カウンタ加算、次の問題 or 終了処理 |
endGame() | 結果表示・終了画面切替 |
toTitle() | 結果画面非表示、タイトル画面再表示 |
関数の主な役割
| 関数名 | 主な処理内容 |
|---|---|
shuffle(array) | 配列をランダム順に並べ替え |
startGame() | クイズリスト初期化・抽選・画面切替 |
showQuestion() | 問題と選択肢ボタンの動的生成 |
selectAnswer() | 回答の正誤判定、正誤メッセージ・音、選択肢無効化、次ボタン表示 |
nextQuestion() | 問題番号進行、次 or 終了処理 |
endGame() | 結果表示・終了画面切替 |
toTitle() | タイトル画面への戻り処理 |
改造のポイント
- 問題の追加・カスタマイズ
questions配列に新しい問題を追加することで、自分だけのクイズを簡単に作成できます。 - 出題数の変更
quizList.slice(0, 10)の「10」を変更すれば1回の出題数も自在です。 - タイマーや難易度機能
回答に制限時間を設けたり、easy/normal/hardなど難易度を切り替えたり、ゲーム性を発展させられます。 - 解説・豆知識機能
各問題に「解説」や豆知識を追加して、回答後に表示することも可能です。 - 見た目・演出の強化
CSSや効果音、画像を追加して、より「キャプテン翼」らしい臨場感を演出しましょう！
アドバイス
このプログラムはシンプルな構造なので、問題追加や見た目のカスタマイズがすぐに可能です。
「キャプテン翼」以外のテーマにも流用しやすい作りになっています。
クイズを自分だけのイベントや勉強会に発展させて、サッカーやキャラクターの魅力をもっと深めてみてください！