作者：匠大，连续创业者，独立开发者，OPC实践者，2026 年发起 365天 vibe coding 挑战。工具合集：https://365-tools.cn在这个快节奏的时代，我们的大脑每天都在处理过载的信息。今天，我不想做复杂的工具，只想做一款纯粹的、解压的、能让大脑放空的 “赛博发呆神器”。
于是，《Neon Flood (霓虹泛滥)》 诞生了。我也叫他“油漆桶”。
没有广告，没有复杂的物理碰撞，只有光影、色彩，和一段美妙的数学逻辑。
🕹️ 这是一个什么游戏？
规则简单到令人发指，但又让人欲罢不能：
这听起来像是小时候玩的“填色游戏”，但我为它注入了 “赛博朋克” 的灵魂：
视觉： 磨砂玻璃质感的 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工具箱」目录中，大家可以进入网站查看，网站网址为：365-tools.cn。点击文末阅读原文，也可以体验。
挑战一下： 据说 90% 的人无法在 22步 以内通关。如果你成功了，截图发到后台，我敬你是条汉子！
Day 034 打卡成功！
保持好奇，我们明天见。👋
