【ゲーム】JavaScript：45 ポケモンクイズ
「⚡ポケモンクイズ」は、ポケットモンスターに関する知識を楽しくチェックできるWebブラウザ向けの4択クイズゲームです。ピカチュウをはじめとした歴代の人気キャラクターや設定について出題されるので、世代やファン歴を問わず楽しめます。
遊び方・操作方法
- タイトル画面で「⚡スタート！」ボタンをクリックします。
- 問題ごとに4つの選択肢が表示されるので、正しいと思うボタンをクリックします。
- 回答後、すぐに正解/不正解のメッセージが表示され、「次の問題」ボタンで次の設問に進みます。
- 10問解答後、正答率とスコアが画面中央に表示されます。
- 「🏠タイトル画面に戻る」ボタンでタイトル画面へ戻り、再挑戦できます。
ゲームのルール
- 全30問の中からランダムで10問が毎回出題されます。
- 各問題は4択式で、1問ごとに1つの正解があります。
- 回答するたびに、その場で正誤判定が行われ、次の問題に進めます。
- 10問終了後に正答数と正答率が表示されます。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
45 ポケモンクイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| pokemon_quiz_title.png | pokemon_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（pokemon_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('pokemon_quiz_bg.png');
background-size: cover;
background-position: center;
min-height: 100vh;
color: #222;
display: flex; justify-content: center; align-items: center;
}
#quiz-container {
background: linear-gradient(135deg, rgba(32,114,167,0.93) 80%, rgba(250,241,145,0.18) 100%);
border: 5px solid #fbcb07;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 28px 4px #3b505a;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #fbcb07;
margin-bottom: 16px;
letter-spacing: 3px;
text-shadow: 2px 2px 10px #2a4566, 1px 1px 2px #fff;
font-family: 'BIZ UDPGothic', 'Arial Black', 'Arial', sans-serif;
}
#title-screen img {
display: block;
margin: 0 auto 16px auto;
max-width: 72%;
height: auto;
border-radius: 15px;
box-shadow: 0 4px 18px #1d3757;
border: 2px solid #fbcb07;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
color: #fbcb07;
margin-top: 15px;
text-shadow: 1px 1px 7px #3b505a;
letter-spacing: 1.5px;
}
.rules-body {
text-align: left;
margin: 0 10px 16px 10px;
font-size: 1.14rem;
line-height: 1.8;
color: #fffde7;
text-shadow: 0 1px 3px #15465b;
}
button {
padding: 12px 36px;
font-size: 1.16rem;
border-radius: 8px;
border: 2.5px solid #fbcb07;
margin: 15px 10px 0 10px;
background: linear-gradient(90deg, #2172a7 70%, #fbcb07 100%);
color: #222;
font-weight: bold;
cursor: pointer;
box-shadow: 1px 2px 8px #3b505a;
transition: background 0.2s, transform 0.1s, color 0.2s;
text-shadow: 1px 1px 2px #fff8;
}
button:hover {
background: linear-gradient(90deg, #fff776 90%, #fbcb07 100%);
color: #2172a7;
transform: scale(1.04);
}
#choices-container {
display: flex;
flex-direction: column;
gap: 13px;
margin-bottom: 22px;
}
#choices-container button {
background: #fff;
color: #222;
font-size: 1.14rem;
border-radius: 9px;
border: 3.3px solid #fbcb07;
font-weight: bold;
box-shadow: 0 3px 10px #1a1a1a88, 0 1px 0px #fff8;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0 auto;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
text-shadow: 1px 1px 0 #fff8, 2px 2px 4px #fff8;
outline: none;
}
#choices-container button:hover, #choices-container button:focus {
background: #2172a7;
color: #fffde7;
border-color: #fbcb07;
box-shadow: 0 0 0 3px #fff77655, 0 6px 16px #2172a799;
text-shadow: 2px 2px 6px #fbcb07, 1px 1px 1px #2172a7;
}
#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: 6px;
color: #fbcb07;
font-weight: bold;
text-shadow: 1px 1px 4px #15465b;
}
#question-text {
font-size: 1.43rem;
margin: 22px 0 20px 0;
letter-spacing: 1.3px;
color: #fffde7;
text-shadow: 1px 1px 6px #15465b, 0 1px #ffb8;
}
#feedback {
font-size: 1.26rem;
font-weight: bold;
background: rgba(251,203,7,0.96);
border-radius: 12px;
padding: 14px 0;
min-height: 36px;
margin-bottom: 13px;
color: #2172a7;
text-shadow: 1px 1px 6px #fff8, 0 1px #fff8;
border: 3px solid #2172a7;
box-shadow: 0 3px 14px #2a4566a8;
display: none;
width: 100%;
}
#result-message {
font-size: 1.5rem;
color: #fbcb07;
font-weight: bold;
margin: 50px 0 25px 0;
text-shadow: 2px 2px 8px #15465b, 1px 1px 3px #fff8;
}
#return-button {
display: block;
margin: 0 auto;
background: linear-gradient(90deg, #2172a7 80%, #fbcb07 100%);
font-size: 1.16rem;
color: #15465b;
font-weight: bold;
border: 2.5px solid #fbcb07;
box-shadow: 0 1px 6px #3b505a;
text-shadow: 1px 1px 1px #fff8;
}
#return-button:hover { background: linear-gradient(90deg, #fbcb07 90%, #fff776 100%); color: #2172a7; }
@media (max-width:780px) {
#quiz-container { padding: 8px 3vw; min-width: 0; width: 99vw;}
h1 { font-size: 1.7rem; }
}
</style>
</head>
<body>
<div id="quiz-container">
<h1>⚡ ポケモンクイズ ⚡</h1>
<!-- タイトル画面 -->
<div id="title-screen" class="active">
<img src="pokemon_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>
<!-- 効果音ファイル。ファイル名は自由に変えてOK。 -->
<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:"最初のポケモン図鑑No.001は？",choices:["フシギダネ","ヒトカゲ","ゼニガメ","ピカチュウ"],answer:"フシギダネ"},
{q:"「いわ」タイプの四天王は？",choices:["ワタル","キクコ","カンナ","イワオ"],answer:"イワオ"},
{q:"タケシが使うポケモンは？",choices:["イシツブテ","ヒトカゲ","キャタピー","プリン"],answer:"イシツブテ"},
{q:"コダックの進化系は？",choices:["ゴルダック","ラプラス","カメール","カビゴン"],answer:"ゴルダック"},
{q:"御三家で「ほのお」タイプは？",choices:["ヒトカゲ","ゼニガメ","フシギダネ","ピカチュウ"],answer:"ヒトカゲ"},
{q:"イーブイの進化系で「みず」タイプは？",choices:["シャワーズ","サンダース","ブースター","エーフィ"],answer:"シャワーズ"},
{q:"サトシの最初の手持ちポケモンは？",choices:["ピカチュウ","ヒトカゲ","フシギダネ","ゼニガメ"],answer:"ピカチュウ"},
{q:"伝説の鳥ポケモンで「ほのお」タイプは？",choices:["ファイヤー","サンダー","フリーザー","ルギア"],answer:"ファイヤー"},
{q:"「10まんボルト」を覚えるポケモンは？",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:"セキエイこうげん"}
];
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 = "✨ 正解！ゲットだぜ！";
correctSE && correctSE.play();
correctCount++;
} else {
feedback.textContent = `💀 不正解… 正解は「${correct}」です。`;
incorrectSE && 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:#fbcb07">${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. 次の問題へ | カウンタを進めて残り問題があれば次の設問へ。なければ終了画面へ |
| 6. 終了画面 | 正答数・正答率を画面中央に表示し、タイトルに戻るボタンを有効化 |
| 7. タイトル復帰 | 終了画面を非表示にし、タイトル画面を再表示 |
主な関数・命令の役割
| 関数・変数名 | 役割説明 |
|---|---|
| questions | クイズデータ（設問・選択肢・答え）を管理する配列 |
| shuffle(array) | 配列をFisher–Yatesアルゴリズムでランダムに並べ替える |
| startGame() | クイズ開始時の初期化処理、設問10問抽選、画面遷移 |
| showQuestion() | 現在の問題・選択肢をDOMに描画 |
| selectAnswer(selected,correct) | 回答ボタンの処理、正誤判定・フィードバック表示・全ボタン無効化 |
| nextQuestion() | 問題カウンタ進行。残りがあればshowQuestion()、なければendGame() |
| endGame() | 終了画面の正答数・正答率表示 |
| toTitle() | タイトル画面への遷移処理 |
関数の役割まとめ
| 関数名 | 主な処理内容 |
|---|---|
| shuffle(array) | 配列のシャッフル（問題・選択肢のランダム化） |
| startGame() | ゲーム初期化、設問選出、最初の問題表示 |
| showQuestion() | 現在の設問・選択肢をボタン表示 |
| selectAnswer() | 回答判定・メッセージ表示・次の問題ボタン有効化 |
| nextQuestion() | 設問進行・終了画面判定 |
| endGame() | 終了画面の結果表示 |
| toTitle() | タイトル復帰処理 |
改造のポイント
- 問題・選択肢の追加/修正
→questions配列を書き換えるだけで、新しい設問や選択肢が自由に追加・編集できます。 - 出題数や難易度調整
→quizList.slice(0, 10)や選択肢配列の内容を調整してアレンジ可能です。 - デザイン・カラーアレンジ
→CSSで背景やボタンの色、フォント、枠線、サイズ感を好きな雰囲気に変更できます。 - 演出の追加
→サウンドエフェクトやアニメーション、キャラクター画像の表示を加えることで演出強化ができます。
アドバイス
このクイズゲームはHTML・CSS・JavaScriptの基礎的なWeb技術のみで作成でき、問題追加やUI調整も柔軟です。ファン向けや勉強用など、オリジナルのテーマで問題を用意して、ぜひ自分好みに進化させてみてください！