拒绝卡顿！只用2个角色，在Scratch里手搓一个神仙级“拼豆”游戏

各位大盆友小盆友们好呀！

不知道你们家里有没有那种让人又爱又恨的玩具——拼豆。拼的时候岁月静好，一旦不小心打翻……那画面太美，血压直接飙升到200。

为了拯救血压，也为了拯救我不慎掉落在沙发缝里的那些小豆子，今天就来玩点酷炫的：在Scratch里，自己做一个“数字版拼豆游戏”！

网上很多拼豆或像素画游戏，动不动就克隆几百个方块，稍微画大一点，电脑风扇就转得像要起飞。今天主打一个**“优雅”**——全篇代码只用了2个角色，纯靠“画笔”模块手搓！ 不卡顿，丝滑到难以置信。

废话不多说，直接开整！

核心思路：抛弃克隆体，拥抱“大数据库”

既然不用克隆体，我们拿什么记住玩家在哪个格子上涂了什么颜色？

答案是：列表（List）！

看看上面两张图中的变量。我们建立了两套列表：

1. 画布状态组：color（颜色）、brightness（亮度）、saturation（饱和度）、is_filled（是否已填充）。这四个列表就像数据库，记录着画布上每一个格子的状态。
2. 调色板数据组：tool_color、tool_brightness、tool_saturation。用来存我们提供的画笔颜色。

极客小课堂：把二维的画布拍扁成一维的列表，是游戏开发中非常经典的降维操作。只要用简单的数学公式，就能随时查出第X行第Y列是什么颜色。

拆解步骤一：给画布“打地基”

游戏开始，第一件事是干嘛？当然是铺图纸！

在上图的主程序里，我们先定义了画布的边界：

• border_min_x = -200
• border_max_x = 40
• border_min_y = -120
• border_max_y = 120

然后是一个嵌套的“重复执行直到”循环。这段代码在干嘛呢？它以10为步长，一行一行、一列一列地扫描画布区域，给 color、is_filled 等列表塞入初始值“0”。相当于初始化了一个干干净净的“透明图层”。

接着是一长串“加入...到工具列表”代码……别害怕，那只是一个苦力活。为了给玩家提供丰富的颜色，目前手动把各种颜色的色相、饱和度、亮度塞进了列表里。

拆解步骤二：画笔化身“打印机”

既然没用克隆体，那画面是怎么出来的？靠**“瞬时刷新”**。

在上一步的主循环里，每一帧都在疯狂重复三件事：绘制格点 -> 绘制工具 -> 处理鼠标位置。

我们再来看上图的**定义 绘制格点**：

1. 上来先“全部擦除”（简单粗暴）。
2. 然后遍历整张画布，用 color_index 计算出当前应该画在屏幕的哪个X/Y坐标上。
3. 如果 is_filled 列表里记录这个格子是“1”（有豆子），就把画笔加粗到10，读出对应的颜色数据，落笔点一下。
4. 如果是“0”（空位），就换成细细的灰线，画个灰色小圆点。

再看**定义 绘制工具**：

这就是在画右侧的调色盘啦。通过判断 tool_index 的大小（<9 还是 <17），聪明地把颜色按列排好。每隔33个像素点一下，完美的色卡就诞生了。

拆解步骤三：魔法交互——指哪打哪

这是整个游戏最核心、含金量最高的一段代码：根据鼠标位置。

玩家鼠标在屏幕上乱晃，程序怎么知道他点的是画布还是调色盘？

1. 判定画布区：首先判断鼠标的X和Y是不是在 border_min 和 border_max 的范围内。
2. 悬停特效：如果是，先在鼠标位置用“悬浮色”落笔画一个点，给玩家一个“我瞄准这里了”的视觉反馈。
3. 精准打击（点下鼠标）：如果按下了鼠标（传入的 stay 变量为真），前方高能数学公式来了！ 它用 (Y坐标差值) / 10 * 25 + (X坐标差值) / 10 + 1 算出了当前鼠标对应的列表索引号！为什么乘25？因为我们X轴从-200到40，步长10，刚好每行有25个格子！这就是将二维坐标转化为一维列表索引的绝招。 算准位置后，立刻把当前选中的颜色、亮度、饱和度替换掉列表里的旧数据，同时把 is_filled 设为1。一颗豆子就这么“种”下去了！
4. 吸色大法（选颜色）：如果鼠标不在画布区，而在调色盘区，代码就会通过另一套除法+求余数的数学魔法，算出玩家点中了第几个色块，然后把对应的颜色提取出来存入 current_color 等变量中。

拆解步骤四：一颗后悔药

辛辛苦苦拼了一半，想推倒重来怎么办？

看上图那个孤零零的“重做”按钮角色。当角色被点击时，触发 重做 自定义积木。

这里的逻辑极其舒适：不需要去一个个消除屏幕上的图案，只需要把 is_filled 列表里的所有项目全部替换成 0 就可以了！

下一帧画面刷新时，画笔发现全是0，自然就画出了一张全空的网格纸。这就是数据驱动渲染的魅力！

总结一下

看完了是不是觉得脑洞大开？这款游戏看似简单，却蕴含了非常专业的编程思想：

• 数据与视图分离：数据全在列表里，画笔只负责无脑把列表里的数据画出来。
• 降维打击：用数学公式实现坐标系统和一维数组的完美转换。
• 极致的性能优化：用“擦除+重绘”代替海量克隆体，再旧的电脑也能流畅运行。

只要搞懂了这套逻辑，别说拼豆游戏了，在Scratch里做个《我的世界》2D版、甚至扫雷、五子棋，那都是手到擒来的事儿！

赶紧打开你的Scratch，照着逻辑自己复现一下吧！如果做出来了，别忘了在评论区交作业哦~

（本文干货较多，建议先收藏再看！点个“爱心，你的代码永远没有BUG~）