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?

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:

  1. Functionality. For example, just because onkeyup is shorter than onkeydown, that doesn’t necessarily make it the most appropriate event to use.
  2. Readability. Without the documentation, Tron’s code would have been impossible to understand. Few developers would persist in trying to make sense of it.
  3. 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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.eclecticradio.nl/ Jasper

    Works perfectly in Firefox 12.0b :)

  • http://www.grumpy.com Grumpy

    Meh.

    • USPaperchaser

      I concur. Nothing but a novelty, it’s not practical, especially if you want to make money from the app. Show me a CRM HTML5 app then I will use HTML5, until then, its beta to me.

  • http://aarontgrogg.com/ Aaron T. Grogg

    Hmm, I’m getting the following error in my Chrome Console when I try to open the “play it here” link…
    Uncaught ReferenceError: e is not defined

    Maybe a couple more Bytes would be okay… :-)

    Atg

  • Malcolm Sheridan

    e is not defined

    I get this is Chrome and Firefox. Maybe they minified it too much!

    • Stefan Froelich

      It mentions that it is incompatible in firefox due to lack of support for the shortcut id to element naming.
      Chrome should work fine though.

  • Christian

    I thought BODY was no longer a requirement in HTML5.

  • TehYoyo

    Nice. Too bad more websites don’t strive to achieve such low sizes. Of course, there’s a line b/w concise and unfunctional, but if we could all minimize our loading times, that’d be great.

  • http://www.sassquad.com Stephen Scott

    A nice little demo. But it makes me think about the sheer amount of code being added to webpages these days. Even on a good broadband connection, pages seem to be very sluggish to load. Firefox occasionally struggles if there are excess plugins on the same page, or multiple tabs.

    I occasionally look at the source code for these sites, and it is shocking how much whitespace and markup is used. I think we’ve got a little complacent with loadtimes now. Try viewing websites on a mobile device and see what I mean. My little Blackberry 8520 really struggles with non-mobile sites, and it’s not that old a phone.

    I think obesity exists in the digital world as well as the real world.

  • mr_switch

    You can pass anything within a function. e.g. myFunc( confirm(‘Pants’) );… javascript is awesome.

    Didn’t know about the id as a window variable name, nice shortcut but wont be using it…

    var i=0;
    Hello
    console.log(i);// 0, thankfully

  • mr_switch

    Hopefully you can see this….
    <div id=”i”>Hello</div>

  • Miroslav Ćurčić

    Doesnt work in FF 10.0.4

  • Niels

    Hey, this is the good old snake game. From the eighties this game was already very very small when it comes to the number of bytes. I am not surprised that this can be done in html5 and javascript as well.

  • http://shuttercard.com Jon Zumbrun

    Same as @Malcolm Sheridan. Just a black box.

  • Anonymous

    I don’t understand the controls… i is up, sometimes… but m is never down?

  • Stefan Froelich

    For all those complaining about the “e is not defined” error,
    you will get this no matter what browser you use. Just confirmed it on chrome 18, firefox 11 and opera 11.62.

    Initially, i thought this was an error, but in all these browsers, when you press i,j,k, or l, the game will start.
    Its quite fast I should say, but hey, Im not complaining.

    If you want a full featured HTML5 game, try http://cuttherope.ie for a browser version of cut the rope. Wicked fun.

  • Ruald

    Just a blank black box…. IE9, Firefox11 works in Opera 11.something, once you die it just counts up the score… Nice try though.

  • freak

    Does not work in Chrome. All I get is a black screen. Not worth 219 bytes.

  • freak

    Its working actually. I just forgot to press the keys to start the game.