cabinw
10cf93a324
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
1 line
12 KiB
HTML
1 line
12 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 设计稿</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 套 / 共 5 套</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></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> |