Color Trace · Daily Game Lab

▶ 立即试玩 // play in browser

📖 上手教学 // how to play

按住任意彩珠拖出同色长链，松开消除得分。错误 5 次结束。

启动方式

双击 build/index.html 即可玩。无依赖、无服务器。同时支持鼠标和触屏。

怎么玩

屏幕上散落 4 色彩珠
鼠标/手指按住任一颗珠
拖动经过相邻的同色珠 → 加入路径（高亮）
拖到异色珠 → 路径变红警示
松开 → 消除路径上所有珠子 → 得分 = N² × 10
异色拖错 → ERROR +1
累计 5 次错误 → Game Over

得分公式

链长	得分
2	40
3	90
5	250
8	640
10	1000
15	2250
20	4000

平方曲线，越长越爆。

操作

输入	行为
鼠标按下 / touch start	起始珠
鼠标拖拽 / touch move	沿同色拖动加链
鼠标抬起 / touch end	结算消除

调参入口

打开源码顶部 CONFIG：

NEIGHBOR_DIST：相邻判定距离阈值（默认 110px）
MAX_ERRORS：失败上限（默认 5）
SCORE_EXPONENT：得分公式指数（默认 2，越大越爆炸）
BEAD_COUNT_MIN/MAX：场上珠子数量
COLOR_COUNT：颜色种类（默认 4，可改 3 简单 / 5 困难）

文件清单

src/index.html：源码 454 行
build/index.html：构建版（=src）
DESIGN.md / PLAYTEST_REPORT.md / ACCEPTANCE_REPORT.md
EXPANSION_HANDOFF.md / EXPANSION_PLAN.md / CHINA_MOBILE_COMMERCIALIZATION_PLAN.md
DAILY_REPORT.md / CHANGELOG.md

📊 评分维度 // verdict

30 秒可理解9

操作反馈9

核心循环9

复玩动力8

爽感8

策略空间8

开发完成度8

商业扩展潜力8

🚀 扩展路径 // what's next

1. 好玩证据

玩家第一个 30 秒：看介绍 → 按住一颗红珠 → 试着拖到旁边红珠 → 发现路径线长出来 → 松开 → 看到 +40 分 → 想着"再拖长一点"。

第一个正反馈：路径线绘制 + 珠子高亮 + 拖加音效，从按下那一刻开始持续到松开。

为什么继续玩第二局：5 次错误结束很快（1-3 分钟），失败成本低；MAX CHAIN 数字直接挑战。

最强爽点：拖到 8+ 颗时屏幕中央飘出 8 CHAIN! + 12×8=96 个粒子 + +640 分大字 + 屏幕震动，多感官同时高潮。

当前最弱体验断点：

屏幕上同色稀疏时，玩家被迫拖短链（2-3 颗），感觉不爽
错误音效较突兀，可能让玩家挫败感放大

自测证据：代码闭环 + 6 重反馈实现完整。

产品假设（待验证）：

玩家平均每局 30-60 秒（按 5 次错误推算） → 待验
D1 留存 > 25% → 待验
平均每局 MAX CHAIN ≥ 5 → 待验

2. 核心体验定义

玩家通过 [按住拖拽同色彩珠]，
不断获得 [路径延伸高亮 + 实时音调爬升],
为了 [松开瞬间换取 N² 平方分数],
逐步形成 [短链安全 vs 长链高分 vs 异色风险 的实时权衡]。

3. 三个变体方向

变体 A：万能珠（Wild Bead）

验证问题：加 5% 概率的万能珠（任何色都可连），是否提升爽感而不破坏策略
改动：spawnBead 增加 5% 概率生成 wildColor=true，渲染为彩虹渐变
预计开发：0.5 轮
成功标准：3 局平均 MAX CHAIN 提升 ≥ 50%，玩家形容"激动"
失败判断：万能珠过度依赖，普通链变得无意义

变体 B：关卡模式（Level Mode）

验证问题：每关目标分数 + 错误上限的模式是否带来更强结构感
改动：
增加 Level 概念：Level 1 目标 500 分（错误上限 5）→ Level 2 目标 1500 分（错误上限 4）→ ...
关卡推进保留 ERROR 状态
通关有奖励动画
预计开发：1 轮
成功标准：玩家通关 5 关以上自发说"还想再挑战"
失败判断：关卡目标设定不当，挫败感强

