HexTrails/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"><meta name="theme-color" content="#A8BECF"><title>HEX TRAILS · 转转六角</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="design/tokens.css"><link rel="stylesheet" href="design/components.css"><link rel="stylesheet" href="design/notifications.css"><link rel="stylesheet" href="design/campaign.css"></head>
<body>

<div class="game-shell">
  <header class="game-top"><button class="game-icon" id="map-button" aria-label="选择关卡"><svg><use href="#i-grid"/></svg></button><button class="game-icon help-trigger" aria-label="玩法与设置"><svg><use href="#i-help"/></svg></button></header>
  <main class="workspace">
    <section class="game-column">
      <div class="level-heading"><div class="level-ribbon" id="level-eyebrow">LEVEL 01</div><h1 id="level-name">跟着弯道走</h1><button class="difficulty-pill" id="difficulty-button"><span id="difficulty-label">轻松 · 7</span><span>详情</span></button></div>
      <div class="theme-caption" id="theme-caption"></div><div class="hud"><div class="hud-pill"><span class="ui-icon hud-symbol" data-icon="gem"></span><div><span id="remaining-title">待离场</span><strong id="remaining">8<small> / 8</small></strong></div></div><div class="moves-bubble"><span id="moves-title">待解棋子</span><strong id="moves">8</strong></div><div class="hud-pill turn-counter"><span class="ui-icon hud-symbol" data-icon="right"></span><div><span id="orientation-title">底盘朝向</span><strong id="orientation">0<small>°</small></strong></div></div></div>
      <div class="notice-slot"><div class="game-notice" id="board-toast" role="status" aria-live="polite" aria-atomic="true"></div></div>
      <article class="game-card">
        <div class="canvas-wrap"><canvas id="board" aria-label="六角轨道棋盘，点击棋子沿轨道离场，拖动边缘旋转底盘"></canvas></div>
        <div class="board-instruction" id="instruction">箭头决定起步方向，棋子会沿弯轨自动转向</div>
        <div class="rotation-controls" id="rotation-controls"><button id="rotate-left" class="rotate-button" aria-label="向左旋转底盘 60 度"><span class="ui-icon" data-icon="left"></span><b>左转</b></button><button id="rotate-right" class="rotate-button" aria-label="向右旋转底盘 60 度"><span class="ui-icon" data-icon="right"></span><b>右转</b></button></div>
        <div class="board-tools" id="game-tools"><button id="undo-button"><span class="tool-icon blue"><svg><use href="#i-undo"/></svg></span><b>撤销</b></button><button id="reset-button"><span class="tool-icon pink"><svg><use href="#i-reset"/></svg></span><b>重来</b></button><button id="hint-button"><span class="tool-icon gold"><svg><use href="#i-bulb"/></svg><small>免费</small></span><b>提示</b></button></div>
        <div class="editor-board-tools" id="editor-board-tools" hidden><button id="editor-undo"><span class="ui-icon" data-icon="undo"></span> 撤销编辑</button><button id="trial-button" class="primary"><span class="ui-icon" data-icon="play"></span> 试玩关卡</button></div>
      </article>
      <button id="return-editor" class="return-editor" hidden><span class="ui-icon" data-icon="back"></span> 返回工坊</button>
    </section>
    <aside class="inspector panel editor-panel" id="editor-panel" hidden>
      <div class="eyebrow">LEVEL WORKSHOP</div><h3>把灵感，连成轨迹</h3><p class="muted">选择工具，再轻点棋盘中的格子。</p>
      <label class="field">关卡名称<input id="editor-name" maxlength="60" value="我的第一条轨迹"></label>
      <div class="field-row"><label class="field">底板大小<select id="editor-radius"><option value="2">小 · 19 格</option><option value="3" selected>中 · 37 格</option><option value="4">大 · 61 格</option><option value="5">超大 · 边长 6 · 91 格</option><option value="6">极大 · 边长 7 · 127 格</option></select></label><label class="field">成功离场额度<input id="editor-moves" type="number" min="1" max="999" value="30"></label></div>
      <div class="editor-rotation"><button id="editor-turn-left"><span class="ui-icon" data-icon="left"></span> 底盘左转</button><button id="editor-turn-right"><span class="ui-icon" data-icon="right"></span> 底盘右转</button></div><div class="section-label">编辑工具</div><div class="tool-palette" id="tool-palette"><button data-tool="tile" class="active"><span class="ui-icon" data-icon="arrow"></span><span>放置棋子</span></button><button data-tool="rotate"><span class="ui-icon" data-icon="right"></span><span>转向棋子</span></button><button data-tool="track"><span class="ui-icon" data-icon="track"></span><span>切换轨道</span></button><button data-tool="rotate-track"><span class="ui-icon" data-icon="right"></span><span>旋转轨道</span></button><button data-tool="erase"><span class="ui-icon" data-icon="erase"></span><span>擦除棋子</span></button><button data-tool="inspect"><span class="ui-icon" data-icon="bulb"></span><span>查看路径</span></button></div>
      <div class="field-row"><div><div class="section-label">箭头方向</div><div class="directions" id="directions"></div></div><div><div class="section-label">棋子配色</div><div class="swatches" id="swatches"></div></div></div>
      <p id="selection-info" class="selection-info">还没有选择格子</p>
      <div class="editor-analysis"><div><span id="editor-valid">✓ 可以解开</span><strong id="editor-score">0<small>/100</small></strong></div><p id="editor-analysis-text"></p><div class="score-bars" id="editor-bars"></div></div>
      <div class="editor-actions"><button id="generate-button"><span class="ui-icon" data-icon="star"></span> 生成可解关卡</button><button id="blank-button">新建空白</button><button id="save-button">保存到本机</button><button id="load-button">读取存档</button><button id="export-button">导出 JSON <span class="ui-icon" data-icon="arrow"></span></button><button id="import-button">导入 JSON <span class="ui-icon" data-icon="back"></span></button></div><input type="file" accept=".json,application/json" id="import-file" hidden>
      <p class="editor-footnote">轨道、棋子与评分均使用独立数据模型。JSON 可作为后续 Cocos Creator 关卡资源。碰撞检查与正式游戏保持一致。</p>
    </aside>
  </main>
  <nav class="game-bottom"><button id="play-tab" class="active"><svg><use href="#i-hex"/></svg>游戏</button><span class="journey-badge"><span class="ui-icon" data-icon="star"></span> <b id="progress-label">0 / 48</b><small>已完成</small></span><button id="edit-tab"><svg><use href="#i-edit"/></svg>关卡工坊</button></nav>
</div>
<div class="compat" hidden><span id="breadcrumb"></span><span id="mini-caption"></span><div id="level-list"></div><i id="campaign-progress"></i><div id="play-inspector"><span id="score-value"></span><span id="score-name"></span><span id="score-summary"></span><div id="score-bars"></div><button id="score-help"></button><button id="workshop-link"></button></div></div>
<dialog class="win-overlay" id="result" aria-label="关卡结果" hidden></dialog>
<dialog id="info-dialog"><button class="dialog-close game-icon" aria-label="关闭"><svg><use href="#i-close"/></svg></button><div id="dialog-content"></div></dialog>
<script type="module" src="src/app.js"></script></body></html>