救命！我被美女包围了

互动短剧分支指南与在线入口

【救命！我被美女包围了 · 互动短剧分支指南】

来源/类型：Bilibili / Steam FMV 真人互动剧 (12节点精修版)

在线互动播放器：https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/index.html

总节点数：12 个视频分支节点

■ 剧情简介：

改编自 Bilibili 热门第一人称真人恋爱互动短剧。负债创业的你在美术馆与合租公寓之间，接连邂逅魅惑画廊主理人沈知夏、冷艳投行总监林微澜与元气主播苏念念。每一次对话选择都牵动好感度天平，解锁 4 大专属结局。

■ 完整分支节点图谱：

• [open] 第1幕：公寓搬家日，三位风格迥异的她同时出现 —— 选项/结局：帮画廊主理人沈知夏搬画架 / 替冷艳总监林微澜解围 / 接住苏念念掉落的直播设备 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/open-6e77ceea38fc4ed0.mp4)

• [a1] 第2幕【沈知夏线】：私人画廊的午夜品酒邀约 —— 选项/结局：留在画室陪她完成新作 / 借故离开去天台透风 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a1-f837c6c1eff2e8f3.mp4)

• [a2] 第3幕【沈知夏线】：画布背后的暧昧呼吸与试探 —— 选项/结局：握住她执画笔的手表白 / 进入终极修罗场抉择 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a2-c19616d6e6d3a3ef.mp4)

• [b1] 第2幕【林微澜线】：外滩顶层酒廊的契约条件 —— 选项/结局：签下她的私人助理协议 / 婉拒合约坚持独立合作 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b1-6e98e5abd6f67bac.mp4)

• [b2] 第3幕【林微澜线】：加班雨夜，她卸下防备的依靠 —— 选项/结局：脱下外套为她挡雨护送回家 / 进入终极修罗场抉择 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b2-82a8c426f1ec75c9.mp4)

• [c1] 第2幕【苏念念线】：双人互动直播间的突发状况 —— 选项/结局：机智救场帮她赢得榜一PK / 低调退到镜头外守护 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c1-ec8d3ff8fdb13c94.mp4)

• [c2] 第3幕【苏念念线】：下播后的宵夜摊真心话大冒险 —— 选项/结局：兑现大冒险吻她的脸颊 / 进入终极修罗场抉择 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c2-aa22194942b18673.mp4)

• [climax] 第4幕【终极抉择】：周年庆典晚宴，三束目光交汇于你 —— 选项/结局：走向台阶上的真命天女（真结局） / 与沈知夏共赴法国画展 / 与林微澜并肩商海沉浮 / 优柔寡断错失所有人 (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/climax-0723a4935acd0acd.mp4)

• [end_happy] 甜蜜结局：画廊星空下的炽热拥吻 —— 选项/结局：[HAPPY END] (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_happy-36477aaa2bb9a766.mp4)

• [end_normal] 微醺结局：外滩霓虹下的默契搭档 —— 选项/结局：[NORMAL END] (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_normal-3d9fc4b9f6381e6f.mp4)

• [end_bad] 遗憾结局：空荡公寓里的独自清醒 —— 选项/结局：[BAD END] (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_bad-161a544fae58555c.mp4)

• [end_true] 完美真结局：爱意满溢的合租派对 —— 选项/结局：[TRUE END] (https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_true-8c16f1e6a26c0c25.mp4)

分支剧情节点图谱 (JSON Graph)

