{"slug": "show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser", "title": "Show HN: Watch a neural net learn Clash Royale defense in the browser", "summary": "An open-source project called ClashRoyaleAi published a browser demo in which a neural network with a few thousand weights, trained with the REINFORCE policy-gradient method, learns to place a single defending card against five scripted Clash Royale attacks. The demo runs the project's C++ battle simulator, which models more than a hundred cards tick by tick, compiled to WebAssembly so every try is scored locally in the browser; the network picks a legal cell and a delay of 0 to 5 seconds, and its reward is the share of no-defence tower damage prevented. The full agent, which uses a convolutional and recurrent network trained with PPO on one laptop CPU with no GPU, plays complete three-minute matches with a four-card hand and an elixir economy and takes days to train.", "body_md": "A neural net learns to defend, live in your browser\n\nMatchup\n\nAttacker\n\nYour defender\n\nNo defence\n\n-\n\nRandom drop\n\n-\n\nBest possible\n\n-\n\nMeasured by trying every cell and every delay on the five attacks below.\n\nDrag onto the board\n\n1Your turn\n\n2AI's turn\n\n3Results\n\nDefend it yourself\n\nFive 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.\n\nWatch it learn\n\nIt 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.\n\nTries0\n\nPer second0\n\nTime0.0s\n\nDrag the red attacker on the board: the heatmap shows where the network would drop your defender.\n\nSame five attacks\n\nDamage prevented on the five attacks\n\nAn interactive demo\n\nCan you out-think a neural network that has never seen the game?\n\n1\n\nPick a matchup. An enemy attack heads for your tower. You get one defending card.\n\n2\n\nDefend it yourself. Drag the card onto the board. Where you drop it and when both count. Optional.\n\n3\n\nWatch 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.\n\nTakes about two minutes, with a ten-second how-to-play demo first if you want one. Works with a mouse or a finger.\n\nHow it works\n\nThe 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.\n\nThe 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.\n\nThe 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.\n\nThe 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.\n\nGame over\n\nGame over\n\nWhat you just played is a small corner of ClashRoyaleAi, an open-source project to teach a neural network to play Clash Royale.\n\nThe 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.\n\nThe 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.\n\nThe hardware. One laptop CPU, no GPU. A training run takes days.", "url": "https://wpnews.pro/news/show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser", "canonical_source": "https://itzik123.github.io/ClashRoyaleAi/lab/", "published_at": "2026-10-01 11:51:05+00:00", "updated_at": "2026-10-01 12:17:26.397325+00:00", "lang": "en", "topics": ["artificial-intelligence", "machine-learning", "neural-networks", "ai-research", "ai-agents"], "entities": ["ClashRoyaleAi", "Clash Royale", "REINFORCE", "PPO", "WebAssembly"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser", "markdown": "https://wpnews.pro/news/show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser.md", "text": "https://wpnews.pro/news/show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser.txt", "jsonld": "https://wpnews.pro/news/show-hn-watch-a-neural-net-learn-clash-royale-defense-in-the-browser.jsonld"}}