在这个快节奏的时代，我们的大脑每天都在处理过载的信息。今天，我不想做复杂的工具，只想做一款纯粹的、解压的、能让大脑放空的 “赛博发呆神器”。

于是，《Neon Flood (霓虹泛滥)》 诞生了。我也叫他“油漆桶”。

没有广告，没有复杂的物理碰撞，只有光影、色彩，和一段美妙的数学逻辑。

🕹️ 这是一个什么游戏？

规则简单到令人发指，但又让人欲罢不能：

1、你的领地是左上角的那个方块。

2、点击底部的颜色按钮，将你的领地变成该颜色。

3、同化：如果你的新颜色和邻居一样，邻居就会归顺你。

4、挑战：在 25步 之内，把整个屏幕变成同一种颜色。

这听起来像是小时候玩的“填色游戏”，但我为它注入了 “赛博朋克” 的灵魂：

视觉： 磨砂玻璃质感的 UI，配合呼吸灯般的霓虹光效。触感： 每一次点击，色彩不会瞬间生硬地切换，而是像水波一样荡漾开去（Ripple Effect）。听觉： 你听到的每一个音效，都不是录制好的 MP3，而是浏览器通过代码实时合成的声波。

🧠 硬核科普：极简游戏背后的“大智慧”

作为一个懂技术的城市规划师，我在做这个游戏时，其实运用了两个非常经典的计算机与数学概念。玩游戏的同时，顺便涨点知识：

1. 怎么做到“一传十，十传百”的？—— 漫水填充算法 (Flood Fill Algorithm)

当你点击颜色时，计算机会疯狂地问每一个格子：“嘿，你跟我是同一个颜色吗？如果是，你就跟我变！”

这就是经典的 Flood Fill 算法。它是图论中处理连通区域的经典算法。 你在 Photoshop 里用的 “油漆桶”工具，其核心原理就是这个！在城市规划中，我们模拟 “传染病扩散” 或者 “服务区覆盖” 时，用的也是类似的逻辑。

2. 为什么颜色会像水波一样荡漾？—— 曼哈顿距离 (Manhattan Distance)

大家注意看，当你点击按钮时，颜色并不是瞬间全变的，而是从左上角向右下角依次亮起。

这里我用了一个小小的数学魔法。程序会计算每个格子距离起点的 “曼哈顿距离”（即：横向步数 + 纵向步数）。

离起点越远的格子，变色的延迟就越高。

Delay = (x + y) * 30ms

正是这行简单的代码，让冰冷的像素块拥有了液体的流动感，产生了令人舒适的 “心流体验”。

3. 声音是从哪来的？—— Web Audio API

为了追求极致的轻量化（游戏体积不到 10KB），我没有使用任何音频文件。 游戏里的“水滴声”、“胜利欢呼声”，全部是由 正弦波、三角波 通过代码实时合成的。这就像是用数学公式在你的耳边演奏。

👨‍💻 开发者说

做第 34 个应用时，我一直在想，什么是好的交互？

好的交互不一定需要 3A 级的画质，有时候，一个顺滑的过渡动画，一个及时的音效反馈，就能给人带来巨大的满足感。

《Neon Flood》 是我对“极简美学”的一次致敬。希望这抹霓虹色，能治愈你一天的疲惫。

👇 点击文末阅读原文，立即体验

我已经将这个工具部署到了我的「365工具箱」目录中，大家可以进入网站查看。

挑战一下： 据说 90% 的人无法在 22步 以内通关。如果你成功了，截图发到后台，我敬你是条汉子！