像素画代码机
点格子画你的小图 → 一键得到真实可读的 2D 数组代码 → 还能把代码再回放成图。
广告位（自然位置）
画板
提示：单击填色，单击已涂格子可擦除；按住鼠标拖动可连续涂。
实时代码
回放模式：把代码"画"回来
把上面的代码或任何 "字符串" 粘进下方，反向生成图像，看程序如何一笔一笔画出来。
广告位（自然位置）
它能解决什么问题
孩子在屏幕上涂涂画画只能看到图，看不到"图是怎么用代码描述的"。这个工具让"画"和"代码"双向流通——涂色得到代码、贴代码得到图，第一次直观感受2D 数组、坐标、循环绘制。
谁适合用
8 岁以上、对"代码是怎么工作的"好奇的孩子；以及想给"编程启蒙"找低门槛切入点的家长。无需任何前置知识，会涂色就行。
怎么解读结果 / 局限
代码里的"#ef4444"就是十六进制颜色；二维数组里第一个 [0][0] 是左上角，[n-1][m-1] 是右下角。局限：浏览器里的"复制"只是字符串，不能直接运行；大尺寸（>20×20）回放可能卡顿。
常见问题
Q：我画的图会不会上传到网上？
不会。所有绘制都只发生在你的浏览器里，关掉页面就清空，没有后端、没有云端。
Q：这是真正的"代码"吗？
是。输出的就是 JavaScript / Python / Lua 真实可用的二维数组语法，复制到对应编辑器能直接 console.log 或 print 出来。
Q：动画回放是怎么"画"的？
按格子顺序，每 30 毫秒填一个格子，相当于双重 for 循环的视觉版：for y { for x { 画(x,y) } }。
Q：怎么引导孩子玩？
先一起画个 5×5 小爱心，看代码出现；再把代码粘到"回放模式"看它真的画出来；最后让孩子猜"这段代码会画什么"。
广告位（自然位置）