每次有人都会说你无法在 React 中构建一个真正的,高端游戏,因为垃圾回收和不断的状态重新渲染会只会让浏览器变慢我想看看我是否能够绕过这个限制来为我的轨道防御游戏,Divine Orbit。
我遇到的最大困难是性能。如果你把数千个子弹、船舶和陨石块放在标准的useState钩子中,游戏会以大约 12 FPS 的速度运行所以我必须完全分离游戏循环。
我开始使用一个 LLM 帮助我解决复杂的优化算法。 我手工编码了一个巨大的 liveStateRef,它完全位于 React 渲染周期之外,在一个 requestAnimationFrame 循环中发生变化。 React 甚至不知道物理系统在发生什么。然后我们限制了 UI 的实际更新(如损伤数字和生命条)到准确的 10Hz 以防止 DOM 乱七八糟。
最酷的部分是让 AI 为雷达生成空间分区网格。使用 Math.hypot 对每一帧的几百个实体进行碰撞计算会导致 CPU 峰值。我要求 AI 帮助我使用位移右移 (cx << 16) | (cy & 0xffff) 将坐标储存在一个不创建任何新数组的 O(1) 网格中。
真的很吓人地试图让 AI 停止在每个帧中 hallucinate useState 钩子,但是当我把它限制在纯粹的数学操作和严格的零分配约束中时,物理引擎变成了一种救命法宝。
总之,我只想看看这里有没有其他人在使用 AI 进行原始性能优化和算法数学,而不是仅仅用于生成资源或样板代码。感觉这是一个低估的使用案例。
如果你想看到 React 引擎在无序的混乱中生存而不卡顿,游戏就是 Divine Orbit:https://store.steampowered.com/app/4421760/Divine_Orbit/
免费浏览器 Demo:https://vibeaxis.com/divine-orbit-free-demo-play-in-browser-now/
评论 (0)