I Built a Ballistic Missile Defense Simulator in a Browser

6 min read Original article ↗

Erik Kannike

Press enter or click to view image in full size

Every morning, the Ukrainian Air Force releases a map summarizing the overnight Russian attacks.

I’ve seen these maps countless times. As someone who has been to Kyiv multiple times over the past few years and experienced the air raid sirens, and even with a decade working in defense innovation, I felt a disconnect. You can see the lines, but can’t intuitively grasp the dynamics. What does it actually take to stop these swarms of drones and missiles traveling at different speeds and altitudes?

I decided to build something to understand the sheer difficulty of intercepting these layered attacks. This led me down a rabbit hole of spherical trigonometry, pathfinding algorithms, and a whole lot of browser performance optimization, resulting in airdefense.dev.

Press enter or click to view image in full size

The same view, now as an interactive simulation

Physics on a Sphere (At 30 FPS)

You can’t fake the physics. For short distances, a flat map is fine. But for ballistic missiles and long-range drones, the curvature of the Earth is fundamental. All distance and bearing calculations use spherical geometry, specifically the Haversine formula.

// Haversine formula for great-circle distance
const calculateDistance = (lat1, lon1, lat2, lon2) => {
const R = 6371e3; // Earth radius in meters
const φ1 = lat1 * Math.PI/180;
const φ2 = lat2 * Math.PI/180;
const Δφ = (lat2-lat1) * Math.PI/180;
const Δλ = (lon2-lon1) * Math.PI/180;
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ/2) * Math.sin(Δλ/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c; // in meters
};

The simulation loop runs on requestAnimationFrame at a fixed tick rate of 30 FPS. A nasty bug I found early on was that at high simulation speeds, a fast missile could travel further in a single tick than the distance to its next waypoint, causing it to "skip" or overshoot. I learned that a ballistic missile moving too fast can have its latitude wrap around the globe and reappear in Antarctica.
The fix was simple but crucial: cap the movement distance per frame.

// Prevent overshoot by limiting movement distance per tick
const distanceToTarget = calculateDistance(currentPos, targetPos);
const actualMoveDistance = Math.min(speedPerTick, distanceToTarget);

This ensures that objects land precisely on their waypoints, regardless of the simulation speed.

Interception is a Messy, Probabilistic Game

Real-world interception is far from a binary hit-or-miss event. Hitting a Shahed drone with a Gepard anti-aircraft gun is a very different problem from hitting a Mach 6 Iskander missile with a Patriot.

Press enter or click to view image in full size

The model calculates the probability of a successful intercept (Pk) using multiple factors:

  • Altitude Envelopes: Every weapon has a minimum, maximum, and optimal engagement altitude. A ZU-23–2 is useless against a target at 35,000 feet.
  • Target-Weapon Matching: Effectiveness is derived from open-source data. A Gepard has a ~98% chance against a slow Shahed, but only 5% against a ballistic missile it was never designed to hit.
  • Sensor Fusion: A lone Patriot battery is one thing. A Patriot being fed targeting data from a nearby sensor is far more lethal. This is modeled as a multiplicative bonus.
// Nearby sensors provide an engagement bonus
let sensorBonus = 1.0;
if (hasSigintSupport) { sensorBonus *= 1.25; } // 25% bonus
if (hasAcousticSupport) { sensorBonus *= 1.35; } // 35% bonus
if (isJammable && hasJammerSupport) { sensorBonus *= 1.45; } // 45% vs GPS-drones

This creates emergent behavior where the strategic placement of cheap sensors can be just as important as the placement of expensive launchers.

The Opposite Constraint

When you live in Estonia, the threat of drones feels very close to home. A number of Russian Shahed drones recently landed in Lithuania, directly onto NATO territory a few hundred kilometers away.

Press enter or click to view image in full size

This downed Shahed drone was loaded with explosives, landing on NATO soil

After a decade working in the defense industry, I noticed a strange problem in how we prepare for this kind of threat.

The official military simulators are monsters. They cost millions, need their own servers, and often feel like doing your taxes in a language you don’t speak. And since they run on classified data, the soldiers who need them most often can’t get access.

So I asked myself a question: what if you built a simulator with the opposite constraint? What if it had to be built using only public, open-source information? That one decision changes everything. It forces the software to be lightweight enough to run in a browser. It removes the need for a massive budget or special security clearances. A local unit could fire it up for a training exercise on any given afternoon.

My personal project had accidentally found a purpose. I wasn’t just building a technical demo anymore. I was building a practical tool for wargaming, aimed at solving a problem I had seen up close.

From Simulation to Strategy: The Campaign Mode

Building the physics engine was one thing, but applying it was the real goal. I developed a full campaign mode that places you in the role of an air defense planner for real-world geopolitical hotspots. You are given a budget and a set of threats, and you must design a layered defense to protect critical infrastructure.

The scenarios are based on realistic threat assessments, challenging you to defend cities like Kyiv, Warsaw, Taiwan, Tel Aviv, and Seoul against multi-layered attacks involving everything from slow, low-flying drones to hypersonic ballistic missiles.

Press enter or click to view image in full size

Quite the hellscape of ballistic missiles against a potential Taiwan scenario

Each scenario forces you to make difficult trade-offs. Do you spend your budget on a few advanced Patriot systems, or a larger number of cheaper, short-range defenses and sensors? The simulator’s realistic modeling of sensor fusion and weapon capabilities makes these decisions meaningful.

Try It Yourself

This project was a journey to build an intuitive understanding of a complex domain. I learned that performance is often about finding and deleting code that runs too often, that networks of cheap sensors are often better than single silver-bullet weapons, and that the browser is a surprisingly capable platform for serious simulation.

Now you can test your own strategies. Can you design a defense that can protect Taiwan from a saturation attack, or keep the skies over Seoul clear?

Challenge yourself in the campaign mode at airdefense.dev.

You can find me on LinkedIn or X.