浏览器里训练AI：Clash Royale强化学习实战解析

一位开发者把自家的《皇室战争》(Clash Royale) AI 智能体拆成了一个可以在浏览器里直接训练的迷你版本，让好奇的人亲眼看着神经网络从零学会防守。这个项目不仅是有趣的演示，更是一次难得的强化学习(RL)透明化教学——因为它把每一步梯度都写在了明面上。

一个能在浏览器里学习的迷你智能体

作者最初发布完整的《皇室战争》AI 后，评论区涌来大量关于"它到底怎么学"的疑问。与其在评论里空谈 PPO 算法，他索性做了一个可交互的实验室页面：屏幕上一个进攻单位冲向你的塔，你只有一张卡牌来阻挡它。放在哪里、什么时候放，两个因素都至关重要。

玩家可以先亲手尝试五次防守，然后看着一个小型神经网络从零开始学习同样的任务。关键在于，每一次尝试都由团队真实的模拟器运行——这个引擎从 C++ 编译成 WebAssembly，与训练完整智能体所用的是同一套引擎。这意味着浏览器里的迷你实验和背后的大型训练共享同一个物理内核，而非简化的近似。

Clash Royale AI 浏览器实验室

拆开看：强化学习的每一个齿轮

作者对 RL 部分的设计交代得非常清楚，这也是本项目最有教学价值的地方：

状态(State)：进攻单位被投放的位置
动作(Action)：一个合法的格子，外加 0 到 5 秒的延迟
奖励(Reward)：与"完全不防守"相比，所阻止的塔伤害占比
算法：采用带 per-spawn baseline 的 REINFORCE，共 5,629 个权重

最令人印象深刻的是工程上的克制——整个学习器约 350 行纯 JavaScript，每一个梯度都手写实现，不依赖任何机器学习库。这种"从裸机造轮子"的方式，剥离了框架的黑箱，让学习过程真正可读、可检视。

图表上还有一条"理论最优"参考线，它通过暴力枚举每个格子与每个延迟组合算出。这条线的意义在于，你能一眼看出当前策略距离最优解还有多远——这是很多 RL 演示所缺失的直观锚点。

REINFORCE 是最早的策略梯度算法之一，由 Williams 于 1992 年提出。它的核心思想是：如果某次行动之后获得了较高奖励，就增大该行动的概率；反之则降低。与 Q-learning 等值函数方法不同，REINFORCE 直接对策略本身求梯度，不需要显式估计每个状态的价值。"per-spawn baseline"是方差缩减技巧的一种变体——通过减去一个基线值（通常是历史平均奖励），让梯度估计的噪声更小、学习更稳定，否则纯 Monte Carlo 采样的方差会大到几乎无法收敛。PPO（近端策略优化）则是 REINFORCE 的进阶演化版本，通过裁剪更新幅度来防止策略突变，是目前工业级 RL 智能体的主流选择——完整版皇室战争 AI 正是采用了带循环网络的 PPO。两者的根本差异在于稳定性与样本效率，迷你版选用更简单的 REINFORCE 恰恰是为了教学目的：每一步计算都能完整呈现。

巨人对加农炮：策略学习的经典陷阱

作者推荐第一个尝试的对局是巨人(Giant)对加农炮(Cannon)。直觉上，把加农炮直接放在进攻路线上似乎最合理，但这种打法只能拿到最优得分的约 75%。真正的最优解是把加农炮放在中路，将巨人拉进两座塔的攻击范围内——一个反直觉但更聪明的走位。

这里暴露了强化学习中一个典型难题：探索(exploration)。作者发现，使用恒定的熵奖励(entropy bonus)时，网络在 6 次运行中有 5 次卡在了"直接放路线上"的次优解(测试涵盖 3 个随机种子、2 种批量大小)。当他把熵系数在前 1 万次尝试中从 0.1 退火(annealing)到 0.005 后，卡住的情况降到了 6 次里只有 1 次。这也正是当前页面所采用的配置。这个细节生动说明了探索强度的调度对跳出局部最优的决定性影响。

熵奖励（entropy bonus）是强化学习中鼓励探索的常用手段。策略的熵衡量其"随机程度"——熵越高，智能体越倾向于尝试不同动作而非固守某一选择。在训练早期保持较高熵，可以帮助智能体跳出初期形成的次优习惯；随着训练推进再逐步退火降低熵系数，则让策略趋于收敛和确定性。退火（annealing）本质上是一种调度策略，借鉴自模拟退火算法的思想：高温时大范围探索，低温时精细利用。这与局部最优（local optimum）问题直接相关：如果探索强度过早收缩，策略会"锁定"在第一个看起来不错的解上，再也无法发现全局更优的动作组合。作者的实验数据——熵退火将卡死率从 5/6 降至 1/6——是这一理论在实际系统中的清晰量化验证。

一个故意锁死的挑战

项目里有一个对局被刻意锁定：战车(Battle Ram)对瓦基丽武神(Valkyrie)。它的最优解需要在几个精确的格子、精确的时机下操作，而作者尝试的每一种设置都最终妥协于一个"安全角落"，只能拿到最优得分的 55%。

作者坦率地把这个未解难题抛给了社区："如果你找到了能攻克它的学习器，我真的很想看看。"这种开放姿态让项目从单向演示变成了一个协作式的研究邀请，也如实呈现了强化学习在需要精确、稀疏动作序列时的固有困难。

迷你版与完整版的距离

作者反复强调这只是一个"缩微模型"。完整的智能体要打整场比赛，管理 4 张手牌与圣水(elixir)资源，使用循环 PPO(recurrent PPO)，并在 CPU 上训练数天之久。

但两者的核心循环完全一致：行动 → 让引擎评分 → 更新。正是这个简单闭环，构成了从迷你实验到复杂智能体的共通骨架。对于想理解强化学习如何真正"学会"的人来说，能在浏览器里亲眼看着这条曲线爬升，远比阅读一篇算法论文来得直观。

实验室与完整项目的代码均已开源，托管于 GitHub 仓库，适合任何想动手研究 RL 内部机制的开发者。

WebAssembly（WASM）是一种可在浏览器中以接近原生速度运行的二进制指令格式，由 W3C 于 2019 年正式标准化。开发者可以将 C、C++、Rust 等语言编写的代码编译为 WASM，再在浏览器的沙盒环境中执行，性能远超传统 JavaScript。对于本项目而言，将 C++ 游戏模拟器编译成 WebAssembly 的意义是双重的：一方面保证了浏览器端与服务器端物理规则完全一致，避免了"演示版简化逻辑"带来的误导；另一方面也使得高频次的模拟采样（强化学习需要大量交互才能产生足够的训练信号）在浏览器中成为可能，而不会因性能瓶颈让实验变得迟缓或失真。