示例成品AI 按一组示范选项写的
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>勇者小冒险</title>
<style>
body{font-family:sans-serif;background:#1a1a2e;color:#e0e0e0;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}
#game{background:#16213e;padding:20px;border-radius:12px;width:360px;box-shadow:0 0 20px rgba(0,0,0,0.5)}
h1{text-align:center;color:#e94560}
#story{min-height:100px;background:#0f3460;padding:15px;border-radius:8px;margin:10px 0}
.btn{display:block;width:100%;padding:12px;margin:5px 0;background:#e94560;color:white;border:none;border-radius:6px;cursor:pointer;font-size:16px}
.btn:hover{background:#c81e45}
#stats{display:flex;justify-content:space-between;font-size:14px;color:#53a8b6}
</style>
</head>
<body>
<div id="game">
<h1>⚔️ 勇者小冒险</h1>
<div id="stats">❤️生命:<span id="hp">100</span> | ⚡攻击:<span id="atk">15</span> | 🪙金币:<span id="gold">0</span></div>
<div id="story">你醒来发现自己身处迷雾森林,前方传来低沉的咆哮声...</div>
<div id="actions">
<button class="btn" onclick="goScene('wolf')">上前查看</button>
<button class="btn" onclick="goScene('hide')">躲进草丛</button>
</div>
</div>
<script>
// 玩家初始状态
let player = { hp: 100, atk: 15, gold: 0 };
// 场景配置表:包含剧情文本、选项及触发效果
const scenes = {
wolf: {
text: "一只暗影狼挡住了去路!它双眼发红,正准备扑来!",
choices: [
{ text: "拔剑战斗", next: 'fight' },
{ text: "转身逃跑", next: 'hide' }
]
},
hide: {
text: "你躲进草丛,发现了一个宝箱!",
choices: [
{ text: "打开宝箱", next: 'chest' },
{ text: "继续赶路", next: 'village' }
]
},
fight: {
text: "你挥剑斩向暗影狼!经过一番苦战,狼倒下了,你获得20金币,但受了点伤。",
effect: () => { player.hp -= 20; player.gold += 20; },
choices: [{ text: "前往村庄", next: 'village' }]
},
chest: {
text: "宝箱里有一瓶生命药水,你喝了下去,感觉力量充沛!",
effect: () => { player.hp = 100; player.atk += 5; },
choices: [{ text: "前往村庄", next: 'village' }]
},
village: {
text: "你到达了宁静的清风村,村长感激你赶走了暗影狼,赠予你勇者勋章!游戏结束,你赢了!",
choices: [{ text: "重新开始", next: 'restart' }]
}
};
// 场景跳转与状态更新核心函数
function goScene(id) {
if (id === 'restart') { player = { hp: 100, atk: 15, gold: 0 }; goScene('start'); return; }
if (id === 'start') {
document.getElementById('story').innerText = "你醒来发现自己身处迷雾森林,前方传来低沉的咆哮声...";
document.getElementById('actions').innerHTML = `
<button class="btn" onclick="goScene('wolf')">上前查看</button>
<button class="btn" onclick="goScene('hide')">躲进草丛</button>`;
updateStats(); return;
}
const scene = scenes[id];
document.getElementById('story').innerText = scene.text;
if (scene.effect) scene.effect(); // 执行状态变更
let btns = '';
scene.choices.forEach(c => btns += `<button class="btn" onclick="goScene('${c.next}')">${c.text}</button>`);
document.getElementById('actions').innerHTML = btns;
updateStats();
}
function updateStats() {
document.getElementById('hp').innerText = player.hp;
document.getElementById('atk').innerText = player.atk;
document.getElementById('gold').innerText = player.gold;
}
</script>
</body>
</html>
```