以下是關(guān)于HTML小游戲源代碼的詳細解析：
<!DOCTYPE html>
<html>
<head>
<title>HTML小游戲</title>
<style>
/*此處為CSS樣式代碼*/
body {
background-color: #F9D9D9;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #ED3547;
margin-top: 50px;
}
#game {
margin-top: 50px;
}
#choice {
display: none;
margin-top: 50px;
}
button {
background-color: #ED3547;
color: #FFF;
padding: 10px 20px;
border: 1px solid #ED3547;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>HTML小游戲</h1>
<div id="game">
<p>游戲開始！請選擇以下選項：</p>
<button id="option1" onclick="selectAnswer('option1')">選項A</button>
<button id="option2" onclick="selectAnswer('option2')">選項B</button>
<button id="option3" onclick="selectAnswer('option3')">選項C</button>
</div>
<div id="choice">
<p id="result"></p>
<button onclick="restartGame()">重新開始</button>
</div>
<script>
/*此處為JavaScript代碼*/
var correctAnswer = "option2";
//定義正確答案為選項B
function selectAnswer(answer) {
if (answer == correctAnswer) {
document.getElementById("result").innerHTML = "恭喜你，回答正確！";
} else {
document.getElementById("result").innerHTML = "很抱歉，回答錯誤。";
}
document.getElementById("game").style.display = "none";
document.getElementById("choice").style.display = "block";
//根據(jù)回答結(jié)果隱藏游戲區(qū)域，顯示結(jié)果區(qū)域
}
function restartGame() {
document.getElementById("game").style.display = "block";
document.getElementById("choice").style.display = "none";
//重新開始游戲，顯示游戲區(qū)域，隱藏結(jié)果區(qū)域
}
</script>
</body>
</html>