# 07 · 马卡龙

设计 ID：`macaron` · 渲染风格：`macaron` · 英文名：MACARON。2026-09-14 参考 Meowdoku（喵喵数独）的设计语言制作，可与其他方案同时保留。参考分析与实机对照见 [docs/art-proposal-macaron.html](../../../docs/art-proposal-macaron.html)。

[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=macaron)

## 设计目标

从 Meowdoku 借来的是一套"奶油世界 + 白卡片 + 糖果色块 + 白色粗记号"的语言：奶油色世界上托一张白色软托盘，六角格像带白缝的软糖砖，藕紫色轨道压在糖砖上；棋子是糖果色圆角六角，白色贴纸边，十二色统一粗圆头白箭头。所有状态用颜色和弹跳表达，不用描边和阴影：路线点亮成棋子自己的浅色，碰撞处橘红打叉，出场从左上角一波弹开，离场撒星。文字是藕紫褐色，行动色只有一种橙。

## 棋盘与棋子怎么画

以格半径 s 为单位，复用 [renderer.js](../../../src/renderer.js) 的 macaron 分支和 [token-art.js](../../../src/token-art.js) 的 macaron 分支。圆角六角由 [tile-shape.js](../../../src/tile-shape.js) 的 `roundedHex(x, y, r, 0.16)` 生成。

| 部件 | 当前实现 |
| --- | --- |
| 画布边距 | `layout.pad = 0.3`：布局时每一侧多留 0.3 格半径；同时画布向左右各多伸 8px 到外壳内边距里（`.canvas-wrap` 负外边距），所以棋盘尺寸与其他方案相同，出口处的冲出与消融仍落在画布内 |
| 托盘 | 全部格面外扩 0.34s 后取凸包，转角圆化半径 0.9s，纯色 `tray`（白），随棋盘旋转 |
| 托盘阴影 | 两层不透明色阶：外层再放大 0.06s、下移 0.20s 用 `shadowSoft`；内层下移 0.10s 用 `shadow`。偏移在屏幕坐标里施加，旋转时保持向下 |
| 糖砖（格面） | 圆角六角，半径 0.90s，圆角 0.16；格与格之间是 0.17s 的白缝，不画格线 |
| 环带色 | 从棋盘中心格向外按六角距离分环，三色循环 `rings[d % 3]`；只表达位置，旋转后不变 |
| 轨道 | `track` 藕紫褐（每个世界一档），单层，宽 clamp(0.11s, 2.2, 6.5)，圆头圆接；跨过白缝连续画，路线不断开；只有板边端点内收到 0.90s − 轨宽/√3 |
| 棋子 | 圆角六角，半径 0.90s，正好盖满糖砖，圆角 0.16，纯色面；白色贴纸边宽 0.10r，与白缝连成一体。轨道从棋子底下钻过：白缝里的一小段一直画到白边为止，和空砖之间的画法一致，所以看得出哪几条轨道通向这枚棋子；不再画底座 |
| 箭头 | 白色线条：杆从 −0.34r 到 0.30r，头两笔到 ±0.30r；线宽 0.20r，圆头，十二色统一 |
| 路线点亮 | 预览或行进中路线经过的糖砖改用棋子色调白 80%（行进中 84%）；被挡时用 `blush` 橘奶色 |
| 预览路线 | 棋子本色一根粗线 1.15 × 轨宽，画在轨道上、棋子下；被挡只画到接触点，末端橘红叉 |
| 碰撞 | 接触时被撞格改 `blush`，接触点画橘红 `blocked` 叉，大小随 impact 变化；回弹沿用共用碰撞动画 |
| 提示 | 两层实心圆角六角光晕：`hintGlow` 1.02s、`hint` 0.94s，露出棋子外一圈蜂蜜黄 |
| 出场 | 新棋盘时糖砖、轨道、棋子按左上到右下的顺序缩放弹入：每格延迟 = 归一化位置 × 0.55，各自 0.45 段，ease-out 回弹 5%，总长 720ms |
| 离场 | 滑行沿用共用时序；到达出口后是 640ms 的收束（`exitDuration` 把窗口从共用的 180ms 放宽）：前 45% 棋子沿出口方向减速冲出 0.55s（三次 ease-out），大半个身体越过托盘边缘；从 15% 起实心面、白边在 20% 内淡掉，箭头在 25% 内淡掉；面被一层同色圆点阵接管（间距 0.17s、半径 0.115s、六角排列、内缩到 0.82r），圆点跟着棋子走，并从外圈向中心依次化掉：开始时刻 = 0.16 + 0.38 × (1 − 到边缘的比例) + 0.16 × 噪声，各自用 0.28 段缩小到 0、颜色向白调 45%、透明度降到 40%、沿固定随机方向漂 0.14s 并上浮 0.10s。没有尾迹、碎片和飞出的粒子 |
| 计数 | 棋子离场后 `.moves-bubble` 弹一次（1 → 1.18 → 1，420ms） |
| 通关庆祝 | 最后一枚棋子离场后先在棋盘上放 720ms 的清空涟漪（`state.celebrate`）：糖砖按到中心格的环数依次鼓起 8% 并向白调亮 35% 再落回，每环延迟 0.07、各自 0.45 段的正弦脉冲；轨道不随之缩放；结束后才淡入结算 |

