A neural net learns to defend, live in your browser
Matchup
Attacker
Your defender
No defence
Random drop
Best possible
Measured by trying every cell and every delay on the five attacks below.
Drag onto the board
1Your turn
2AI's turn
3Results
Defend it yourself
Five attacks. Drag your card onto the board to drop it, where and when you like. Each round scores the share of tower damage you prevented.
Watch it learn
It starts knowing nothing. Each try, the engine drops the attacker somewhere new, the network picks a cell and a moment, and the engine reports the damage.
Tries0
Per second0
Time0.0s
Drag the red attacker on the board: the heatmap shows where the network would drop your defender.
Same five attacks
Damage prevented on the five attacks
An interactive demo
Can you out-think a neural network that has never seen the game?
1
Pick a matchup. An enemy attack heads for your tower. You get one defending card.
2
Defend it yourself. Drag the card onto the board. Where you drop it and when both count. Optional.
3
Watch a network learn it. It starts from zero. A real Clash Royale simulator, written in C++ and compiled to WebAssembly, scores every try right here in your browser.
Takes about two minutes, with a ten-second how-to-play demo first if you want one. Works with a mouse or a finger.
How it works
The engine. The arena, the troops, the towers and every hit are simulated by the project's C++ engine, the same code the full agent trains against, compiled to WebAssembly. It is deterministic: the same drop always gives the same result.
The problem. The attacker is dropped at a random spot on the enemy side (a Goblin Barrel is thrown at a random spot around one of your towers). The network chooses a legal cell for your defender, then a delay from 0 to 5 seconds. The reward is the share of the no-defence tower damage it prevented. Your defender's health counts only as a tie-breaker: of two drops that save exactly as much of the tower, it prefers the one that keeps its card alive, and it never gives up a single tower hit point to do so. The score on the page is the damage prevented alone, for you and for it.
The network.A few thousand weights in plain JavaScript, no ML library: the attacker's position goes in, a map of cell preferences and a delay choice come out. It learns with REINFORCE, the simplest policy-gradient method: tries that beat the usual result for that spawn become more likely.
The honest part. This is a miniature. The real agent picks from a hand of four cards with an elixir economy, every second of a three-minute match, and needs days of training.
Game over
Game over
What you just played is a small corner of ClashRoyaleAi, an open-source project to teach a neural network to play Clash Royale.
The engine. A Clash Royale battle simulator written in C++, with more than a hundred cards, played out tick by tick. The same code scored every try on this page, compiled to WebAssembly.
The agent. A network with a convolutional eye and a recurrent memory, trained with PPO, that plays whole three-minute matches: a hand of four cards, an elixir bar, every second a decision. It learns against scripted teachers first, then against past versions of itself.
The hardware. One laptop CPU, no GPU. A training run takes days.