{

"slug": "surrounded-by-beauties",

"title": "救命！我被美女包围了",

"en_title": "Help! I'm Surrounded by Beauties",

"player_url": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/index.html",

"start": "open",

"nodes": {

"open": {

"id": "open",

"title": "第1幕：公寓搬家日，三位风格迥异的她同时出现",

"act": 1,

"route": "主线",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/open-6e77ceea38fc4ed0.mp4",

"ending": false,

"choices": [

{

"label": "帮画廊主理人沈知夏搬画架",

"to": "a1"

},

{

"label": "替冷艳总监林微澜解围",

"to": "b1"

},

{

"label": "接住苏念念掉落的直播设备",

"to": "c1"

}

]

},

"a1": {

"id": "a1",

"title": "第2幕【沈知夏线】：私人画廊的午夜品酒邀约",

"act": 2,

"route": "沈知夏",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a1-f837c6c1eff2e8f3.mp4",

"ending": false,

"choices": [

{

"label": "留在画室陪她完成新作",

"to": "a2"

},

{

"label": "借故离开去天台透风",

"to": "climax"

}

]

},

"a2": {

"id": "a2",

"title": "第3幕【沈知夏线】：画布背后的暧昧呼吸与试探",

"act": 3,

"route": "沈知夏",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a2-c19616d6e6d3a3ef.mp4",

"ending": false,

"choices": [

{

"label": "握住她执画笔的手表白",

"to": "end_happy"

},

{

"label": "进入终极修罗场抉择",

"to": "climax"

}

]

},

"b1": {

"id": "b1",

"title": "第2幕【林微澜线】：外滩顶层酒廊的契约条件",

"act": 2,

"route": "林微澜",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b1-6e98e5abd6f67bac.mp4",

"ending": false,

"choices": [

{

"label": "签下她的私人助理协议",

"to": "b2"

},

{

"label": "婉拒合约坚持独立合作",

"to": "climax"

}

]

},

"b2": {

"id": "b2",

"title": "第3幕【林微澜线】：加班雨夜，她卸下防备的依靠",

"act": 3,

"route": "林微澜",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b2-82a8c426f1ec75c9.mp4",

"ending": false,

"choices": [

{

"label": "脱下外套为她挡雨护送回家",

"to": "end_normal"

},

{

"label": "进入终极修罗场抉择",

"to": "climax"

}

]

},

"c1": {

"id": "c1",

"title": "第2幕【苏念念线】：双人互动直播间的突发状况",

"act": 2,

"route": "苏念念",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c1-ec8d3ff8fdb13c94.mp4",

"ending": false,

"choices": [

{

"label": "机智救场帮她赢得榜一PK",

"to": "c2"

},

{

"label": "低调退到镜头外守护",

"to": "climax"

}

]

},

"c2": {

"id": "c2",

"title": "第3幕【苏念念线】：下播后的宵夜摊真心话大冒险",

"act": 3,

"route": "苏念念",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c2-aa22194942b18673.mp4",

"ending": false,

"choices": [

{

"label": "兑现大冒险吻她的脸颊",

"to": "end_happy"

},

{

"label": "进入终极修罗场抉择",

"to": "climax"

}

]

},

"climax": {

"id": "climax",

"title": "第4幕【终极抉择】：周年庆典晚宴，三束目光交汇于你",

"act": 4,

"route": "主线",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/climax-0723a4935acd0acd.mp4",

"ending": false,

"choices": [

{

"label": "走向台阶上的真命天女（真结局）",

"to": "end_true"

},

{

"label": "与沈知夏共赴法国画展",

"to": "end_happy"

},

{

"label": "与林微澜并肩商海沉浮",

"to": "end_normal"

},

{

"label": "优柔寡断错失所有人",

"to": "end_bad"

}

]

},

"end_happy": {

"id": "end_happy",

"title": "甜蜜结局：画廊星空下的炽热拥吻",

"act": 4,

"route": "结局",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_happy-36477aaa2bb9a766.mp4",

"ending": "HAPPY END",

"choices": []

},

"end_normal": {

"id": "end_normal",

"title": "微醺结局：外滩霓虹下的默契搭档",

"act": 4,

"route": "结局",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_normal-3d9fc4b9f6381e6f.mp4",

"ending": "NORMAL END",

"choices": []

},

"end_bad": {

"id": "end_bad",

"title": "遗憾结局：空荡公寓里的独自清醒",

"act": 4,

"route": "结局",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_bad-161a544fae58555c.mp4",

"ending": "BAD END",

"choices": []

},

"end_true": {

"id": "end_true",

"title": "完美真结局：爱意满溢的合租派对",

"act": 4,

"route": "结局",

"video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_true-8c16f1e6a26c0c25.mp4",

"ending": "TRUE END",

"choices": []

}

}

}

HTML5 互动短剧独立播放器 (index.html)

<!doctype html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<title>救命！我被美女包围了 · Help! I'm Surrounded by Beauties | 互动短剧播放器</title>

<style>

:root {

--bg: #0c0a12; --surface: #161222; --surface-2: #221c34;

--line: rgba(255,255,255,0.14); --text: #f8f5ff; --muted: rgba(248,245,255,0.65);

--accent: #ec4899; --accent2: #f97316;

--good: #34d399; --gold: #fbbf24; --bad: #f87171;

}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; min-height: 100svh; }

button { font: inherit; color: inherit; cursor: pointer; }

.app { max-width: 1024px; margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column; }

.bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(22,18,34,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }

