惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
有赞技术团队
有赞技术团队
博客园 - 三生石上(FineUI控件)
博客园_首页
博客园 - 【当耐特】
WordPress大学
WordPress大学
月光博客
月光博客
博客园 - 叶小钗
S
SegmentFault 最新的问题
雷峰网
雷峰网
H
Help Net Security
宝玉的分享
宝玉的分享
A
About on SuperTechFans
IT之家
IT之家
J
Java Code Geeks
Hugging Face - Blog
Hugging Face - Blog
D
DataBreaches.Net
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
B
Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Y
Y Combinator Blog

分享创造

分享 KCase 脑图测试用例生成平台(AI 辅助生成测试用例) 标签页囤积症自救:写了个插件 TabRack,主打快速检索、自动分类和 AI 摘要 [file-preview]一个比较全面的在线文件预览组件库-支持 react 和 vue 撸了个 iOS 小应用[极简水印相机],直接免费 做了一个 V2EX Skill 写了个 iOS 打码 App「遮鸭 Maskduck」,纯离线免费 35 岁前端,裁员失业后,我花 1 个月做了个 AI 生图网站 亲身经历猫咪急症,我做了一款猫狗疼痛检测工具,希望能救你家毛孩一命 如何用 AI 做比较酷炫的落地页? 求真!最近 AI 生图的能力强到可怕 开源一个查看 k8s 的菜单栏工具-kubebar Packpour:我做了个专门给 App Store Connect 填多语言元数据的小工具 面对 140 年一遇的超级厄尔尼诺,我做了个全球监测小站 做了一个自动翻译的 Hacker News 客户端 做了一个 AI 头像生成器,可以免费生成 2 次 [送码 50 个] 自己手搓了个高颜值的倒数日 App——拾光机,求 V 友们指点 一个将苹果健康 APP 数据导出的工具,然后把你的数据喂给 AI 分析 我做了一个叫「订阅斩」的 iOS App,专门对付那些悄悄扣钱的订阅 做了个草率的日麻互动漫画,听听反馈 喜欢自己洗车的朋友们,我用 ai 做了一款洗车小程序 -- 洗车志 感谢 V2EX 上各位 NAS🍆 和 Datahoarder 玩家的关注和真实反馈!作为个人开发者,能得到这么多硬核玩家们的讨论,我非常荣幸。 用 AI 开发熊孩子自律的小程序 用 OpenClaw 搭建个人运动助手 今天摸鱼给 NanaAI 也接入了 GPT-Image-2 [Video Companion]一个 chrome 插件,解决大多对视频操作的需求~欢迎使用提 bug AI 时代,做产品简单了,把产品推广出去却变的更难了~ bestskills.dev - Skills 精选和评测站点 免 ROOT 强力卸载安卓广告软件 一个 All In One 的运维工具,支持 SSH、数据库、Redis 管理 [开源] Codeg V0.10:专注于代码生成的多智能体 IDE(cc、codex、gemini、opencode……),新版本重构了工作区,飞一般的体验,支持桌面端、服务器部署
做了一个在线颜色匹配小游戏 Toon Tone,想听听大家对玩法和 ...
digiplanp · 2026-05-15 · via 分享创造

标题:

做了一个在线颜色匹配小游戏 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/

感谢大家~