51 lines
6.7 KiB
HTML
51 lines
6.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>环路车场 · HEX TRAILS Lab</title><link rel="stylesheet" href="./style.css"></head>
|
||
<body>
|
||
<header class="lab-header"><a href="/">HEX TRAILS <span>/ CAR LAB</span></a><a href="../hex-video/designv2.html">Video Lab Design v2 ↗</a></header>
|
||
<main class="workspace">
|
||
<aside class="inspector">
|
||
<p class="eyebrow">PLAY EXPERIMENT / 02</p><h1>环路车场</h1><p class="intro">点一下，即刻出发。<br>解开弯路，让小车一路开到终点。</p>
|
||
<label class="section-title" for="mode">玩法</label><select id="mode" aria-label="玩法"><option value="free">自由点车</option><option value="batch">转盘发车 · 新玩法</option></select>
|
||
<p class="section-title">棋盘形状</p>
|
||
<div class="switch" aria-label="棋盘类型"><button data-kind="square" class="active" aria-pressed="true"><span class="shape square"></span>方格路网</button><button data-kind="hex" aria-pressed="false"><span class="shape hex"></span>六角路网</button></div>
|
||
<div class="settings-body">
|
||
<label class="section-title" for="scenario">关卡样本</label><select id="scenario"><option value="0">01 · 连弯初见 / 10 辆</option><option value="1" selected>02 · 交织长路 / 16 辆</option><option value="2">03 · 满盘绕行 / 22 辆</option><option value="3">04 · 超大桌面 / 96 辆</option></select>
|
||
<div class="actions"><button id="new">换张路网</button><button id="restart">重新开始</button></div>
|
||
<button class="primary" id="auto" aria-pressed="false">▶ 自动演示</button>
|
||
<label class="speed-control" for="speed"><span>行驶速度 <output id="speed-label">2×</output></span><input id="speed" type="range" min="1" max="3" step="0.5" value="2" aria-label="行驶速度倍率"></label>
|
||
<label class="check"><input type="checkbox" id="preview" checked> 悬停查看完整路线</label>
|
||
<div id="batch-help" hidden><strong>转盘 → 发车 → 再转盘</strong><p>点击发车，本轮车辆自动错峰，互不冲突的车一起走。倒计时结束后出发，途中连续通行。</p><p>绿色提示线标出盘内路线，驶入外环后收起。看到“需转盘”时，由你决定转向。</p></div>
|
||
<details class="guide"><summary>怎么玩</summary><p>点车立即出发，多辆车可以同时行驶。遇到前车或交叉冲突时会停下，路空后自行继续。</p><p>弯道自动转向，交叉处不换线。转动底盘时，盘内行驶车辆先归位，换路后再出发。</p><p>车从边缘汇入同形环路，顺时针开到右上角终点。闭环路线需要先换路。</p></details>
|
||
<details class="car-access"><summary>车辆操作列表</summary><p>也可以用键盘选择车辆，立即发车。</p><div id="car-list"></div></details>
|
||
<div class="footnote"><span class="live-dot"></span> 独立玩法实验 · 本地运行<p id="stats"></p></div>
|
||
</div>
|
||
</aside>
|
||
<section class="preview-area" aria-label="环路车场游戏">
|
||
<div class="preview-label"><span>PLAY VIEW</span><span id="board-label">7 × 7 · 四向道路</span></div>
|
||
<div class="stage">
|
||
<div class="ice" aria-hidden="true"></div>
|
||
<div class="game-hud">
|
||
<div class="level-progress"><span id="level-label">关卡 2</span><div aria-hidden="true"><b>1</b><i></i><b class="current">2</b><i></i><b>3</b><i></i><b>4</b></div></div>
|
||
<div class="remaining"><span>待出发</span><strong id="remaining">16</strong></div>
|
||
<button class="reset-icon" id="reset" aria-label="重新开始本关"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M25 13A10 10 0 1 0 26 20M25 5v8h-8" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||
</div>
|
||
<div class="trip-hud"><span><i class="travel-dot"></i>行驶中 <strong id="transit">0</strong></span><span>已抵达 <strong id="arrived">0</strong> <span class="arrival-mark">✓</span></span></div>
|
||
<div class="batch-hud" id="batch-hud" hidden><span id="turn-count">已转 0 次</span><span id="turn-goal"></span><span id="batch-result">点击发车开始</span></div>
|
||
<div class="meter" aria-hidden="true"><i id="meter"></i></div>
|
||
<div class="board-scroll"><canvas id="game" width="768" height="740" aria-label="交互车场，点击车辆立即发车。也可用车辆操作列表。"></canvas></div>
|
||
<div class="status" id="status" role="status" aria-live="polite">点击出发，遇车等候，路空继续。</div>
|
||
<div class="controls">
|
||
<button id="left" aria-label="逆时针旋转内部道路"><svg viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="30" r="24" fill="#747B87"/><circle cx="30" cy="29" r="18" fill="#F56B37" stroke="#BC451E" stroke-width="3"/><path d="M20 21h10a10 10 0 1 1-10 10M25 16l-5 5 5 5" fill="none" stroke="#FFF1D5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><small>左转底盘</small></button>
|
||
<button id="hint" aria-label="查看路线提示"><svg id="hint-icon" viewBox="0 0 60 60" aria-hidden="true"><path d="M21 38c0-6-7-8-7-17a16 16 0 0 1 32 0c0 9-7 11-7 17" fill="#64BDF8" stroke="#438BD0" stroke-width="3"/><path d="M23 39h14v6H23zM26 49h8" fill="#B0BDCD" stroke="#738498" stroke-width="3" stroke-linecap="round"/><path d="M25 29l5 6 5-6" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"/></svg><svg id="run-icon" viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="30" r="23" fill="#378EE9" stroke="#2468B0" stroke-width="3"/><path id="run-symbol" d="M24 17L43 30 24 43Z" fill="#fff"/></svg><small id="hint-label">路线提示</small></button>
|
||
<button id="right" aria-label="顺时针旋转内部道路"><svg viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="30" r="24" fill="#747B87"/><circle cx="30" cy="29" r="18" fill="#F56B37" stroke="#BC451E" stroke-width="3"/><path d="M40 21H30a10 10 0 1 0 10 10M35 16l5 5-5 5" fill="none" stroke="#FFF1D5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><small>右转底盘</small></button>
|
||
</div>
|
||
<section class="win" id="win" hidden aria-label="全部车辆已抵达">
|
||
<div class="sunburst" aria-hidden="true"></div><h2>全部抵达！</h2><p>弯弯绕绕，顺利到站</p><div class="win-medal" aria-hidden="true">✓</div><strong id="win-count">16 辆小车，全部到齐</strong><button id="play-again" class="gold-button">再玩一局</button>
|
||
</section>
|
||
</div>
|
||
<div class="preview-footer"><span>点击即走 · 碰撞等候 · 顺时针归途</span><span>DESIGN V2</span></div>
|
||
</section>
|
||
</main><script type="module" src="./app.js"></script>
|
||
</body></html>
|