js实现闯关答题
实现思路
使用JavaScript构建闯关答题功能需要设计题目数据结构、页面交互逻辑和关卡切换机制。核心模块包括题目存储、答题判断、得分计算和关卡切换。
题目数据结构
采用数组或对象存储题目信息，包含问题、选项、正确答案和关卡标识：
const questions = [
{
level: 1,
question: "JavaScript是什么类型的语言？",
options: ["编译型", "解释型", "混合型", "标记型"],
answer: 1
},
{
level: 2,
question: "以下哪个不是JavaScript的基本数据类型？",
options: ["String", "Boolean", "Object", "Number"],
answer: 2
}
];页面渲染函数
动态生成题目DOM元素并绑定事件：
function renderQuestion(level) {
const current = questions.find(q => q.level === level);
const html = `
<div class="question">
<h3>第${level}关：${current.question}</h3>
<ul>
${current.options.map((opt, idx) =>
`<li><button onclick="checkAnswer(${idx}, ${level})">${opt}</button></li>`
).join('')}
</ul>
</div>
`;
document.getElementById('quiz-container').innerHTML = html;
}答案验证逻辑
比较用户选择与正确答案，并处理关卡切换：
let score = 0;
const totalLevels = Math.max(...questions.map(q => q.level));
function checkAnswer(selected, level) {
const current = questions.find(q => q.level === level);
if(selected === current.answer) {
score += 10;
if(level < totalLevels) {
renderQuestion(level + 1);
} else {
showResult();
}
} else {
alert('回答错误，请重试');
}
}结果展示
通关后显示最终得分：
function showResult() {
document.getElementById('quiz-container').innerHTML = `
<div class="result">
<h2>闯关成功！</h2>
<p>最终得分：${score}</p>
<button onclick="restart()">重新开始</button>
</div>
`;
}状态重置
提供重新开始功能：
function restart() {
score = 0;
renderQuestion(1);
}样式增强
基础CSS样式建议：
.quiz-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.question button {
display: block;
width: 100%;
padding: 10px;
margin: 5px 0;
cursor: pointer;
}
.result {
text-align: center;
}初始化调用
页面加载时启动第一关：
window.onload = function() {
renderQuestion(1);
};扩展建议
- 添加计时功能限制答题时间
- 实现题目随机排序增加难度
- 加入本地存储保存最高分记录
- 添加音效增强交互体验
- 设计多级难度系统
该实现提供了基础框架，可根据具体需求调整题目内容和交互细节。核心逻辑通过状态管理和DOM操作完成关卡切换和分数计算。
