スナイパーＳＫの小屋
これはなに？
最終更新：
sniper1945
-
view
<!DOCTYPE html>
<html lang="ja">
<head>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カービィクイズ</title>
<!-- Tailwind CSS を CDN 経由で読み込み -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* フォント設定 */
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-pink-100 flex items-center justify-center min-h-screen p-4">
<body class="bg-pink-100 flex items-center justify-center min-h-screen p-4">
<!-- メインのゲームコンテナ --> <div id="quiz-container" class="bg-white p-8 rounded-2xl shadow-2xl max-w-lg w-full text-center">
<!-- ゲームタイトル -->
<h1 class="text-4xl font-bold text-pink-600 mb-6">カービィクイズ</h1>
<!-- クイズの質問を表示するエリア -->
<div id="question-area" class="mb-6 p-4 bg-pink-50 rounded-lg shadow-inner">
<p id="question-text" class="text-xl text-gray-800 font-semibold"></p>
</div>
<!-- 選択肢ボタンのコンテナ -->
<div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<!-- 選択肢ボタンはJavaScriptで動的に生成されます -->
</div>
<!-- 結果表示と次の問題へ進むボタンのエリア -->
<div class="flex flex-col items-center">
<p id="result-text" class="text-lg font-bold mb-4"></p>
<button id="next-button" class="bg-pink-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-pink-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300" style="display: none;">
次の問題へ
</button>
</div>
<!-- スコア表示エリア -->
<div class="mt-8 text-xl font-bold text-gray-700">
スコア: <span id="score-display">0</span> / <span id="total-questions"></span>
</div>
</div>
<script>
// クイズの問題データを配列で定義
const questions = [
{
question: "星のカービィの発売日は？",
options: ["1992/4/27", "1996/3/21", "2025/8/28", "1993/3/23"],
answer: "ポップスター"
},
{
question: "カービィの能力で、敵を吸い込んでコピーする能力は何？",
options: ["コピー能力", "吸い込み能力", "コピーパワー", "食べ物パワー"],
answer: "コピー能力"
},
{
question: "カービィが住んでいる星で、ワドルディやデデデ大王がいる場所は？",
options: ["星のカービィ", "プププランド", "ポップスター", "メタナイトの星"],
answer: "プププランド"
},
{
question: "カービィの永遠のライバルであり、いつもカービィを助けてくれる剣士の名前は？",
options: ["デデデ大王", "メタナイト", "ワドルディ", "マルク"],
answer: "メタナイト"
},
{
question: "カービィが敵を吸い込むときに使う技は？",
options: ["吸い込み", "飲み込み", "コピー", "吸引"],
answer: "吸い込み"
}
];
// HTML要素の取得
const questionTextElement = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const resultTextElement = document.getElementById('result-text');
const nextButton = document.getElementById('next-button');
const scoreDisplayElement = document.getElementById('score-display');
const totalQuestionsElement = document.getElementById('total-questions');
// ゲームの状態を管理する変数
let currentQuestionIndex = 0;
let score = 0;
let answered = false;
/**
* ゲームを初期化し、最初の問題を表示する
*/
function startGame() {
currentQuestionIndex = 0;
score = 0;
scoreDisplayElement.textContent = score;
totalQuestionsElement.textContent = questions.length;
nextButton.style.display = 'none';
resultTextElement.textContent = '';
showQuestion();
}
/**
* 現在の問題と選択肢を画面に表示する
*/
function showQuestion() {
answered = false;
const currentQuestion = questions[currentQuestionIndex];
questionTextElement.textContent = currentQuestion.question;
optionsContainer.innerHTML = ''; // 選択肢をクリア
// 選択肢ボタンを動的に生成
currentQuestion.options.forEach(option => {
const button = document.createElement('button');
button.textContent = option;
button.classList.add(
'bg-pink-300', 'text-white', 'font-bold', 'py-3', 'px-4', 'rounded-full',
'shadow-md', 'hover:bg-pink-400', 'transition-colors', 'duration-200', 'text-lg',
'focus:outline-none', 'focus:ring-4', 'focus:ring-pink-200'
);
// クリックイベントリスナーを追加
button.addEventListener('click', () => selectAnswer(option, button));
optionsContainer.appendChild(button);
});
}
/**
* ユーザーが選択肢をクリックしたときの処理
* @param {string} selectedAnswer 選択された回答
* @param {HTMLElement} clickedButton クリックされたボタン要素
*/
function selectAnswer(selectedAnswer, clickedButton) {
if (answered) return; // 既に回答済みなら何もしない
answered = true;
const currentQuestion = questions[currentQuestionIndex];
const isCorrect = selectedAnswer === currentQuestion.answer;
// 回答の正誤に応じてボタンのスタイルを変更
if (isCorrect) {
resultTextElement.textContent = '正解！';
resultTextElement.classList.add('text-green-500');
resultTextElement.classList.remove('text-red-500');
score++;
scoreDisplayElement.textContent = score;
clickedButton.classList.remove('bg-pink-300', 'hover:bg-pink-400');
clickedButton.classList.add('bg-green-500', 'hover:bg-green-600');
} else {
resultTextElement.textContent = `残念！正解は「${currentQuestion.answer}」でした。`;
resultTextElement.classList.add('text-red-500');
resultTextElement.classList.remove('text-green-500');
clickedButton.classList.remove('bg-pink-300', 'hover:bg-pink-400');
clickedButton.classList.add('bg-red-500', 'hover:bg-red-600');
// 正解のボタンをハイライト
Array.from(optionsContainer.children).forEach(button => {
if (button.textContent === currentQuestion.answer) {
button.classList.remove('bg-pink-300', 'hover:bg-pink-400');
button.classList.add('bg-green-500', 'hover:bg-green-600');
}
});
}
// 全てのボタンを無効化
Array.from(optionsContainer.children).forEach(button => {
button.disabled = true;
});
nextButton.style.display = 'block'; // 次へボタンを表示
}
/**
* 次の問題に進む、またはゲームを終了する
*/
function nextQuestion() {
currentQuestionIndex++;
nextButton.style.display = 'none';
resultTextElement.textContent = '';
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResult();
}
}
/**
* ゲーム終了時の最終結果を表示する
*/
function showResult() {
questionTextElement.textContent = `ゲーム終了！あなたのスコアは ${score} / ${questions.length} です。`;
optionsContainer.innerHTML = ''; // 選択肢をクリア
resultTextElement.textContent = '';
// もう一度プレイするボタンを表示
const playAgainButton = document.createElement('button');
playAgainButton.textContent = 'もう一度プレイする';
playAgainButton.classList.add(
'bg-pink-500', 'text-white', 'font-bold', 'py-3', 'px-6', 'rounded-full',
'shadow-lg', 'hover:bg-pink-600', 'transition-all', 'duration-300',
'transform', 'hover:scale-105', 'focus:outline-none', 'focus:ring-4', 'focus:ring-pink-300'
);
playAgainButton.addEventListener('click', startGame);
optionsContainer.appendChild(playAgainButton);
}
// 次へボタンのイベントリスナー
nextButton.addEventListener('click', nextQuestion);
// ページの読み込み完了後にゲームを開始
window.onload = startGame;
</script>
</body>
</html>
</html>
