奶油积木 · Buttercream Blocks

一款轻松、自由搭配的手绘风蛋糕小游戏。没有订单和倒计时，可以做纯胚子，也可以铺满水果和奶油花。

在线试玩

邮箱支持密码注册、密码登录及验证码登录；首次注册验证邮箱后可直接使用密码。玩家可在「我的」修改昵称、设置密码、管理作品与云存档。昵称可修改，登录凭证仍为邮箱。

可以怎么玩

手动抹面可选择全部、只抹顶面或只抹侧面；转盘支持手动转角度与慢速自动旋转，可以边转边抹，也可以保持裱花袋不动，边转边挤出环形装饰。一键铺奶油和一键抹面放在「一键制作」里。

果肉和饼干块点放，果酱、酸奶与奶酱装进固定粗口挤袋。袋身随所选材料变色，粘稠夹心带光泽、防抖和配料颗粒；挤出的夹心可以继续叠胚，并在剖面里显示。

• 左侧蛋糕结构默认展开、可收起，画台居中；裱花、淋奶盖、抹面、铺层各有独立设置，点工具后即可直接操作。手机画台保持在屏幕内，底部工具可横滑，设置面板按需打开。
• 16 种蛋糕胚、21 种夹心；圆形、方形与心形模具，预览与形状一致。
• 8、6、4 寸胚自由叠成多层蛋糕，每层奶油可选平铺、奶盖或波浪。
• 正俯视切换为同画风的俯拍木桌和粉格桌布，斜视回到厨房；画台放大和平移，手绘内容随表面正确投影。
• 完成作品后获得分数和五档星级；贺卡提供三种模板、文案、颜色、布局和贴纸 DIY。
• 夹心逐勺摆放，堆厚会撑开上层蛋糕；装饰随鼠标自动识别各层顶面、侧面与盘沿，支持跨表面拖动，也可手动指定表面。
• 一键铺奶油、一键抹面与手动挤奶油、小抹刀自由选择；手动抹刀按奶油高度刮料：削下凸起，带着余料填坑，抬刀留下收刀痕。大小两种抹刀与三档压力，刀上余料保留到下一笔，可擦刀避免串色。顶面、侧面与各层分别记录，支持撤回、重做和刷新续做，新挤的奶油仍能堆高。蛋糕装饰保护会阻止覆盖已有配件，盘上装饰不受影响。
• 五种花嘴、自选奶油颜色、连续手绘裱花与抹刀动画。按住圆口持续出料，停留堆高，抬手收尖。
• 拿起奶壶按住自由倾倒：落点、停留时间、出料量与三档黏稠度决定铺展和挂边，松手后继续流动；支持跨层瀑布、整次撤回、保存、剖面和贺卡。
• 所有材料随手使用，不需要备料或补货。装饰支持移动、旋转、缩放、图层顺序、撤回和前进。可更换盘子并在盘沿摆放装饰。
• 切开查看由实际层次、颜色及夹心落点生成的剖面。
• 收藏、下载成品图与剖面；游客进度保存在当前浏览器，邮箱登录后可同步私人的云存档。
• 互动贺卡：完成蛋糕后写祝福，选择三款信纸，摆放收礼蜡烛，生成专属链接。收礼人无需登录，点亮蜡烛后展开祝福，还能默默许愿、点击吹灭，烛芯飘烟和彩纸落下；支持重播和减少动态效果。也可自愿开启麦克风，用吹气声吹灭；音频仅本机分析，不录音、不上传，拒绝授权时仍能点按钮。寄件人可以关闭或重新开启链接。
• 配件工坊提供生图提示词和画风参考；导入图片、整理白底与尺寸，无限次摆放。可以自用，也可以投稿，审核通过后进入公共配件柜。
• 原创程序作曲《烤箱旁的小圆舞曲》，搭配程序合成音效与随刮料速度、接触量变化的湿润抹面录音。

右上角 ♫ 可分别调节背景音乐、操作音效或全部静音。浏览器需要首次点击后才允许播放，离开页面会暂停。

本地运行

需要 Node.js，无需安装 npm 依赖。

npm start

打开终端提示的本地地址。测试：npm test。?test=1 使用独立的测试存档。

游客存档保存在 localStorage，导入配件保存在 IndexedDB。登录后，作品和使用的自定义配件会同步到 Supabase，默认只有本人可见；主动投稿的配件会交给审核员查看，通过后配件图片及名称才会公开。游客作品不会自动混入账号，可以手动合并。清除站点数据会清除尚未同步的进度。最多十二片胚、三十六层材料、二十四只收藏。刷新保留作品，不保留撤回历史。

两台设备同时修改时会保留本机版本并提示合并或选择，覆盖前先留本机备份。账号面板可导出包含配件图片的完整存档。?test=1 不连接正式云端。

代码和音乐

piping.js 按时间积累出料体积，用局部承托高度和自重铺展近似圆口奶油的堆积，松手保留收尖；它是为游戏设计的简化模型，并非完整三维流体求解器。旧笔画继续兼容。连续出料使用增量绘制，稳定笔画不再逐帧重算。粘稠夹心使用更低、更宽的堆积轮廓和连续表面，按深度遮挡消除斜视穿插。surface-raster.js 将高度表面投影为三角网格。

spatula.js 使用高度图、刀面阈值和守恒余料转移近似手动抹面，icing.js 将已有奶油转入独立表面高度图，spatula-art.js 用厚度与法线绘制。它是游戏用的简化刮料模型，不是完整流体求解器。抹面录音为 PDaefaul 的 CC0 素材，来源与许可证见 audio/spatula-LICENSE.txt。旧版本浏览器备份经回读核对后转入 IndexedDB，腾出当前存档空间。

core.js 是独立状态模型，flavors.js 是口味数据；renderer.js、cutaway.js 与 cards.js 负责蛋糕、剖面和贺卡 Canvas 绘制，app.js 处理交互，audio.js 负责 Web Audio 合成、混音、音量与页面生命周期。

pour.js 使用固定时间步长的简化薄膜流动模型，计算顶面厚度、侧壁重力流和黏度；pour-art.js 从实际厚度绘制奶盖。上层侧壁流出的奶盖会落到下一层台阶，再继续流下；边缘汇流形成分股挂滴。不同颜色按倾倒先后形成覆盖，薄边缘缓慢晕染；使用 Spectral.js 的颜料混色近似，暂不模拟落到盘子的积液。支持 Worker 的浏览器在后台计算高精度奶盖图像，保持界面可响应；不支持时自动回退。

音乐旋律、和弦和音色写在 scripts/compose_bgm.py，可用 Python + NumPy 重新生成 WAV。网页优先使用小体积 Ogg，必要时回退 WAV。素材请求均为本站资源，不依赖第三方音频库或音乐服务。

python scripts/compose_bgm.py
ffmpeg -i audio/little-kitchen-waltz.wav -c:a libvorbis -q:a 4 audio/little-kitchen-waltz.ogg

代码采用 MIT 许可证。原创程序生成音乐随代码采用同一许可证。字体为站酷快乐体，许可证见 assets/fonts/OFL.txt。插画包含 AI 辅助生成素材，供本项目游戏展示；未单独授予插画素材包的独立商用或再分发许可。

部署

前端仍是静态文件，部署于 GitHub Pages（main 分支根目录）。账号、存档与配件由 Supabase 提供，配置与权限说明见 SUPABASE.md。前端只使用可公开的 publishable key，不能配置 service_role 或 secret key。自行部署时请使用自己的 Supabase 项目；将 cloud-config.js 的配置留空可使用离线模式。