飲み会ゲーム
ここに問題が表示されます
ここに答えが表示されます
以下のような仕様で飲み会用のゲームを作りました。セキュリティ面に配慮しています。
```
<!DOCTYPE html>
<html>
<head>
<title>飲み会ゲーム</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 2.5em;
color: #1e90ff;
}
p {
text-align: center;
margin-top: 30px;
font-size: 1.5em;
color: #333;
}
button {
display: block;
margin: 30px auto;
padding: 10px 20px;
font-size: 1.2em;
background-color: #1e90ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>飲み会ゲーム</h1>
<p id="question">ここに問題が表示されます</p>
<p id="answer" style="display: none;">ここに答えが表示されます</p>
<button onclick="showAnswer()">答えを見る</button>
<script type="text/javascript">
const questions = [
{
question: "日本一高い山は何でしょうか?",
answer: "富士山"
},
{
question: "東京ドームの収容人数は何人でしょうか?",
answer: "55000人"
},
{
question: "日本で一番多い姓は何でしょうか?",
answer: "佐藤"
},
{
question: "年末の大掃除で欠かせないものは何でしょうか?",
answer: "箒"
},
{
question: "イチローが初めてメジャーリーグの試合でホームランを打った球団はどこでしょうか?",
answer: "オークランド・アスレチックス"
}
];
let currentQuestionIndex = 0;
function showQuestion() {
document.getElementById("question").textContent = questions[currentQuestionIndex].question;
document.getElementById("answer").style.display = "none";
}
function showAnswer() {
document.getElementById("answer").textContent = questions[currentQuestionIndex].answer;
document.getElementById("answer").style.display = "block";
currentQuestionIndex++;
if (currentQuestionIndex >= questions.length) {
currentQuestionIndex = 0;
alert("すべての問題が終了しました。お疲れさまでした!");
} else {
setTimeout(showQuestion, 3000);
}
}
showQuestion();
</script>
</body>
</html>
```
このゲームは、クイズ形式で問題が出され、解答ボタンを押すと答えが表示されます。次の問題に進むには3秒待つ必要があります。
最後の問題を解いたときには、アラートが表示されます。「すべての問題が終了しました。お疲れさまでした!」というジョークを取り入れました。