专题：用 AI 做像素画

🎨 你知道吗？《我的世界》里的方块、早期游戏里的角色，都是像素画！今天我们来做一个自己的像素画编辑器。

⏱️ 预计用时：45 分钟 | 📋 前置要求：学完第1-3课

你将做出什么？

一个网页版的像素画编辑器！功能包括：

• 在网格上点击画画，像涂色本一样简单
• 选择各种颜色，还有橡皮擦
• 一键生成随机像素角色
• 导出你的作品为图片文件

---

什么是像素画？

像素（Pixel） 是屏幕上最小的显示单位——一个个微小的彩色方块。当这些方块足够多、足够小的时候，你看到的就是一张清晰的照片。但如果故意把方块放大……就变成了像素画的风格！

年代	代表作品	为什么用像素画
1980s	超级马里奥、吃豆人	当时的电脑只能显示有限的像素
2010s	星露谷物语、泰拉瑞亚	故意用像素风格，营造复古美感
现在	独立游戏、NFT 头像	简约好看，制作门槛低

像素画的本质其实很简单：一个网格，每个格子填一个颜色。这和编程的二维数组完全对应！

小贴士

像素画之所以受欢迎，是因为它证明了"限制激发创造力"。在有限的格子里，你要想办法用最少的像素表达出角色的特征——这和写代码一样，用最简洁的方式实现功能。

---

动手时间：做一个像素画编辑器！

第一步：创建项目

mkdir pixel-art
cd pixel-art
claude

第二步：创建基础编辑器

魔法咒语

帮我做一个网页版像素画编辑器，要求：
1. 文件名叫 pixel-art.html，单个 HTML 文件包含所有代码
2. 画布：
   - 16x16 的网格（共 256 个格子）
   - 每个格子点击可以填色
   - 支持拖动绘画（按住鼠标移动可以连续画）
   - 默认背景是浅灰色网格线
3. 工具栏：
   - 调色板：至少 16 个常用颜色（包括黑、白、红、蓝等）
   - 自定义颜色选择器（input type=color）
   - 橡皮擦按钮（擦除为透明/白色）
   - 清空画布按钮
4. 界面设计：
   - 画布居中显示，工具栏在左侧或上方
   - 当前选中的颜色要有明显的高亮标记
   - 整体风格简洁可爱，适合学生使用
   - 深色背景让画布更突出
5. 用 CSS Grid 实现网格布局

保存后用浏览器打开：

start pixel-art.html

试试在网格上画画吧！

第三步：理解核心原理

像素画编辑器的核心其实很简单：

HTML —— 创建网格

<!-- 每个格子就是一个小 div -->
<div class="pixel" data-row="0" data-col="0"></div>
<div class="pixel" data-row="0" data-col="1"></div>
<!-- ... 一共 16x16 = 256 个 -->

CSS Grid —— 排列网格

.canvas {
    display: grid;
    grid-template-columns: repeat(16, 24px);
    grid-template-rows: repeat(16, 24px);
    gap: 1px;
}

repeat(16, 24px) 的意思是"重复 16 列，每列 24 像素宽"。这和像素画的网格完美对应！

JavaScript —— 响应点击

// 点击格子时，把它的背景色改成当前选中的颜色
pixel.addEventListener('click', function() {
    this.style.backgroundColor = currentColor;
});

想了解更多？

CSS Grid 是网页布局的利器，不只能做像素画。网格布局在现代网页中无处不在——图片墙、商品列表、仪表盘……都是用 Grid 实现的。你做像素画编辑器时学到的 Grid 知识，以后做任何网页都用得上！

第四步：加上"随机生成"功能

这是最有趣的部分——让程序随机生成像素角色！

魔法咒语

给像素画编辑器添加"随机生成像素角色"功能：
1. 添加一个"随机角色"按钮
2. 点击后在画布上生成一个随机的像素小人/小怪物：
   - 角色只占画布中间的 8x8 到 12x12 区域
   - 左右对称（只需要随机生成左半边，右半边镜像复制）
   - 随机选一个主色调（从几个好看的颜色中随机选）
   - 有基本的轮廓（外圈深色，内部浅色填充）
   - 眼睛的位置相对固定（让角色看起来有"脸"）
3. 每次点击生成不同的角色
4. 添加一个"随机配色"按钮，保持形状不变但换颜色

小贴士

"左右对称 + 随机"是像素角色生成的经典算法！很多独立游戏的 NPC 和怪物都是这样自动生成的。对称让角色看起来"正常"，随机让每个角色都独一无二。

第五步：添加导出功能

魔法咒语

给像素画编辑器添加导出功能：
1. "导出 PNG" 按钮：
   - 用 Canvas API 将网格绘制到一个隐藏的 canvas 元素上
   - 每个像素格放大为 16x16 或 32x32 像素（导出的图片更清晰）
   - 导出为 PNG 图片并自动下载
2. "导出 GIF"按钮（可选）：
   - 如果太复杂就跳过，提供放大后的 PNG 即可
3. 在导出图片的底部加一行小字"Made with Pixel Art Editor"
4. 添加画布大小选择：8x8、16x16、32x32 三种规格

第六步：让编辑器更专业

魔法咒语

继续完善像素画编辑器：
1. 工具增强：
   - 油漆桶工具（点击一个区域，把相连的同色格子都填上新颜色）
   - 取色器工具（点击格子吸取它的颜色）
   - 撤销/重做功能（Ctrl+Z / Ctrl+Y）
2. 界面优化：
   - 在画布旁边显示一个缩小的预览窗口（显示实际尺寸的效果）
   - 当前工具图标显示在光标旁边
   - 工具栏用图标按钮，鼠标悬停显示工具名
3. 保存和加载：
   - 保存画布数据到 localStorage，下次打开还在
   - "新建"按钮（清空并确认）

---

进阶挑战

1. 像素动画：做一个简单的帧动画——画3-4帧，然后自动循环播放，看到你的角色"动起来"
2. 像素字体：用像素画画出你名字的每个字母，做成像素风格的签名
3. 游戏素材：为第5课的小游戏画一套像素风格的图标（爱心、星星、炸弹等）
4. 画廊功能：添加一个"画廊"面板，可以保存多幅作品，随时切换编辑

1. CSS Grid 中 repeat(16, 24px) 表示什么？

2. 随机生成像素角色时，为什么要做左右对称？

3. 像素画编辑器导出图片时，为什么要把每个格子放大？

参考示例

完整的像素画编辑器示例：pixel-art.html

下载后用浏览器打开即可使用。