ChatGPT重写画板

Trinket Close

正在迁移代码 直接Embed

改动的是，本来直接写在Div里的数字，可以做填色游戏

填色时把字覆盖，使用：

function setPixelColor(pixel)

{

pixel.style.backgroundColor = penColor;

pixel.innerHTML = '';

}

ChatGPT生成的Div是这样写的，用的循环语句，好处是代码简洁

for (let y = 0; y < 20; y++) { for (let x = 0; x < 20; x++) { let pixel = document.createElement("div");……

我从前图个方便，就是复制黏贴Div，再相应填入数字

AI新的设计

代码

```html

🎨 20 × 32 Pixel Art

🎨 颜料盘

当前颜色：

🧽 橡皮擦 🗑 清空

300 × 480 px
20 × 32 = 640 Pixels

```

---

思路：

左侧：20 × 32 = 640 格

1. 画板：300 × 480 px

2. 每格：15 × 15 px

3. 预定：一个“颜料盘”

4. 系统预设 20 种颜色

5. 点击颜料盘选择颜色

6. 点击/拖动像素格绘画

7. 橡皮擦、清空

8. 仍然使用最基础的 HTML <div> + onclick / 鼠标事件

测试：Doki和骨头🦴