做了一个在线颜色匹配小游戏 Toon Tone，想听听大家对玩法和 UI 的建议

[digiplanp]

标题：

做了一个在线颜色匹配小游戏 Toon Tone ，想听听大家对玩法和 UI 的建议

正文：

最近在做一个很轻量的网页小游戏，名字暂时叫 Toon Tone。

最开始的想法是做一个“根据卡通角色某个部位颜色进行匹配”的游戏，比如记住角色帽子、衣服、眼睛的颜色，然后用 HSB 滑块复原。但实际开发时发现角色方案比想象中复杂很多：

• 如果用 SVG 直接画角色，AI / 代码生成出来的角色很容易很丑；
• 如果用 PNG 分层做角色，需要 base 、mask 、shading 几层严格对齐；
• 可变色部位如果对不齐，Canvas 叠加效果会很奇怪；
• 角色素材制作成本远高于游戏逻辑本身。

所以第一版我决定先把玩法简化成色卡匹配游戏：

玩家看到一个目标颜色，然后通过：

• Hue
• Saturation
• Brightness

三个滑块去尽量匹配目标色。每局 10 轮，每轮根据颜色接近程度给分。

目前第一版的目标是：

1. 先验证“调色匹配”这个玩法本身是否有趣；
2. 把核心逻辑、计分、移动端交互做好；
3. 如果用户反馈不错，再考虑加每日挑战、分享结果、排行榜，甚至重新尝试角色版本。

技术上暂时没做得很复杂：

• 纯前端实现；
• 游戏直接放在首页 hero 区，不单独做 /play 页面；
• 用 HSB / RGB 转换做实时颜色预览；
• 用 RGB 距离计算分数；
• 桌面端左右布局，移动端上下布局；
• 后续可能再换成更接近人眼感知的色差算法。

我自己感觉这个方向比一开始的角色版更容易落地，也更适合作为 MVP 。

目前想听听大家的建议：

1. 这种颜色匹配小游戏，你会觉得有一点可玩性吗？
2. 目标色一直显示比较好，还是显示几秒后隐藏做成记忆挑战更好？
3. 10 轮一局会不会太长？
4. 计分方式需要更专业吗，比如用 CIEDE2000 ，而不是 RGB 距离？
5. 这种小游戏更适合做成 Daily Challenge ，还是无限练习模式？

如果有做过类似小游戏、颜色工具、Canvas 交互或者前端小游戏的朋友，也欢迎给点建议。

网站地址： https://toontone.work/

感谢大家～