Behind the scenes: how we built LateTowers, a tower defense game drawn entirely in code

No game engine, no picture files for the heroes, and balloons that are the same every time you play a level. How LateTowers works under the hood, and why we made it that way.

LateTowers started as a small idea: a calm game for the late hours, something you could leave running while you read or chatted, and come back to later. It has since grown to 31 heroes, ten lands, season events and a Steam version on the way. This is a look at how it is built, and at some of the choices behind it that you can't see from the outside.

No engine, no downloads

LateTowers is written in plain JavaScript and drawn on an HTML canvas. There is no game engine underneath. That was a deliberate choice: an engine adds megabytes to download before you can play, and a lot of LatePals members are on a phone in bed, sometimes on a weak connection. The whole game, rules and drawings included, loads in about the time it takes to open a normal web page, and it runs the same on a five-year-old phone as on a gaming PC.

The game is split in two. One file holds the rules: how much damage a dart does, how fast a balloon moves, what a boss does when it gets angry, what an upgrade costs. The other draws everything and handles your taps and clicks. The rules file knows nothing about the screen, which means we can run it on its own, thousands of levels at a time, to test the balance of the game without drawing a single frame.

Heroes drawn in code

None of the heroes are picture files. Every one of them, from the dart-throwing monkey to the three-headed hydra, is drawn from shapes in code: ellipses, curves and outlines, painted with materials such as fur, feathers, cloth, metal, bark or scales. A light from the upper left gives each hero highlights, and a soft shadow on the far side gives them depth. The finished picture is kept in memory, so the drawing work is done once and not sixty times a second.

Drawing in code is more work up front, but it pays off. A hero can blink. It can lift its arm before it throws, so you see it wind up before the dart leaves its hand, and the dart only flies when the arm comes down. It can wear a Santa hat in December and bunny ears at Easter, and the colour of a skin is laid over the hero's own light and shade instead of painting it flat. When we redrew the heroes with hands, legs and moving wings this autumn, every skin and every season outfit came along for free.

The same balloons every time

Each level's balloons come from a random number generator that is "seeded" with the level number. That means level 120 always sends the same balloons in the same order, whoever plays it and however many times. It sounds like a small detail, but it makes the game fair (everyone faces the same level 120), it makes bugs possible to reproduce, and it lets the server check your progress, which brings us to the referee.

A referee on the server

Your game runs in your own browser, which is what lets it work offline and feel instant. The downside of a game that runs on the player's machine is that the player's machine can be told to lie. So every time your game is saved, a small referee on our server looks at what changed: did the gold go up by an amount that is possible for that level and that much time? Was that hero really affordable? Could you have reached that level since the last save? The referee knows the same prices as the game. If something doesn't add up, it rolls the save back to the last good one. This is what keeps the Top 10 honest without making the game wait for the server on every shot.

While you're away

LateTowers is an "idle" game: it keeps going when you close it. We do that in two ways. If you are gone for up to a quarter of an hour, the game simply plays the missing time when you come back, fast and without drawing anything, so you return to exactly the battle you would have seen. If you are gone for longer, playing every second would take too long on a phone, so instead the game works out the gold your heroes would have earned and pays it out. Your save is kept on your account, so you can close the game on your phone and open it on your computer, and it also works without internet: it remembers your progress and hands it to the server when you are back online.

Balancing by simulation

How fast should you get through the levels? How rich should you be after a week? Instead of guessing, we run the rules file through a simulator that plays thousands of levels with sensible choices and measures how long each one takes and how much gold, gems and chests come out. When players told us the game went too fast and they were drowning in gems, we changed the numbers, ran the simulator again and compared the curves before anything reached the real game. Every hero can also miss, especially on fast balloons far away, which keeps even a strong team from feeling like a machine.

What's next

The Steam version is on its way, using the same account, so your progress follows you. We keep adding heroes, lands and events, and you can see everything that has changed on our What's new page. If you want to try it, the LateTowers guide and the hero encyclopedia are good places to start, and if something doesn't work the way you expect, we'd love to hear about it on our contact page.

Still up? You're in good company.

LatePals is a free social network for night owls and shift workers. Chat, share and find people who are awake when you are.

Create your free account