【ゲーム】JavaScript：44 鬼滅の刃クイズ
「🌸 鬼滅の刃クイズ」は、人気漫画・アニメ『鬼滅の刃』に関する知識を楽しくチェックできる4択形式のWebクイズゲームです。毎回10問がランダムに出題され、作品ファンも初心者も気軽に挑戦できます。
遊び方・操作方法
- タイトル画面で「🌸スタート！」ボタンをクリックするとクイズが始まります。
- 各問題は4択形式で、選択肢ボタンをクリックして回答します。
- 回答すると、その場で正誤が表示され、「次の問題」ボタンで進みます。
- 10問終了後、正答率と結果が表示されます。
- 「🏠タイトル画面に戻る」ボタンで再挑戦できます。
ルール
- 問題は全30問からランダムで10問が出題されます。
- 各問題には4つの選択肢があり、正解は1つです。
- 回答のたびに正誤判定と解説が表示されます。
- 10問解答後、正答率がスコアとして表示されます。
🎮ゲームプレイ
以下のリンク先から実際にプレイできます。
44 鬼滅の刃クイズ
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
効果音：魔王魂
| demon_slayer_quiz_title.png | demon_slayer_quiz_bg.png |
|---|---|
 |  |
ゲーム画面イメージ
プログラム全体（demon_slayer_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('demon_slayer_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,80,50,0.93) 85%, rgba(255,161,130,0.13) 100%);
border: 5px solid #16A085;
border-radius: 22px;
width: 700px; max-width: 96vw;
min-height: 540px;
padding: 30px 40px 30px 40px;
box-shadow: 0 0 28px 4px #1a4630;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
font-size: 2.5rem;
color: #FF6687;
margin-bottom: 16px;
letter-spacing: 3px;
text-shadow: 2px 2px 9px #144a2f, 1px 1px 2px #000;
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: 16px;
box-shadow: 0 4px 18px #256648;
border: 2px solid #16A085;
}
.rules-title {
text-align: center;
font-weight: bold;
font-size: 1.4rem;
color: #FF6687;
margin-top: 15px;
text-shadow: 1px 1px 7px #1a4630;
letter-spacing: 1.5px;
}
.rules-body {
text-align: left;
margin: 0 10px 16px 10px;
font-size: 1.14rem;
line-height: 1.8;
color: #F9F7F0;
text-shadow: 0 1px 3px #144a2f;
}
button {
padding: 12px 36px;
font-size: 1.16rem;
border-radius: 8px;
border: 2.5px solid #16A085;
margin: 15px 10px 0 10px;
background: linear-gradient(90deg, #25ae6d 70%, #ffbad2 100%);
color: #1a2a23;
font-weight: bold;
cursor: pointer;
box-shadow: 1px 2px 5px #16624e;
transition: background 0.2s, transform 0.1s;
text-shadow: 1px 1px 1px #fff8;
}
button:hover {
background: linear-gradient(90deg, #176145 80%, #fdbfd6 100%);
color: #FF6687;
transform: scale(1.03);
}
#choices-container {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 22px;
}
#choices-container button {
background: linear-gradient(90deg, #16a085 70%, #f9ebc8 100%);
color: #114932;
font-size: 1.16rem;
border-radius: 8px;
border: 2.2px solid #16A085;
font-weight: bold;
text-shadow: 1px 1px 2px #fff8;
box-shadow: 0 1px 4px #164438;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0 auto;
transition: background 0.18s, color 0.14s;
}
#choices-container button:hover {
background: linear-gradient(90deg, #FF6687 85%, #FFF 100%);
color: #fff;
border-color: #FF6687;
}
#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: #FF6687;
font-weight: bold;
text-shadow: 1px 1px 4px #114932;
}
#question-text {
font-size: 1.43rem;
margin: 22px 0 20px 0;
letter-spacing: 1.3px;
color: #FFFDE7;
text-shadow: 1px 1px 4px #134932, 0 1px #ffb8;
}
#feedback {
font-size: 1.26rem;
font-weight: bold;
background: linear-gradient(90deg, #2ab87b90 80%, #FF668740 100%);
border-radius: 11px;
padding: 12px 0;
min-height: 36px;
margin-bottom: 13px;
color: #fff;
text-shadow: 1px 1px 5px #1a4630, 0 1px #fff8;
border: 2px solid #FF6687;
display: none;
width: 100%;
}
#result-message {
font-size: 1.5rem;
color: #FF6687;
font-weight: bold;
margin: 50px 0 25px 0;
text-shadow: 2px 2px 8px #134932, 1px 1px 3px #000a;
}
#return-button {
display: block;
margin: 0 auto;
background: linear-gradient(90deg, #16a085 80%, #ffbad2 100%);
font-size: 1.16rem;
color: #134932;
font-weight: bold;
border: 2.5px solid #FF6687;
box-shadow: 0 1px 6px #16624e;
text-shadow: 1px 1px 1px #fff8;
}
#return-button:hover { background: linear-gradient(90deg, #FF6687 80%, #FFF 100%); color: #fff; }
@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="demon_slayer_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:["魘夢","累","猗窩座","鳴女"],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.createElement('audio');
correctSE.src = "maoudamashii-quiz_correct.mp3";
const incorrectSE = document.createElement('audio');
incorrectSE.src = "maoudamashii-quiz_incorrect.mp3";
// 配列シャッフル
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.currentTime = 0;
correctSE.play();
correctCount++;
} else {
feedback.textContent = `💀 不正解…正解は「${correct}」です。`;
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:#FF6687">${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. 回答処理 | 回答ボタンで正誤判定→正解/不正解メッセージ表示、全ボタン無効化、次の問題ボタン表示 |
| 5. 次の問題へ | カウンタ更新→残りがあれば繰り返し、なければ終了画面 |
| 6. 終了画面 | 正答率・スコアを表示、タイトルへ戻るボタン表示 |
| 7. タイトルへ戻る | 終了画面非表示→タイトル画面表示 |
主要な関数と役割
| 関数名/変数名 | 役割・処理内容 |
|---|---|
| questions | クイズの問題・選択肢・正解を格納する配列 |
| shuffle(array) | 配列をシャッフルするユーティリティ関数 |
| startGame() | クイズデータの初期化・10問選出・ゲーム画面表示 |
| showQuestion() | 現在の問題・選択肢の表示 |
| selectAnswer() | 回答ボタンの処理、正誤判定、メッセージ表示、ボタン無効化 |
| nextQuestion() | 問題カウンタ進行・次問題または終了画面遷移 |
| endGame() | 結果（正答率）表示、終了画面表示 |
| toTitle() | タイトル画面に戻る（初期化） |
関数の詳細解説
| 関数名 | 主な処理内容 |
|---|---|
| shuffle(array) | 配列要素をFisher–Yatesアルゴリズムでランダムに並べ替え |
| startGame() | 問題リスト初期化、画面遷移、最初の問題表示 |
| showQuestion() | 現在の問題データをDOMに描画 |
| selectAnswer() | 回答の正誤判定、メッセージ表示、全ボタン無効化 |
| nextQuestion() | 次の問題を表示（終了時はendGame()を呼ぶ） |
| endGame() | 結果を画面表示 |
| toTitle() | 終了画面からタイトル画面へ戻る |
改造のポイント
- 問題の追加・差し替え
→questions配列を編集するだけで新たな問題を増やせます。 - 出題数や選択肢数の変更
→quizList.slice(0, 10)部分や選択肢配列を調整してください。 - デザインのアレンジ
→CSS部分を変更して色やフォント、背景をカスタマイズできます。 - サウンドや画像追加
→効果音やキャラクター画像を組み合わせると、より盛り上がります。
アドバイス
WebクイズゲームはHTML＋CSS＋JavaScriptだけで楽しく作成できます。問題編集や演出追加も手軽なので、自分だけのオリジナルクイズにアレンジして友達と遊んだり学習用途に使ってみてください！