HexTrails/design/directions/paper/index.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 设计稿</title><link rel="stylesheet" href="../../showcase.css"><link rel="stylesheet" href="../../art-directions.css"><link rel="stylesheet" href="../../game-tools.css"></head><body class="sheet-page" data-design="paper" style="--paper:#F7F9F8;--accent:#294D60;--bg:#EAF0F3"><main class="sheet-main"><nav class="sheet-nav"><a href="../../index.html">← 设计总览</a><span>第 05 套 / 共 7 套</span><a href="../../../design-showcase.html?design=paper">试玩与审核 ↗</a></nav><nav class="sheet-family-nav" aria-label="切换设计方案"><a href="../calm/index.html">01 · 柔和原色</a><a href="../vivid/index.html">02 · 高彩游乐场</a><a href="../toy/index.html">03 · 积木轨道屋</a><a href="../animals/index.html">04 · 动物弯弯镇</a><a href="../paper/index.html" aria-current="page">05 · 轻线纸境</a><a href="../signpost/index.html">06 · 路标</a><a href="../macaron/index.html">07 · 马卡龙</a></nav><div class="sheet-agent-links"><a href="design.md">Agent 设计规范 · design.md ↗</a><a href="tokens.json">配色数据 · JSON ↗</a></div><header class="sheet-hero"><div><span class="eyebrow">PAPER ROUTES</span><h1>轻线纸境</h1><p>提取自玩法变种实验页：暖白纸面、轻盈细轨道、白边纯色六角与细线箭头。把颜色留给棋子，让弯路轻轻浮现。</p></div><canvas id="sheet-tokens" class="sheet-token-row" width="720" height="270" aria-label="轻线纸境棋子造型设计"></canvas></header><section class="sheet-reference"><canvas id="sheet-reference-board" width="660" height="660" aria-label="从玩法实验页提取的双色棋盘，保留原有布局与画法"></canvas><div><span class="eyebrow">FROM VARIANTS / 画法提取</span><h2>线条轻一点，<br>棋子就清楚一点。</h2><p>以实验页「双色试航」的初始棋盘作对照：暖白格面、浅蓝灰轨道、陶橙与雾蓝棋子。边界只有一道细白线，箭头用圆头线条画出。</p><dl class="reference-spec"><dt>环境 / 棋盘</dt><dd>#EAF0F3 / #FAFBF7</dd><dt>轨道 / 分格</dt><dd>#B2C4CE / #D3DFE3</dd><dt>轨道线宽</dt><dd>格半径 × 0.055</dd><dt>棋子半径 / 白边</dt><dd>格半径 × 0.88 / 0.035</dd><dt>箭头</dt><dd>白色线条 · 圆头 · 无阴影</dd></dl><p>下方五种主题沿用这套棋盘、轨道与箭头画法。</p><a href="../../../labs/variants/index.html">查看原实验页 ↗</a></div></section><script type="application/json" id="sheet-reference-data">{"version":1,"id":"color-1","mode":"color","name":"双色试航","seed":902,"cells":[{"q":-2,"r":0,"tracks":[5,3,4,1,2,0],"id":0},{"q":-2,"r":1,"tracks":[2,4,0,5,1,3],"id":1},{"q":-2,"r":2,"tracks":[2,5,0,4,3,1],"id":2},{"q":-1,"r":-1,"tracks":[4,5,3,2,0,1],"id":3},{"q":-1,"r":0,"tracks":[3,4,5,0,1,2],"id":4},{"q":-1,"r":1,"tracks":[1,0,3,2,5,4],"id":5},{"q":-1,"r":2,"tracks":[3,5,4,0,2,1],"id":6},{"q":0,"r":-2,"tracks":[2,3,0,1,5,4],"id":7},{"q":0,"r":-1,"tracks":[4,2,1,5,0,3],"id":8},{"q":0,"r":0,"tracks":[4,5,3,2,0,1],"id":9},{"q":0,"r":1,"tracks":[5,3,4,1,2,0],"id":10},{"q":0,"r":2,"tracks":[2,3,0,1,5,4],"id":11},{"q":1,"r":-2,"tracks":[2,5,0,4,3,1],"id":12},{"q":1,"r":-1,"tracks":[5,2,1,4,3,0],"id":13},{"q":1,"r":0,"tracks":[5,4,3,2,1,0],"id":14},{"q":1,"r":1,"tracks":[5,2,1,4,3,0],"id":15},{"q":2,"r":-2,"tracks":[1,0,5,4,3,2],"id":16},{"q":2,"r":-1,"tracks":[2,3,0,1,5,4],"id":17},{"q":2,"r":0,"tracks":[3,4,5,0,1,2],"id":18}],"tiles":[{"id":"p0","q":0,"r":2,"dir":2,"color":0},{"id":"p1","q":0,"r":1,"dir":5,"color":1},{"id":"p2","q":-2,"r":0,"dir":3,"color":0}],"gates":[{"q":-2,"r":0,"dir":0,"color":0},{"q":-2,"r":0,"dir":4,"color":0},{"q":-2,"r":0,"dir":5,"color":1},{"q":-2,"r":1,"dir":4,"color":1},{"q":-2,"r":1,"dir":5,"color":0},{"q":-2,"r":2,"dir":3,"color":1},{"q":-2,"r":2,"dir":4,"color":0},{"q":-2,"r":2,"dir":5,"color":1},{"q":-1,"r":-1,"dir":0,"color":0},{"q":-1,"r":-1,"dir":5,"color":1},{"q":-1,"r":2,"dir":3,"color":0},{"q":-1,"r":2,"dir":4,"color":1},{"q":0,"r":-2,"dir":0,"color":0},{"q":0,"r":-2,"dir":1,"color":1},{"q":0,"r":-2,"dir":5,"color":1},{"q":0,"r":2,"dir":2,"color":0},{"q":0,"r":2,"dir":3,"color":1},{"q":0,"r":2,"dir":4,"color":0},{"q":1,"r":-2,"dir":0,"color":1},{"q":1,"r":-2,"dir":1,"color":0},{"q":1,"r":1,"dir":2,"color":0},{"q":1,"r":1,"dir":3,"color":1},{"q":2,"r":-2,"dir":0,"color":0},{"q":2,"r":-2,"dir":1,"color":1},{"q":2,"r":-2,"dir":2,"color":0},{"q":2,"r":-1,"dir":1,"color":0},{"q":2,"r":-1,"dir":2,"color":1},{"q":2,"r":0,"dir":1,"color":1},{"q":2,"r":0,"dir":2,"color":0},{"q":2,"r":0,"dir":3,"color":1}],"stops":[{"q":0,"r":0}],"moveLimit":3,"solution":[{"type":"tap","id":"p0"},{"type":"rotate","direction":1},{"type":"tap","id":"p1"},{"type":"rotate","direction":1},{"type":"tap","id":"p2"}],"evidence":{"bends":3,"stopCount":0,"changedRoute":false,"openedRoute":false,"states":28}}</script><section><div class="section-heading"><div><span class="eyebrow">01 / FIVE WORLDS</span><h2>同一风格，五种主题</h2></div><p>统一的弯曲轨道关卡 · 用实际渲染检查识别度</p></div><div class="sheet-themes"><article class="sheet-theme" style="--bg:#EAF0F3;--ink:#12202A"><small>轻松</small><h3>雾蓝信纸</h3><canvas data-sheet-theme="lagoon" width="480" height="520" aria-label="轻松主题的弯曲棋盘"></canvas><div class="sheet-swatches"><i style="background:#D66C4D" title="#D66C4D"></i><i style="background:#477FC0" title="#477FC0"></i><i style="background:#668877" title="#668877"></i><i style="background:#B58943" title="#B58943"></i><i style="background:#8B7297" title="#8B7297"></i><i style="background:#45868C" title="#45868C"></i><i style="background:#607B90" title="#607B90"></i></div><small>#EAF0F3</small></article><article class="sheet-theme" style="--bg:#F3EEE5;--ink:#12202A"><small>进阶</small><h3>暖砂手札</h3><canvas data-sheet-theme="apricot" width="480" height="520" aria-label="进阶主题的弯曲棋盘"></canvas><div class="sheet-swatches"><i style="background:#D66C4D" title="#D66C4D"></i><i style="background:#477FC0" title="#477FC0"></i><i style="background:#B58943" title="#B58943"></i><i style="background:#B76260" title="#B76260"></i><i style="background:#B28168" title="#B28168"></i><i style="background:#46765F" title="#46765F"></i><i style="background:#8B7297" title="#8B7297"></i></div><small>#F3EEE5</small></article><article class="sheet-theme" style="--bg:#E8EFEB;--ink:#12202A"><small>烧脑</small><h3>鼠尾草页</h3><canvas data-sheet-theme="lavender" width="480" height="520" aria-label="烧脑主题的弯曲棋盘"></canvas><div class="sheet-swatches"><i style="background:#477FC0" title="#477FC0"></i><i style="background:#668877" title="#668877"></i><i style="background:#B58943" title="#B58943"></i><i style="background:#45868C" title="#45868C"></i><i style="background:#46765F" title="#46765F"></i><i style="background:#6B8AAB" title="#6B8AAB"></i><i style="background:#D66C4D" title="#D66C4D"></i></div><small>#E8EFEB</small></article><article class="sheet-theme" style="--bg:#E7EBEE;--ink:#12202A"><small>挑战</small><h3>石墨练习</h3><canvas data-sheet-theme="rose" width="480" height="520" aria-label="挑战主题的弯曲棋盘"></canvas><div class="sheet-swatches"><i style="background:#D66C4D" title="#D66C4D"></i><i style="background:#477FC0" title="#477FC0"></i><i style="background:#8B7297" title="#8B7297"></i><i style="background:#B76260" title="#B76260"></i><i style="background:#607B90" title="#607B90"></i><i style="background:#6B8AAB" title="#6B8AAB"></i><i style="background:#9C7284" title="#9C7284"></i></div><small>#E7EBEE</small></article><article class="sheet-theme" style="--bg:#253B4A;--ink:#FFFFFF"><small>每周挑战</small><h3>夜航图纸</h3><canvas data-sheet-theme="midnight" width="480" height="520" aria-label="每周挑战主题的弯曲棋盘"></canvas><div class="sheet-swatches"><i style="background:#D66C4D" title="#D66C4D"></i><i style="background:#668877" title="#668877"></i><i style="background:#B58943" title="#B58943"></i><i style="background:#8B7297" title="#8B7297"></i><i style="background:#45868C" title="#45868C"></i><i style="background:#B28168" title="#B28168"></i><i style="background:#6B8AAB" title="#6B8AAB"></i></div><small>#253B4A</small></article></div></section><section class="sheet-components"><div class="sheet-panel"><span class="eyebrow">02 / DESIGN LANGUAGE</span><h2>造型与交互规则</h2><ul><li>浅蓝灰细线与微小格缝，延续实验页的轻盈感</li><li>正六角纯色棋子、细白边、圆头线条箭头</li><li>无投影与渐变；陶橙和雾蓝是核心配色</li><li>所有棋子保留独立方向箭头，颜色和表情不改变规则。</li><li>离场与碰撞共用游戏动画，切换设计保持路线与时长一致。</li></ul><p class="sheet-caption">这是一套可与其他方案同时保留的候选设计。到审核页勾选保留、记录修改意见；不会替换你的其他选择。</p><a class="sheet-link" href="../../../design-showcase.html?design=paper">审核与体验这套设计 ↗</a></div><div class="sheet-panel"><span class="eyebrow">03 / COMPONENT STUDY</span><h2>控件与奖励</h2><div class="component-preview"><div class="item-samples"><div class="game-tool" data-tool="undo"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:577.8801843317973%;height:577.8801843317973%;left:-313.3640552995392%;top:-183.41013824884794%"></span></span><b>撤销</b></div><div class="game-tool" data-tool="restart"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:540.5172413793103%;height:540.5172413793103%;left:-422.4137931034483%;top:-158.6206896551724%"></span></span><b>重来</b></div><div class="game-tool" data-tool="hint"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:533.6170212765958%;height:533.6170212765958%;left:-18.29787234042553%;top:-286.3829787234042%"></span></span><b>提示</b></div></div><p class="item-spec">道具底座 64–68px，图标 32px，标签 13px。用独立造型、大小和功能色，与顶部导航按钮区分；纯色平面，无阴影或渐变高光。</p><div class="item-future"><span class="eyebrow">FUTURE STATES / 仅设计示意</span><h3>为次数与广告留出位置</h3><div class="item-samples"><div class="game-tool" data-tool="undo"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:577.8801843317973%;height:577.8801843317973%;left:-313.3640552995392%;top:-183.41013824884794%"></span><span class="item-badge" aria-label="剩余 3 次，示意">3</span></span><b>撤销</b></div><div class="game-tool" data-tool="restart"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:540.5172413793103%;height:540.5172413793103%;left:-422.4137931034483%;top:-158.6206896551724%"></span></span><b>重来</b></div><div class="game-tool" data-tool="hint"><span class="item-face"><span class="item-glyph art-icon" aria-hidden="true"><img src="../../../assets/ui-icons-generated.png" alt="" style="width:533.6170212765958%;height:533.6170212765958%;left:-18.29787234042553%;top:-286.3829787234042%"></span><span class="item-badge ad" aria-label="观看广告获取，示意">AD</span></span><b>提示</b></div></div><p>右上角展示剩余次数，或播放符号 + AD。无角标表示普通状态；数字和获取方式均为样式示例，当前游戏不启用。</p></div><div class="sample-modal"><div class="stars" aria-label="三颗金色星星">★ ★ ★</div><h3>漂亮，全部过关！</h3><p>每一次转弯，都找到出口。</p><a class="sheet-link" href="../../../design-showcase.html?design=paper">继续旅程 →</a></div></div><p class="sheet-caption">底部道具独立于顶部导航。棋盘在通知与旋转区之间垂直居中；可操作棋盘在设计审核页。</p></div></section></main><script type="module" src="../../../src/direction-sheet.js"></script></body></html>