示例成品AI 按一组示范选项写的
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动物知识大闯关</title>
<style>
body { font-family: sans-serif; background: #e8f5e9; display: flex; justify-content: center; padding-top: 60px; }
.box { background: #fff; border-radius: 12px; padding: 30px; width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; }
h1 { color: #2e7d32; font-size: 22px; }
.question { font-size: 18px; margin: 20px 0; color: #333; }
.btn { display: block; width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #4caf50; background: #fff; color: #333; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.2s; }
.btn:hover { background: #e8f5e9; }
.btn.correct { background: #4caf50; color: #fff; }
.btn.wrong { background: #f44336; color: #fff; }
.score { margin-top: 20px; font-size: 16px; color: #666; }
.restart { display: none; margin-top: 20px; padding: 10px 24px; background: #2e7d32; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<div class="box">
<h1>动物知识大闯关</h1>
<div class="question" id="q"></div>
<div id="opts"></div>
<div class="score">得分:<span id="s">0</span> / <span id="total"></span></div>
<button class="restart" id="rbtn" onclick="init()">再玩一次</button>
</div>
<script>
// 题库数据
const data = [
{ q: "哪种动物是世界上最大的哺乳动物?", o: ["大象", "蓝鲸", "长颈鹿", "犀牛"], a: 1 },
{ q: "企鹅主要生活在地球的哪个半球?", o: ["北半球", "南半球", "东半球", "西半球"], a: 1 },
{ q: "变色龙最著名的特征是什么?", o: ["会飞", "会变色", "会发光", "会放电"], a: 1 }
];
let idx = 0, score = 0, locked = false;
function init() {
idx = 0; score = 0; locked = false;
document.getElementById('s').innerText = score;
document.getElementById('total').innerText = data.length;
document.getElementById('rbtn').style.display = 'none';
render();
}
function render() {
if (idx >= data.length) { // 答题结束
document.getElementById('q').innerText = `闯关结束!你答对了 ${score} 题!`;
document.getElementById('opts').innerHTML = '';
document.getElementById('rbtn').style.display = 'inline-block';
return;
}
const cur = data[idx];
document.getElementById('q').innerText = `第${idx+1}题:${cur.q}`;
const box = document.getElementById('opts');
box.innerHTML = '';
cur.o.forEach((text, i) => {
const b = document.createElement('button');
b.className = 'btn'; b.innerText = text;
b.onclick = () => check(i, b);
box.appendChild(b);
});
}
function check(i, btn) {
if (locked) return; // 防止重复点击
locked = true;
const cur = data[idx];
// 标出正确与错误选项
const btns = document.querySelectorAll('.btn');
btns[cur.a].classList.add('correct');
if (i === cur.a) { score++; document.getElementById('s').innerText = score; }
else { btn.classList.add('wrong'); }
// 1秒后自动进入下一题
setTimeout(() => { idx++; locked = false; render(); }, 1000);
}
init(); // 启动游戏
</script>
</body>
</html>
```