1. Demo 简介
是什么：像素涂鸦画册是一个基于浏览器的 HTML5 网页应用，用户上传任意照片后，系统自动将其转化为 32 色像素填色模板，用户按数字标记逐格填色，最终完成一幅属于自己的像素画作。
面向谁：
喜欢绘画/手工但时间碎片化的上班族
想给孩子找创意亲子活动的家长
喜欢像素艺术风格的年轻群体
需要减压放松的泛娱乐用户
主要功能：
**功能一：**照片上传 & 32色智能量化 用户点击或拖拽上传 JPG/PNG/WEBP 照片，系统通过 K-Means++ 算法自动分析图片色彩，将其压缩为 32 种核心颜色，并生成带数字标记的填色模板。整个过程在浏览器本地完成，无需上传服务器，保护隐私。
image1152×621 33.4 KB
**功能二：**数字填色 & 正确颜色校验 进入填色页面后，未填色的格子显示为黑白灰度并标注数字编号。用户从底部调色板选择对应编号的颜色，只能填入与该格子匹配的正确颜色（防止"乱涂"）。支持连续拖动填色，操作流畅。
image1180×629 88.2 KB
功能三：撤销 / 橡皮 / 缩放 / 自动保存
撤销：支持最多 60 步撤销（Ctrl+Z 快捷键）
橡皮擦：可擦除已填色格子，恢复黑白状态
缩放：支持 50%~800% 画布缩放，鼠标滚轮或按钮控制
自动保存：退出填色页时自动将进度存入 localStorage，下次可继续
2. Demo 创作思路
灵感来源：自己平时通勤喜欢玩手机游戏解压，但市面上的填色 图案都是预设的图片，无法自定义。
想解决的问题：手机填色 App 图案千篇一律，缺乏个性化；并且没有工具能将个人照片自动转化为可填色的像素模板。
为什么做这个方向：生活娱乐赛道的核心是让人们在碎片时间里获得愉悦感。填色本身就是一种被心理学验证过的减压方式（类似冥想的心流状态）。而"用自己的照片"这个点，把普通的填色游戏变成了有情感价值的创作行为——填完的不是一张陌生人的卡通图，而是自己的宠物、旅行风景、家人合影。这种个人连接感是市面上产品没有的。
3. Demo 体验地址（三选一）
交互式 HTML 文件（已打包为 Zip）： coloring-game.zip
下载后解压，双击 coloring-game.html 即可在浏览器中打开体验。支持手机、平板、电脑多端访问，无需安装，无需联网（除首次加载 Google Fonts 外）。
coloring-game.zip (9.7 KB)
4. TRAE 实践过程
整个项目完全使用 TRAE（Trae）AI 编程助手开发完成，从 0 到可运行的完整产品，历时约 3 小时，经历了 10+ 轮迭代。以下是关键开发步骤：
Step 1：需求拆解 & 技术方案确定
我向 TRAE 提出了完整需求：做一个照片转像素填色的网页游戏，包含上传、32色量化、数字填色、撤销、保存等功能。TRAE 首先帮我拆解了技术难点：
图片颜色量化算法选择（最终采用 K-Means++）
画布渲染性能优化（增量重绘）
移动端触摸交互适配
localStorage 数据持久化
image514×590 16 KB
Step 2：核心算法实现 — 32色 K-Means++ 量化
这是整个项目的技术核心。TRAE 帮我实现了 K-Means++ 聚类算法，将用户上传的照片颜色空间压缩到 32 个代表性颜色。关键代码包括：
K-Means++ 初始化中心点（避免随机初始化导致的局部最优）
迭代聚类直到收敛
空簇检测与重映射
全像素颜色映射（将每个像素分配到最近的调色板颜色）
TRAE Session ID： 1722295471050448:2566613e65505332bc01f87a09a3267b_6a324faf226a936aa4d50f57.6a32512d226a936aa4d510f9.6a32512d226a936aa4d510f7:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/17 15:47:57)
image505×527 20 KB
Step 3：填色页面 & 交互逻辑
TRAE 帮我构建了完整的填色页面架构：
Canvas 像素级渲染（每个格子根据填色状态显示彩色或黑白+数字）
鼠标/触摸双模式事件处理（mousedown/touchstart 统一抽象）
正确颜色校验（只能填入与格子 colorMap 编号匹配的颜色）
撤销栈实现（深拷贝 filledMap 数组，最多 60 步）
橡皮擦功能（恢复黑白状态）
TRAE Session ID： 1722295471050448:43efdddaa52bd70380dbaf845a1834e4_6a324faf226a936aa4d50f57.6a325a5b226a936aa4d51323.6a325a5b226a936aa4d51321:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/17 16:27:08)
image501×589 22.8 KB
Step 4：UI 设计 & 视觉优化
最初的版本是深色主题，TRAE 帮我进行了三轮视觉迭代：
第一版：深色科技风（#0f1117 背景）
第二版：改为温暖手账风（奶油白 #faf6f1 + 赤陶橘 #e8734a）
第三版：增加响应式布局（手机/平板/桌面三端自适应）、画廊卡片悬停效果、上传区域拖拽交互
字体选择了站酷庆科黄油体（ZCOOL QingKe HuangYou）作为标题，营造涂鸦感。
TRAE Session ID： 1722295471050448:7d89ffdd485a0678d81ee4ebd25809ed_6a324faf226a936aa4d50f57.6a333a5849a500aad870a208.6a333a5849a500aad870a206:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/18 08:22:48)
image508×585 26.5 KB
Step 5：功能迭代 & Bug 修复
在测试过程中发现并修复了多个问题，TRAE 都快速响应：
删除按钮失效：移动端 pointerdown 的 preventDefault 会吞掉 click 事件，改为 stopPropagation 后解决
缩放上限不足：从 4x 提升到 8x，适配高分辨率屏幕
画布区域太小：将图片处理分辨率从 80px 提升到 128px，保留更多原图轮廓
画廊缩略图不直观：改为黑白+彩色效果，一眼看出填色进度
TRAE Session ID： 1722295471050448:2cfb3b890340b3cd765b1e4f30471f40_6a324faf226a936aa4d50f57.6a3260a5226a936aa4d51754.6a3260a5226a936aa4d51752:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/17 16:53:57)
image510×351 16.4 KB
Step 6：打包 & 交付
coloring-game.zip (9.7 KB)
最终产物是一个单文件 HTML（约 1400 行），包含完整的 CSS 样式和 JavaScript 逻辑，无需任何后端服务，无需构建工具，双击即可运行。
5. 对应的报名审核通过的帖子链接
【生活娱乐】支持自定义上传图片的像素填色游戏 【大赛报名专区】
1. 创意名称 + 创意介绍
像素涂鸦画册
解决痛点：市面填色游戏缺乏将个人照片转化为填色作品的能力
灵感来源：长辈喜欢数字油画但材料麻烦，年轻人喜欢像素风但缺乏工具
产品形态：基于浏览器的 HTML5 网页应用，无需下载，多端适配
2. 目标用户及痛点
核心用户：上班族创作者、亲子家庭、像素艺术爱好者
使用场景：通勤消磨、睡前放松、亲子互动、朋友分享
四大痛点：传统填色书图案单一、数字…