.bar h1 { flex: 1; margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bar .sub { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; }

.chip { border: 1px solid var(--line); background: rgba(255,255,255,0.05); border-radius: 999px; padding: 5px 12px; font-size: 12px; white-space: nowrap; transition: .2s; }

.chip:hover { border-color: var(--accent); background: rgba(255,255,255,0.12); }

.stage-wrap { position: relative; background: #000; width: 100%; aspect-ratio: 16 / 9; max-height: 76svh; overflow: hidden; }

video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

.stage-wrap.frozen video { filter: brightness(0.48) saturate(0.85) blur(2px); transition: filter .35s; }

.hud { position: absolute; inset: auto 0 0; padding: 20px 14px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.82)); display: flex; align-items: center; gap: 10px; font-size: 12px; }

.track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.24); position: relative; cursor: pointer; }

.fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; width: 0%; }

.skip-btn { position: absolute; right: 14px; top: 14px; border: 1px solid rgba(255,255,255,0.35); background: rgba(12,10,18,0.68); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 14px; font-size: 13px; z-index: 5; }

.skip-btn:hover { border-color: var(--accent); }

.choice-overlay { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; padding: 28px 24px; background: linear-gradient(180deg, rgba(12,10,18,0.15) 0%, rgba(12,10,18,0.92) 65%); z-index: 10; }

.choice-overlay.show { display: flex; animation: fadeIn .3s ease; }

.choice-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); font-weight: 700; margin-bottom: 4px; }

.choice-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.22); background: rgba(22,18,34,0.82); backdrop-filter: blur(10px); text-align: left; transition: transform .15s, border-color .15s, background .15s; }

.opt:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(255,255,255,0.12); }

.opt .key { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 800; font-size: 14px; flex: none; }

.opt .lbl { flex: 1; font-size: 15px; font-weight: 600; }

.timer-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.16); overflow: hidden; margin-top: 12px; }

.timer-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); width: 100%; transition: width 12s linear; }

.below { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.status-card { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

.status-card .route-tag { color: var(--accent2); font-size: 12px; font-weight: 700; letter-spacing: .08em; }

.status-card h2 { margin: 2px 0 0; font-size: 17px; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; }

.breadcrumbs span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

.ending-modal { display: none; padding: 20px; border-radius: 16px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); border: 1px solid var(--accent); flex-direction: column; gap: 12px; }

.ending-modal.show { display: flex; }

.ending-badge { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; }

.map-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 30; display: none; align-items: center; justify-content: center; padding: 16px; }

.map-sheet.show { display: flex; }

.map-box { width: min(680px, 100%); max-height: 84svh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }

