技术更新：重构发光鱼追踪与青蛙记忆跳跃，拥抱纯原生 React 与 SVG
为什么要重构？
在最初上线 Glowing Fish Trace (发光鱼追踪)（一款基于多目标追踪 MOT 原理的游戏）和 Frog Memory Leap (青蛙记忆跳跃)（基于科西木块触击测验 Corsi block-tapping test 的空间工作记忆游戏）时，我们采用了传统的 Web HTML5 游戏引擎。虽然这些引擎在处理复杂的 2D 游戏时功能强大，但对于我们这种轻量级的脑力训练工具来说，却暴露出了几个明显的缺点：
- 极大的代码包体积 (Bundle Size)：仅仅为了在屏幕上移动几个元素，就需要加载一整个包含物理模拟和渲染系统的游戏引擎，这属于“杀鸡用牛刀”，严重拖慢了页面的初始加载速度。
- 移动端适配的噩梦：将一个
<canvas>画布元素死板地缩放以适应成千上万种不同的手机屏幕，往往会导致画面模糊、出现尴尬的黑边，或者 UI 元素变得极小，根本无法点击。 - 难以打破的“黑盒”：Canvas 元素对 DOM 来说本质上是一个“黑盒”。React 的状态管理和标准的 Web 无障碍 (a11y) 工具很难与其内部的游戏对象进行便捷的交互。
解决方案：纯 React + SVG + CSS 动画
为了彻底解决这些痛点，我们决定进行一次彻底的架构重写。我们移除了厚重的第三方依赖，使用 纯 React Hooks 来进行状态管理，并使用 可缩放矢量图形 (SVG) 进行画面渲染，从零开始打造了专属的轻量级游戏引擎。
1. useGameEngine 状态机架构
我们不再依赖第三方框架提供的游戏循环 update() 函数，而是自己实现了定制的 React Hooks（例如 useFishEngine 和 useFrogEngine）。这些 Hooks 巧妙地利用 requestAnimationFrame 驱动核心游戏循环，将状态流转、碰撞检测和关卡晋级等逻辑完美地融入标准的 React 生命周期中。
2. SVG 带来极致清晰与弹性缩放
通过将游戏对象（小鱼、荷叶、青蛙）作为内联 SVG 元素渲染到 DOM 中，我们实现了真正的“无限缩放”。无论你是在巨大的 4K 显示器上，还是在小巧的智能手机屏幕上游玩，图形边缘永远保持极致锐利，彻底告别了 Canvas 放大后的马赛克模糊。
我们还为这些 SVG 资产设计了专属的 React 组件（如 SunfishSVG.tsx 和 FrogSVG.tsx），允许我们直接通过传递 props 来控制图形。现在，想把一条蓝色的鱼变成发光的黄鱼，只需要更新一个 React prop 属性，而不需要像以前那样去费力替换精灵图 (Sprite Sheet)。
3. CSS 硬件加速动画提升性能
对于一些视觉特效，比如青蛙跳上荷叶时泛起的涟漪，或者小鱼细微的摆尾动作，我们将动画计算尽可能交给了 CSS 动画和过渡效果。现代浏览器在处理 CSS transform（如 translate, scale, rotate）自带卓越的硬件加速能力，这使得游戏即使在低端千元机上也能保持丝滑的 60 帧 (fps) 运行。
重构带来的巨大收益
这次技术迁移的成果令人振奋：
- 闪电般的加载速度：首屏可交互时间 (TTI) 大幅缩短。玩家点击进入页面后，几乎是瞬间就可以开始进行认知训练。
- 完美的移动端体验：利用标准的 CSS 布局技术（如 Flexbox 和 aspectRatio）加上可缩放的 SVG，游戏现在能完美适配任何移动设备。触摸交互区域足够大，完全消除了以前在手机上“点不到”的挫败感。
专注认知训练体验
除了底层技术的优化，我们还明确了这些游戏的科学原理与特定受众。针对 发光鱼追踪，我们的体验设计更加贴合 多目标追踪 (MOT)、运动视觉训练以及 ADHD 专注力改善的实际需求。而针对 青蛙记忆跳跃，我们则重点突出了其心理学原型 科西木块触击测验 (Corsi block test)，以及它在提升空间工作记忆和大脑神经可塑性方面的价值。
这些明确的定位旨在帮助那些正在主动寻找“有科学依据的认知改善方案”的用户，能够更有效地利用我们提供的免费工具。
立即体验全新版
我们诚挚邀请您来体验这两款游戏更加流畅、快速、响应灵敏的全新版本：
- 开始游玩 🐟 发光鱼追踪 - 提升你的视觉追踪与持续专注力。
- 开始游玩 🐸 青蛙记忆跳跃 - 挑战你的空间工作记忆极限。
AmyGame Focus 团队将继续致力于底层技术的优化与打磨，为您提供最优质的大脑在线训练体验。敬请期待更多更新！