Tron: an HTML5 Game in 219 Bytes

March 28, 2012

I’ve never been keen on this multi-megabyte web page nonsense. Perhaps it’s because I started web development during the dial-up days when a total page weight of 100Kb was considered excessive? Or perhaps it’s simply because I don’t understand why extravagant bandwidth is necessary?

I’ve mentioned a number of 1KB JavaScript and CSS competitions before. There have been some remarkable entries but few are as bandwidth-friendly as 219 Byte Tron. Yes, 219 bytes — which includes all the HTML5 and JavaScript code.

The project started as a challenge and several collaborators contributed to the memory-shaving exercise. You can play it here — use the keys i, j, k and l to start and steer. I found the game worked best in Opera but it’s fine in Chrome and Safari. Firefox and IE9 aren’t compatible.

While it’ll never win any game-play awards or replace your Call of Duty sessions, it’s an impressive exercise in mental agility. The developers have documented each ‘line’ of the code and there are some useful tips and tricks which you could apply to your JavaScript programming.

In all browsers except Firefox, assigning an ID to an element exposes the node object as a variable within JavaScript, e.g.
```
<div id="test">Hello</div>
<script>test.textContent = "Goodbye";</script>
```
Browsers will happily accept non-quoted tag attributes if they don’t contain >, space or tab characters.
Variables can be initialized within function calls, e.g.
```
myFunction(a=1, b=2, c=3);
```
A binary & can be used instead of && if both sides of the operator are boolean values.
body is the only essential HTML tag on a web page!

Remember that Tron takes byte saving to an extreme level. Some of these tips are useful but you should always weigh that against:

Functionality. For example, just because onkeyup is shorter than onkeydown, that doesn’t necessarily make it the most appropriate event to use.
Readability. Without the documentation, Tron’s code would have been impossible to understand. Few developers would persist in trying to make sense of it.
Compatibility. I advocate cross-browser operation and suspect IE9 and Firefox could be fixed with a few additional bytes.

219 Byte Tron is astounding. While you may never adopt many of these techniques, you should consider what’s possible before adding another megabyte of superfluous bulk to your pages.