.map-node { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.map-node.visited { border-color: var(--accent); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

</style>

</head>

<body>

<div class="app">

<header class="bar">

<button class="chip" id="restartBtn">↺ 重头开始</button>

<h1>救命！我被美女包围了 <span class="sub">Help! I'm Surrounded by Beauties</span></h1>

<button class="chip" id="endingsBtn">结局 0/4</button>

<button class="chip" id="mapBtn">剧情图谱</button>

</header>

<div class="stage-wrap" id="stageWrap">

<video id="video" playsinline preload="auto" controls></video>

<button class="skip-btn" id="skipBtn">跳到选择 ›</button>

<div class="choice-overlay" id="choiceOverlay">

<div class="choice-kicker" id="choiceKicker">MAKE YOUR CHOICE · 关键抉择</div>

<h3 class="choice-title" id="choiceTitle"></h3>

<div class="options" id="optionsBox"></div>

<div class="timer-bar"><i id="timerFill"></i></div>

</div>

</div>

<div class="below">

<div class="status-card">

<div>

<div class="route-tag" id="routeTag">第 1 幕 · 主线</div>

<h2 id="nodeTitle">救命！我被美女包围了</h2>

</div>

<div class="breadcrumbs" id="pathBox"></div>

</div>

<div class="ending-modal" id="endingModal">

<span class="ending-badge" id="endingBadge">TRUE END</span>

<h3 id="endingTitle" style="margin:0;font-size:22px;"></h3>

<p id="endingHint" style="margin:0;color:var(--muted);">已收录至你的互动结局图鉴。你可以回溯到任意分支节点解锁其他路线！</p>

<div style="display:flex;gap:10px;flex-wrap:wrap;">

<button class="chip" id="backChoiceBtn" style="background:var(--accent);color:#fff;border:0;padding:8px 16px;font-weight:700;">返回上一选择</button>

<button class="chip" id="openMapEndBtn">查看完整剧情图谱</button>

<button class="chip" id="restartEndBtn">重新开始</button>

</div>

</div>

</div>

</div>

<div class="map-sheet" id="mapSheet">

<div class="map-box">

<div style="display:flex;justify-content:space-between;align-items:center;">

<h3 style="margin:0;">互动剧情分支图谱 · 救命！我被美女包围了</h3>

<button class="chip" id="closeMapBtn">关闭 ✕</button>

</div>

<div id="mapList" style="display:flex;flex-direction:column;gap:8px;"></div>

</div>

</div>

<script>

const NODES = {"open": {"id": "open", "title": "第1幕：公寓搬家日，三位风格迥异的她同时出现", "act": 1, "route": "主线", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/open-6e77ceea38fc4ed0.mp4", "ending": false, "choices": [{"label": "帮画廊主理人沈知夏搬画架", "to": "a1"}, {"label": "替冷艳总监林微澜解围", "to": "b1"}, {"label": "接住苏念念掉落的直播设备", "to": "c1"}]}, "a1": {"id": "a1", "title": "第2幕【沈知夏线】：私人画廊的午夜品酒邀约", "act": 2, "route": "沈知夏", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a1-f837c6c1eff2e8f3.mp4", "ending": false, "choices": [{"label": "留在画室陪她完成新作", "to": "a2"}, {"label": "借故离开去天台透风", "to": "climax"}]}, "a2": {"id": "a2", "title": "第3幕【沈知夏线】：画布背后的暧昧呼吸与试探", "act": 3, "route": "沈知夏", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/a2-c19616d6e6d3a3ef.mp4", "ending": false, "choices": [{"label": "握住她执画笔的手表白", "to": "end_happy"}, {"label": "进入终极修罗场抉择", "to": "climax"}]}, "b1": {"id": "b1", "title": "第2幕【林微澜线】：外滩顶层酒廊的契约条件", "act": 2, "route": "林微澜", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b1-6e98e5abd6f67bac.mp4", "ending": false, "choices": [{"label": "签下她的私人助理协议", "to": "b2"}, {"label": "婉拒合约坚持独立合作", "to": "climax"}]}, "b2": {"id": "b2", "title": "第3幕【林微澜线】：加班雨夜，她卸下防备的依靠", "act": 3, "route": "林微澜", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/b2-82a8c426f1ec75c9.mp4", "ending": false, "choices": [{"label": "脱下外套为她挡雨护送回家", "to": "end_normal"}, {"label": "进入终极修罗场抉择", "to": "climax"}]}, "c1": {"id": "c1", "title": "第2幕【苏念念线】：双人互动直播间的突发状况", "act": 2, "route": "苏念念", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c1-ec8d3ff8fdb13c94.mp4", "ending": false, "choices": [{"label": "机智救场帮她赢得榜一PK", "to": "c2"}, {"label": "低调退到镜头外守护", "to": "climax"}]}, "c2": {"id": "c2", "title": "第3幕【苏念念线】：下播后的宵夜摊真心话大冒险", "act": 3, "route": "苏念念", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/c2-aa22194942b18673.mp4", "ending": false, "choices": [{"label": "兑现大冒险吻她的脸颊", "to": "end_happy"}, {"label": "进入终极修罗场抉择", "to": "climax"}]}, "climax": {"id": "climax", "title": "第4幕【终极抉择】：周年庆典晚宴，三束目光交汇于你", "act": 4, "route": "主线", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/climax-0723a4935acd0acd.mp4", "ending": false, "choices": [{"label": "走向台阶上的真命天女（真结局）", "to": "end_true"}, {"label": "与沈知夏共赴法国画展", "to": "end_happy"}, {"label": "与林微澜并肩商海沉浮", "to": "end_normal"}, {"label": "优柔寡断错失所有人", "to": "end_bad"}]}, "end_happy": {"id": "end_happy", "title": "甜蜜结局：画廊星空下的炽热拥吻", "act": 4, "route": "结局", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_happy-36477aaa2bb9a766.mp4", "ending": "HAPPY END", "choices": []}, "end_normal": {"id": "end_normal", "title": "微醺结局：外滩霓虹下的默契搭档", "act": 4, "route": "结局", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_normal-3d9fc4b9f6381e6f.mp4", "ending": "NORMAL END", "choices": []}, "end_bad": {"id": "end_bad", "title": "遗憾结局：空荡公寓里的独自清醒", "act": 4, "route": "结局", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_bad-161a544fae58555c.mp4", "ending": "BAD END", "choices": []}, "end_true": {"id": "end_true", "title": "完美真结局：爱意满溢的合租派对", "act": 4, "route": "结局", "video": "https://media.huangguodrama.ai/motion/interactive/surrounded-by-beauties/end_true-8c16f1e6a26c0c25.mp4", "ending": "TRUE END", "choices": []}};

const START = "open";

const ENDINGS = ["end_happy", "end_normal", "end_bad", "end_true"];

const STORAGE_KEY = "hg-interactive-surrounded-by-beauties-v1";

let state = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null") || {

current: START,

history: [],

visited: [START],

endings: []

};

let autoTimer = null;

const video = document.getElementById("video");

const stageWrap = document.getElementById("stageWrap");

const choiceOverlay = document.getElementById("choiceOverlay");

const endingModal = document.getElementById("endingModal");

function saveState() {

try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {}

}

function enterNode(nodeId, pushHistory = false) {

clearTimeout(autoTimer);

const node = NODES[nodeId] || NODES[START];

state.current = node.id;

if (!state.visited.includes(node.id)) state.visited.push(node.id);

stageWrap.classList.remove("frozen");

choiceOverlay.classList.remove("show");

endingModal.classList.remove("show");

document.getElementById("routeTag").textContent = `第 ${node.act || 1} 幕 · ${node.route || "主线"}`;

document.getElementById("nodeTitle").textContent = node.title;

document.getElementById("endingsBtn").textContent = `结局 ${state.endings.length}/${ENDINGS.length}`;

const pathBox = document.getElementById("pathBox");

pathBox.innerHTML = "";

state.history.slice(-5).forEach(h => {

const s = document.createElement("span");

s.textContent = h.label;

pathBox.appendChild(s);

});

video.src = node.video;

video.currentTime = 0;

video.play().catch(() => {});

saveState();

}

function onClipEnd() {

const node = NODES[state.current];

if (!node) return;

stageWrap.classList.add("frozen");

if (node.ending) {

if (!state.endings.includes(node.id)) state.endings.push(node.id);

document.getElementById("endingsBtn").textContent = `结局 ${state.endings.length}/${ENDINGS.length}`;

document.getElementById("endingBadge").textContent = `${node.ending} · 已收集 ${state.endings.length}/${ENDINGS.length}`;

document.getElementById("endingTitle").textContent = node.title;

endingModal.classList.add("show");

saveState();

return;

}

if (!node.choices || !node.choices.length) return;

document.getElementById("choiceTitle").textContent = node.title;

const box = document.getElementById("optionsBox");

box.innerHTML = "";

node.choices.forEach((c, idx) => {

const btn = document.createElement("button");

btn.className = "opt";

btn.innerHTML = `<span class="key">${"ABCD"[idx] || (idx+1)}</span><span class="lbl"></span>`;

btn.querySelector(".lbl").textContent = c.label;

btn.onclick = () => {

state.history.push({ from: node.id, label: c.label });

enterNode(c.to);

};

box.appendChild(btn);

});

choiceOverlay.classList.add("show");

const fill = document.getElementById("timerFill");

fill.style.transition = "none";

fill.style.width = "100%";

requestAnimationFrame(() => {

requestAnimationFrame(() => {

fill.style.transition = "width 12s linear";

fill.style.width = "0%";

});

});

autoTimer = setTimeout(() => {

if (choiceOverlay.classList.contains("show") && node.choices[0]) {

state.history.push({ from: node.id, label: node.choices[0].label });

enterNode(node.choices[0].to);

}

}, 12000);

}

video.addEventListener("ended", onClipEnd);

document.getElementById("skipBtn").onclick = () => {

video.pause();

onClipEnd();

};

document.getElementById("restartBtn").onclick = () => {

state.history = [];

enterNode(START);

};

document.getElementById("restartEndBtn").onclick = () => {

state.history = [];

enterNode(START);

};

document.getElementById("backChoiceBtn").onclick = () => {

const last = state.history.pop();

enterNode(last ? last.from : START);

};

function openMap() {

const list = document.getElementById("mapList");

list.innerHTML = "";

Object.values(NODES).forEach(n => {

const visited = state.visited.includes(n.id);

const row = document.createElement("div");

row.className = "map-node" + (visited ? " visited" : "");

row.innerHTML = `<div><strong>${visited ? n.title : "？？？ (未解锁节点)"}</strong><div style="font-size:12px;color:var(--muted);">第 ${n.act || 1} 幕 · ${n.ending || n.route || "分支"}</div></div>`;

if (visited) {

const jb = document.createElement("button");

jb.className = "chip";

jb.textContent = "跳转至此";

jb.onclick = () => {

document.getElementById("mapSheet").classList.remove("show");

enterNode(n.id);

};

row.appendChild(jb);

}

list.appendChild(row);

});

document.getElementById("mapSheet").classList.add("show");

}

document.getElementById("mapBtn").onclick = openMap;

document.getElementById("endingsBtn").onclick = openMap;

document.getElementById("openMapEndBtn").onclick = openMap;

document.getElementById("closeMapBtn").onclick = () => document.getElementById("mapSheet").classList.remove("show");

enterNode(state.current || START);

</script>

</body>

</html>