Air Traffic Chaos — free browser ATC game, built without a game engine

[guasco]

 

 

 

 

You're the approach controller for the airspace around a real airport. Traffic crosses your sector on its own heading, and you turn each aircraft onto the extended runway centreline, get it down and slowed, and clear it to land before it flies out the other side.

Nothing auto-lands. An aircraft only touches down if it crosses the touchdown box below 1,200 ft, under 170 kt, within 15° of the runway heading and laterally on the strip, with the runway clear. Miss one and it goes around. Nine real airports with their actual runway headings, 10-minute shifts, separation to maintain, departures to push out.

https://atcchaos.com/ — free, no signup, no ads, works on desktop and phone.

On the build, since that's what this forum is for:

No game engine. The simulation is plain TypeScript with no framework in it at all — React only subscribes to it and renders. The map is MapLibre GL, so WebGL, and the aircraft, trails and approach corridors are an SVG overlay projected from world coordinates onto screen space every frame. I expected SVG to be the bottleneck with 8 aircraft plus trails, and it hasn't been — the map costs far more than the overlay does.

Keeping the engine free of React turned out to be the best decision in the project. It meant I could compile the game logic on its own and run the whole tutorial headlessly across all nine airports: a script reads the in-game coaching line, does literally what it says, and asserts the aircraft lands. That found bugs I would never have caught by playing — the chosen runway end flip-flopping several times a second when an aircraft was near the field, and a small heading correction silently cancelling an existing landing clearance.

Audio is Web Audio oscillators for the alerts and SpeechSynthesis for the ATC callouts, which is free and surprisingly effective, though voice availability varies a lot by platform.

Feedback I'd find useful:

- Does the landing model feel satisfying, or just fiddly?
- Anything broken on your browser or device?
- If you've done SVG-over-WebGL overlays before — did you hit a wall I haven't yet?