想做这种「点一下,月亮就碎成水波」的像素池塘?把可复用的做法整理出来了。👇
可以把这段需求发给 Claude,分步做:
「用原生网页画布做一个能互动的像素夜池,输出单个网页文件,不依赖外部图片或库。
① 内部分辨率480×270,关闭缩放平滑。先画月亮、红桥和水下锦鲤;水面在第92行。
② 水波用半分辨率网格和前后两帧缓冲。新波高=(上+下+左+右)÷2-上一帧波高,再乘0.993衰减;固定每秒更新60次。点击注入小范围扰动,拖动连续注入。
③ 把岸上景物沿水面上下翻转,再用相邻波高的差,偏移倒影的取样坐标,让月亮和桥真的随涟漪变形。
④ 最后加鱼群:缓慢转向鼠标附近,点击落下鱼食,靠近后吃掉。支持触摸操作。」
调试时先验收水面,再加鱼。两个常见问题:
• 水面只有几个圆圈:补一句「用波面坡度扭曲倒影,不要只叠加圆环」。
• 画面越放大越糊:检查画布自身的像素尺寸,并关闭绘制时的缩放平滑和页面显示时的插值。
生成后让它输出完整代码,保存为 index.html,用浏览器打开。上面是按这版实现整理的起步模板,可以先做出水波,再逐项加细节。
#像素艺术 #创意编程
I built this interactive pixel planet with Claude.
One moon, too close—and it becomes a ring.
用 Claude 做了个互动像素星球。
卫星放得太近,就被撕成了星环。
#pixelart #creativecoding
PC demo on TapTap: taptap.cn/app/972720
开发中的测试版,欢迎试玩和反馈。
Real gameplay from a prepared test save; reframed and edited. Game music & SFX.