变体 C：颜色种数难度选择

验证问题：3 / 4 / 5 色三档难度的接受度
改动：开场加 UI 选择，CONFIG.COLOR_COUNT 动态切换
预计开发：0.3 轮
成功标准：玩家自然选 4 色作为"标准难度"，5 色作为"挑战"
失败判断：玩家全选 3 色

4. 两个美术方向

方向 A：宝石矿坑（Gem Mine）

风格：暗色石壁背景 + 切割宝石珠子（多面体高光）
适配原因：拖拽 = 挖矿，连消 = 矿脉，主题契合
目标用户感受：宝藏感、闪光感、收集欲
制作成本：低（仅需调色 + 多面体描边）
商业化适配度：高（皮肤包：钻石、红宝石、绿松石等系列）
UI 气质：金色字 + 深褐背景 + 矿灯光晕
风险：与 Bejeweled 这种老牌产品风格撞车

方向 B：星轨追踪（Star Trail）

风格：深空背景 + 发光星球珠子 + 拖拽时星轨划过
适配原因：路径 = 星轨，符合科幻审美
目标用户感受：宇宙感、神秘感、缥缈感
制作成本：中（需要星空背景 shader + 拖尾粒子）
商业化适配度：中（皮肤偏小众）
UI 气质：纤细字体 + 太空感
风险：差异化但用户群体偏窄

5. 一周垂直切片计划

核心目标

让一个不知情玩家在 5 分钟内玩 3 局以上，并主动说"还想试一把"或分享。

必做功能

NEIGHBOR_DIST 三档调优（最高优）
触屏流畅度验证（移动端必做）
难度选择 UI（3/4/5 色）
关卡模式 v1（5 关递进）
本地最高分（localStorage）
结算分享（截图 / 文本复制）

明确不做

联网排行榜
账号系统
付费解锁
关卡编辑器

试玩流程

找 5 个不知情玩家
每人 5 分钟自由玩
记录：局数、MAX CHAIN、是否想再玩、自发评论

3 个亮点

拖拽路径绘制 = 主动控制感：差异于点击触发类
N² 得分曲线 = 上瘾刷新：策略和爽感统一
5 次错误 = 短局节奏：失败成本低，回头率高

验收标准

5 人平均每人 ≥ 3 局
≥ 3 人主动说"再玩一局"
≥ 1 人分享
触屏 60 FPS

6. 下一步执行任务

请基于 E:\project513\prototypes\2026-05-13-03-color-trace\ 执行扩展验证 v2。
本次只验证 [NEIGHBOR_DIST 三档对比 + 触屏流畅度]。
不要加商业化系统。
完成后输出新版原型、对比报告和最终推荐配置。

💡 设计文档 // design

一句话核心

按住拖出同色长链 → 松开消除 → N² 得分 → 5 次拖错结束

设计哲学

1. 拖拽 = 控制感

鼠标按住拖拽是触屏世界最自然的操作。相比"点击触发"，拖拽给玩家"我在主动绘制"的感觉。

2. 视觉收集

路径是实时绘制的发光线，珠子被加入时高亮 + 外发光。玩家看着自己的"成果"沿着指尖延伸 = 强烈正反馈。

3. 风险收益不对称

短链：小分 + 安全（2 颗 = 40 分）
长链：大分 + 风险（拖错就 ERROR）
拖 10+ 颗：1000+ 分但路径上任何一颗异色都会失败

这种「越想要大鱼越容易失手」的张力是核心爽点。

4. 失败有限但有重量

5 次错误 = 一局，每次错误都让 ERROR 红点点亮，给玩家强烈的"剩 X 次机会"心理压力。

5. 没有时间压力

无倒计时 = 玩家可以慢慢思考，匹配「拖拽 = 计划」的认知。失败不是"反应慢"，是"判断错"。这是这个游戏跟 01/02 的核心情绪差异。

数值结构

得分公式

score = floor(10 * N^SCORE_EXPONENT)   // 默认 N²

相邻判定

NEIGHBOR_DIST = 110px：两颗珠中心距离 < 110px 视为相邻。这个值经过：

太小（< 80）：屏幕上常常没有可连珠 → 挫败
太大（> 140）：随便点都能连成长链 → 无策略

颜色分布

