展示HN：用原生JavaScript制作的炼油厂模拟器，旨在向我的孩子们解释工作原理
嗨，HN，
我是一名化学工程师，目前在德克萨斯州的一家炼油厂负责物流管理。每当我试图向行业外的人（包括我的孩子）解释下游操作时，通常会看到他们一脸茫然。因此，我想制作一个能够可视化工厂概念和化学原理的东西，而不至于完全简化科学内容，于是我制作了这个五分钟的浏览器游戏。
我并不是专业的软件开发人员，所以我在编写代码时非常依赖大型语言模型（如Claude、Copilot、Gemini）。最初的简单构思变成了一个9000行的单页面应用，使用了原生的HTML、CSS和JavaScript。我还使用了Matter.js来实现2D物理小游戏。
作为一个非开发者，构建这个项目的一些技术要点包括：
* 管理LLM工作流程：一旦script.js文件变得庞大，让模型输出完整的文件重写就变得非常糟糕（截断、幻觉、不可见的弯引号替换导致JS出错）。我开始强制它们像补丁文件一样工作，严格输出“查找这个确切的代码块”和“替换为这个确切的代码块”。这是唯一能够在不破坏现有逻辑的情况下保持改进的方法。
* 将物理映射到CSS：我希望小游戏能够在圆形CSS容器内可视化显示（border-radius: 50%）。Matter.js并不关心你的CSS。要让刚体物理遵循不同屏幕尺寸下动态响应的DOM边界，需要在每一帧上运行一个椭圆边界方程（dx * dx） / (rx * rx) + (dy * dy) / (ry * ry) > 1。也许这对于处理手机和PC之间的调整来说有些过于复杂。
* 移动浏览器事件：强制iOS Safari忽略其默认行为（双击缩放、滑动滚动），同时仍允许用户点击和拖动Matter.js对象，需要大量自定义事件监听器管理和CSS（touch-action: manipulation; user-select: none;）。我还发现这些操作很容易导致鼠标滚动失效，这让PC用户感到非常沮丧。我希望我能找到一个好的折中方案。
* 状态管理：由于我没有使用React或任何框架，只能依赖一个全局状态对象。因为游戏在不同阶段/小游戏之间跳转，我遇到了大量的内存泄漏，原因是旧的setInterval循环和Matter.js物体的堆积。我不得不构建严格的清理函数，以便在每次地图转换时清理状态。
这个游戏涵盖了静电脱盐、分馏、加氢处理、催化裂化和汽油混合（达到特定的辛烷值和RVP规格）。
它完全免费，客户端运行，没有广告或注册。我非常欢迎对游戏机制的任何反馈，或者如果你能找到破坏物理引擎的方法，请告诉我。我也乐意回答任何关于化学工程方面的问题。
出于某种原因，网址框没有被识别，也许有人可以帮我解决这个问题。www.fuelingcuriosity.com/game
查看原文
Hi HN,
I’m a chemical engineer and I manage logistics at a refinery down in Texas. Whenever I try to explain downstream operations to people outside the industry (including my kids), I usually get blank stares. I wanted to build something that visualizes the concepts and chemistry of a plant without completely dumbing down the science, so I put together this 5-minute browser game.<p>I am not a software developer by trade, so I relied heavily on LLMs (Claude, Copilot, Gemini) to help write the code. What started as a simple concept turned into a 9,000-line single-page app built with vanilla HTML, CSS, and JavaScript. I used Matter.js for the 2D physics minigames.<p>A few technical takeaways from building this as a non-dev:
* Managing the LLM workflow: Once the script.js file got large, letting the models output full file rewrites was a disaster (truncations, hallucinations, invisible curly-quote replacements that broke the JS). I started forcing them to act like patch files, strictly outputting "Find this exact block" and "Replace with this exact block." This was the only way to maintain improvements without breaking existing logic.<p>* Mapping physics to CSS: I wanted the minigames to visually sit inside circular CSS containers (border-radius: 50%). Matter.js doesn't natively care about your CSS. Getting the rigid body physics to respect a dynamic, responsive DOM boundary across different screen sizes required running an elliptical boundary equation (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry) > 1 on every single frame. Maybe this was overkill to try to handle the resizing between phones and PCs.<p>* Mobile browser events: Forcing iOS Safari to ignore its default behaviors (double-tap zoom, swipe-to-scroll) while still allowing the user to tap and drag Matter.js objects required a ridiculous amount of custom event listener management and CSS (touch-action: manipulation; user-select: none;). I also learned that these actions very easily kill the mouse scroll making it very frustrating for PC users. I am hoping I hit a good middle ground.<p>* State management: Since I didn't use React or any frameworks, I had to rely on a global state object. Because the game jumps between different phases/minigames, I ran into massive memory leaks from old setInterval loops and Matter.js bodies stacking up. I had to build strict teardown functions to wipe the slate clean on every map transition.<p>The game walks through electrostatic desalting, fractional distillation, hydrotreating, catalytic cracking, and gasoline blending (hitting specific Octane and RVP specs).<p>It’s completely free, runs client-side, and has zero ads or sign-ups. I'd appreciate any feedback on the mechanics, or let me know if you manage to break the physics engine. Happy to answer any questions about the chemical engineering side of things as well.<p>For some reason the URL box is not getting recognized, maybe someone can help me feel less dumb there too. www.fuelingcuriosity.com/game