Tron: an HTML5 Game in 219 Bytes
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?
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.
<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.
bodyis 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.