<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>〇〇ゲーム</title>
</head>
<body>
<h1>〇〇ゲーム</h1>
<div id="game"></div>
<button onclick="checkAnswer()">返信</button>
<button onclick="showAnswer()">答え</button>
<button onclick="nextQuestion()" style="display: none;">次へ</button>
<script>
const questions = [
"一〇〇〇兆円の借金がある。〇〇数えた？",
"いつも〇〇〇〇の前には必ずうさぎがいる。〇〇を答えよ。",
"〇〇が生えていると呼ばれる職業は何？",
"〇〇したら、寝言で「アイスティー」って言っちゃった。",
"アルファベットの「S」と「C」、どちらが〇つく？",
];
const answers = ["さんぜん", "お月見", "歯科医師", "うどん", "S"];
let currentQuestionIndex = 0;
let score = 0;
const generateGame = () => {
const currentQuestion = questions[currentQuestionIndex];
const answerIndex = Math.floor(Math.random() * currentQuestion.length);
const maskedQuestion = currentQuestion.replace(
currentQuestion[answerIndex],
"〇"
);
const gameElement = document.getElementById("game");
gameElement.innerHTML = `
<p>${maskedQuestion}</p>
<input type="text" id="answer" />
`;
};
const checkAnswer = () => {
const answerElement = document.getElementById("answer");
const answer = answerElement.value;
if (answer === answers[currentQuestionIndex]) {
score++;
if (score === questions.length) {
document.getElementById("game").innerHTML = "<p>クリア！</p>";
document.getElementById("nextButton").style = "display: block;";
} else {
currentQuestionIndex++;
generateGame();
answerElement.value = "";
}
} else {
document.getElementById("game").innerHTML =
"<p>ゲームオーバー！</p>";
}
};
const showAnswer = () => {
document.getElementById("game").innerHTML = `<p>${answers[currentQuestionIndex]}</p>`;
};
const nextQuestion = () => {
currentQuestionIndex = 0;
score = 0;
document.getElementById("nextButton").style = "display: none;";
generateGame();
};
generateGame();
</script>
</body>
</html>