4 色等概率。每色平均占 25%。设定为 4 色而非 3 色因为：

3 色太容易：随便拖都同色
5 色太难：很难找到相邻同色簇

视觉

元素	实现
背景	中央高、边缘低的径向渐变 `#1a1132 → #0d0b1f`
珠子	径向渐变 + 高光圆 + 呼吸缩放 + 出生缩放动画
高亮	外发光（径向渐变叠加）+ 白色描边
警示	红色覆盖 + 红色外发光
路径	8px 圆角折线 + 同色 shadowBlur 20
拖拽预览	单珠时虚线连鼠标
错误反馈	ERROR 红色飘字 + 屏幕震动
大消除	居中 `N CHAIN!` 青色字

音频

WebAudio 合成：

拖加珠：三角波 330 + N×30 Hz，0.06s
消除：连续三角波，每颗珠 50ms 错开
错误：锯齿波 140 Hz，0.3s

复玩动力

平方得分曲线：玩家本能想拖更长的链
5 次错误：每局节奏明确（不会"卡在 60 秒里"）
最大链长记忆：MAX CHAIN 是另一个挑战目标，独立于总分
路径选择困难：屏幕上常有多条候选路径，每次决策都有得失分权衡

还可以加

特殊珠子（万能色、炸弹色）
关卡模式（每关目标分数）
时间挑战模式（叠加倒计时）
排行榜
皮肤、特效

🧪 自测报告 // playtest

测试环境

浏览器：Chrome / Edge / Firefox（任一现代浏览器）
启动：双击 build/index.html
测试方式：JS 语法验证 + 行为推演

测试项

1. 启动稳定性

检查	结果
JS 语法（`node --check`）	✅ 通过
HTML 结构	✅ 合法
外部依赖	✅ 无
控制台 error 预期	✅ 无

2. 一局完整流程

预期：

打开 → 介绍页 → 点击/touch 开始
36 颗珠子出现 → ERROR 灯全灰
按住红珠 → 拖到相邻红珠 → 路径变红线
拖到 3-5 颗后松开 → 消除 + 粒子 + 分数飘字
拖错颜色 → 路径变红警示 → 松开 → ERROR +1（红灯点亮）
错 5 次 → Game Over 弹窗
PLAY AGAIN → 重置

关键代码闭环：

状态机 intro/playing/ended 切换正确
init() 重置所有数组、计数、ERROR 灯
触屏支持已加（touchstart/move/end 全套）

3. 路径判定

预期触发链：

onDown → 找珠 → tryAddToPath → 加入起始珠
onMove → 找鼠标位置最近珠 → 距离/颜色判定
同色 + 相邻 + 不在 path 中 → 加入 + highlight
异色 + 相邻 → 设 warned + pathInvalid = true
onUp → commitPath()：
invalid → ERROR +1 + 屏幕震动 + 音效
valid + len≥2 → 消除 + N²×10 得分 + 粒子 + 飘字

4. UI 反馈

反馈	实现	预期
珠子高亮	`highlighted=true` + 外发光	加入路径瞬间发亮
路径线	shadowBlur 20 同色	拖拽中持续绘制
红色警示	`warned=true` + 红光	异色被指针碰到时变红
消除粒子	每珠 12 个	满屏飘洒
分数飘字	每珠 + 总分大字	双层飘字
大链字	5+ 链时居中 80px	青色字 + 缩放
屏幕震动	shake 变量	链越长震越强
ERROR 灯	DOM 红点	累加亮起
音效	WebAudio 合成	加链/消除/错误三种

5. 触屏兼容

touch-action: none CSS 已加
touchstart/move/end 事件已绑定
getPoint(e) 兼容 mouse 和 touch

评分

指标	分数	依据
30 秒可理解	9	拖颜色 = 普世认知
操作反馈	9	高亮 + 路径线 + 警示 + 粒子 + 飘字 + 音效
核心循环	9	看 → 拖 → 消 → 分，闭环极紧
复玩动力	8	N² 得分曲线 + MAX CHAIN 挑战
爽感	8	长链 1000+ 分爆炸感强
策略空间	8	长链 vs 安全的真实抉择
开发完成度	8	单文件 454 行、语法通过、状态机完整
商业扩展潜力	8	关卡模式、特殊珠、皮肤都好扩