Tron: an HTML5 Game in 219 Bytes

Share this article

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.

Frequently Asked Questions about HTML5 Tron Game

How can I start developing HTML5 games?

To start developing HTML5 games, you need to have a basic understanding of HTML, CSS, and JavaScript. These are the core technologies used in creating HTML5 games. You can start by learning these languages from various online resources. Once you have a good grasp of these languages, you can start experimenting with creating simple games. There are also various game engines like that can help you in developing HTML5 games. These engines provide a framework that makes it easier to create games.

What are the benefits of using HTML5 for game development?

HTML5 has several benefits for game development. Firstly, HTML5 games are cross-platform, which means they can run on any device with a web browser. This includes PCs, smartphones, and tablets. Secondly, HTML5 games do not require users to download or install anything, they can be played directly in the browser. Lastly, HTML5 games are easy to distribute. You can simply share a link to the game, and anyone with a web browser can play it.

Can I sell my HTML5 games?

Yes, you can sell your HTML5 games. There are several platforms like Codecanyon and Codester where you can sell your games. You can also sell your games directly from your own website. However, keep in mind that selling games requires a lot of marketing and promotion to be successful.

What is the Tron game and how can I create it using HTML5?

The Tron game is a classic arcade game where players control a line that grows in length, with the objective being to avoid colliding with the opponent’s line. Creating a Tron game using HTML5 involves using JavaScript to control the movement of the line and detect collisions. Our article provides a detailed guide on how to create a Tron game using just 219 bytes of HTML5.

How can I improve the performance of my HTML5 games?

There are several ways to improve the performance of your HTML5 games. One way is to optimize your code. This involves removing unnecessary code, using efficient algorithms, and minimizing the use of global variables. Another way is to use a game engine like, which has built-in performance optimizations.

How can I monetize my HTML5 games?

There are several ways to monetize your HTML5 games. One way is to sell your games on platforms like Codecanyon and Codester. Another way is to include in-game purchases in your games. You can also monetize your games through advertising. There are several ad networks that specialize in HTML5 games.

Can I create multiplayer HTML5 games?

Yes, you can create multiplayer HTML5 games. This involves using WebSockets to enable real-time communication between players. However, creating multiplayer games is more complex than creating single-player games, and requires a good understanding of networking concepts.

How can I distribute my HTML5 games?

There are several ways to distribute your HTML5 games. One way is to host your games on your own website. You can also distribute your games on platforms like, which allow users to play your games directly in their browser. Another way is to submit your games to HTML5 game directories.

Can I use HTML5 to create mobile games?

Yes, you can use HTML5 to create mobile games. HTML5 games are cross-platform, which means they can run on any device with a web browser. This includes smartphones and tablets. However, keep in mind that mobile devices have different performance characteristics than PCs, so you may need to optimize your games for mobile devices.

What resources are available for learning HTML5 game development?

There are many resources available for learning HTML5 game development. This includes online tutorials, books, and courses. Websites like provide tutorials and examples that can help you get started with HTML5 game development. You can also find many tutorials and guides on websites like SitePoint.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

bandwidthHTML5 Dev CenterHTML5 Tutorials & Articlesjavascriptoptimization
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week