I made a new game computer game that can be played in a web browser. It’s a real-time strategy game about controlling airplanes. Click here to play.
This game wasn’t my idea
So, a while ago (9 years to be exact) I wrote a browser game to teach myself JavaScript. It was a remake/re-interpretation of a text mode game “ATC” written by Ed James in 1987. It was about controlling air traffic in a given area. Planes would enter the game board through exits or spawn at airports. Each plane had to be carefully guided to its destination, which could be either an airport or an exit. The player command the planes, so that they would reach their destinations, without crashing into each other. The game was remarkably fun, and can still be played today. If you happen to be on a Debian-like operating system, you can get it by installing the bsdgames package.
The 2011 remake
My 2011 remake was a browser game written in JavaScript, and I based it around the Canvas element, which was a very new thing back then. It followed the original gameplay very closely, while introducing very simple graphics and small quality-of-life improvements. The game was controlled exclusively with keyboard, just like the original.
While I did learn a lot about writing JavaScript while making the game, I was never truly happy with how it turned out. The graphics was plain ugly, with small hard-to-read labels. When two or more planes got on top of each other, it was impossible to know which ones they were and where they were headed. The keyboard input system was very confusing to modern players, who were used to clicking everything with mouse. There was also no visual indication of which plane you were commanding, and if the command was actually accepted. Combine this with lack of tutorial, and the only way to learn this game was to have someone standing over your shoulder explaining the game as you played it. The code itself wasn’t that horrible for someone self-taught, but it didn’t escape from some anti-patterns, which made it difficult to find and fix bugs. Two major bugs remain up to this day: it’s possible for a plane to leave the game area through its southern edge and keep flying until it runs out of gas; it’s also possible for planes named “I” and “l” (capital “i” and lowercase “L” respectively) to both appear on the board at the same time, confusing the players. I attempted to fix the problem twice, both times without success. The game can still be played here.
The 2020 remake
My motivation for re-making this game again was mostly because I really liked the idea (which by the way is attributed entirely to Ed James), and I thought the game deserved a remake that was actually good. Therefore, I decided to spend a couple of days recreating the game from scratch, using modern technology.
The 2020 version features improved graphics with animations, a mouse-controlled interface that’s hopefully easy to understand, and several tutorial scenarios that gradually introduce all gameplay aspects and rules. One very big change is that airplanes actually fly across the board in real-time, rather than making chess-like movements that were characteristic to the original game. As a consequence of this, it’s possible to have many different kinds of airplanes that cruise at different speeds. The game is still based on a square grid, though unlike the original, planes travelling diagonally will take more time to reach the next square than those travelling horizontally or vertically.
Another big thing is a white line that predicts the path that an airplane will take. It’s only displayed for the currently selected airplane and goes through all squares the plane will travel through in the future. It’s also used for issuing delayed commands for planes passing over radio beacons and airfields. The line makes it easy to see whether a diagonally-travelling plane is actually lined up with its exit or not. The line is so useful in fact, that it made me realize some things about the default map from the original game that I hadn’t known about, like for example that airport A0 is located diagonally from beacon B0. Its most important advantage however, is that it shows you immediately how your commands affect a plane’s path.
I realize of course, that to make it a true product of 2020, I should’ve made it into a mobile game with touchscreen controls. I chose not to do so because a) I’m not very fond of mobile games, and b) real-time strategy games such as this one work very poorly on small screens with touch controls. Therefore, I envisioned this game to be played exclusively on a computer with mouse. Of course it’s theoretically possible to load it on a mobile browser, but I imagine the experience would be nothing but frustrating.
The game is written in TypeScript, which is compiled and packed to a minified JavaScript file with webpack. Other than some webpack loaders for development, I did not use any libraries or frameworks, so the game is very light-weight. The minified .js file currently sits at 127KiB, and can likely be reduced further by cleaning up the SVG assets.
Enjoy playing.