不使用棋子图集，不使用滤镜调色。全部造型由多边形、折线与圆组成；阴影是两层不透明多边形，不是模糊。

## 五种主题

| 主题 ID | 阶段 | 名称 | 用色方向 |
| --- | --- | --- | --- |
| lagoon | 轻松 | 奶油 | 奶油底，蜜桃奶／奶黄／薄荷奶三环，草莓、蓝莓、抹茶领色 |
| apricot | 进阶 | 蜜桃 | 蜜桃奶油底，蜜柑与海盐蓝领色 |
| lavender | 烧脑 | 香芋 | 香芋奶油底，香芋紫与玫瑰领色 |
| rose | 挑战 | 草莓牛奶 | 草莓牛奶底，玫瑰与抹茶对照 |
| midnight | 每周挑战 | 可可夜 | 可可色底，白托盘像被灯照亮的甜品盘 |

完整色值、环带色、托盘与阴影色、每主题 4/7/9/12 色有序 palette 见 tokens.json 与 [art-directions.js](../../../src/art-directions.js)。场景文字用藕紫褐（可可夜用奶白），对世界色 5.5 : 1 以上；十二色白箭头最低 3.30 : 1；轨道对三种糖砖最低 3.28 : 1（奶油世界）。

主游戏中本方案的主题按旅程切换：五个世界平均铺在整条主线上，最后一段为可可夜；`?theme=` 参数仍可强制指定。

## 控件与边界

- 字体：资源圆体 Resource Han Rounded（用户指定，SIL OFL），Medium 500 与 Bold 700 两档子集在 [assets/fonts](../../../assets/fonts/README.md)，`@font-face` 写在 game-tools.css 的 macaron 段；其后回落 `ui-rounded`、Arial Rounded、Nunito、PingFang。界面里 600 以上的字重落到 Bold，400–500 落到 Medium。子集之外的字符按字形回落到系统字体，新增文案要补进字符表。
- 顶部选关、设置：白色圆底加柔和投影，图标通过遮罩着色为深藕紫；不用滤镜。
- 关卡号与待解计数：两列并排放在两枚圆钮之间，小标签在上（关卡 / 待解，淡藕紫 12px），大数字在下（26px 粗体深藕紫）；由 `direction.hud` 提供标签，app.js 生成；数字在棋子离场后弹一次。教学关显示 入门 N/3。
- 通知：白色气泡，顶部小尾巴指向计数胶囊，前置一枚橙点；位置沿用 shared.md（步数下方）。
- 旋转按钮：无底座，图标 60px 用世界色对应的浅藕紫着色，标签 12px 藕紫；位置由 [app.js](../../../src/app.js) 的 `placeRotation` 按棋盘几何计算（`layout.rotation = 'under-board'`，`layout.rim = 0.40`）：取下方斜边中点，向下作垂线到道具上缘，按钮中心放在垂线中点。旋转不占独立布局行，与 06 相同，是与 shared.md 的一处出入。
- 撤销、重来、提示：参考作品的白色圆钮。白底 64px、柔和投影、无描边；图标通过图集遮罩着色为海盐蓝 #4A91D4 / 玫瑰 #D06E93 / 蜂蜜褐 #C98A0E；标签藕紫；禁用 45% 透明。这是与 shared.md「道具无阴影」的一处有意出入，2026-09-14 用户确认只允许本方案使用，不向其他方案放开。
- 结算：参考作品的深色庆祝画面，而且是全屏覆盖层：`<dialog>` 铺满整个视口（inset 0、无最大宽高、无圆角、无卡片），320ms 淡入，遮罩 rgba(40,26,32,.86) 加模糊；内容居中，奶白发光标题 25px，副标题浅奶色，金色发光星星后有 640px 缓慢旋转的奶黄射线和一次糖果色纸屑，全部铺在整屏上不被裁切；主按钮是橙色胶囊 `#E07416`（白字 3.1 : 1）底边 4px 深橙，次按钮是半透明奶白胶囊。失败画面用同一覆盖层。
- 选关与设置：白色圆角卡片弹入（0.86 → 1，380ms 回弹），顶部一条蜜桃色标题带，右上角白色圆形关闭钮；当前关橙色胶囊，普通关奶油方块，完成关薄荷奶。
- 棋盘居中、金色奖励继承 shared.md。

## 验收与接入

使用 `artDirection('macaron')` 和 `directionTheme(direction, themeId, colorCount)`；主游戏 `?design=macaron`。

- 检查五个世界的托盘、阴影方向与环带色；可可夜下托盘保持奶白。
- 检查 37 / 61 / 91 格下白缝与轨道宽度：91 格时白缝约 3px、轨道 2.2px，箭头仍可读。
- 检查出场动画在换关、重来、教学三处都播放一次；旋转、撤销时不重播；清空涟漪只播一次且全屏结算在它之后淡入，射线与纸屑不被任何盒子裁切。
- 检查棋子砖面上没有轨道露出，白缝里通向棋子的轨道段可见，空格之间的轨道连续不断；提示路线连续画过白缝。
- 检查路线点亮只覆盖路线经过的格；被挡路线在接触点结束并打叉。
- 检查左右两侧出口的消融完整留在画布内，没有被画布边裁掉；`prefers-reduced-motion` 下取消出场、消融、庆祝与计数弹跳。
- 原生端需实现两层不透明阴影、圆角六角与遮罩着色；尚未完成原生实机验收。