PDA

View Full Version : A 'Tron' JavaScript game in just 219 Bytes



garyopa
03-30-2012, 08:43 AM
'An exercise known as javascript golfing'.

http://www.maxconsole.com/maxconsole/contents/RKLS0000005512/icon_xl.jpg

This is the smallest possible game of Tron written in JavaScript. Try it out and see the code by yourself inside.

Well, if you are already tired of the 140-Bytes Tetris JavaScript game (http://www.maxconsole.com/cgi-bin/maxconsole/rknewz.pl?function=detail&id=RKLS0000003352&cat=GENERAL), you can try another one. Some programmers managed to make the smallest possible game of Tron, also written in JS.



With some coworkers, we challenged each other to write the smallest possible game of tron in javascript (an exercise known as javascript golfing).

This page explains our final version (219 bytes). We initially worked alone but then exchanged ideas and tricks, so erling & mathewsb deserve most of the credits!

our code was originally 226 bytes, but "Cosmologicon" pointed out a way to save three whole bytes, bringing us to 223 bytes.

With p01, we then came up with a way to save another 11 bytes (making the game 212 bytes). He also suggested keeping track of score, which takes 9 bytes but is totally worth it!

skrounge found a way to save 2 more bytes, brining the game to 219 bytes.


Here are the game 'rules':



rules

We started with some basic rules:

1. the tron must start in the center, facing any direction.
2. the game controls must be 'i', 'j', 'k', 'l'.
3. when the tron hits it's trail or an edge, "game over" must be shown to the user.
4. the code need only run on Chrome 17.

Unlike some js size optimization competitions, we did not use a shim. We took into account the entire page's size. This forced us to explore novel tricks.

My coworkers represented the board as ascii-art (which resulted in shorter code but an unplayable game). I preferred to keep the game nicer and use a "canvas" tag.


Well, as you can see, apparently it only runs on Chrome 17. And finally, here's the game code:



<body id=b onkeyup=e=event onload=
z=c.getContext('2d');
z.fillRect(s=0,0,n=150,x=11325);
setInterval("
0<x%n
&x<n*n
&(z[x+=[1,-n,-1,n][e.which&3]]^=1)
?z.clearRect(x%n,x/n,1,1,s++)
:b.innerHTML='game⬜over:'+s
",9)
><canvas id=c>


Very impressive. You can try it at the link below!

OFFICIAL SITE: http://alokmenghrajani.github.com/tron/

NEWS SOURCE: http://developers.slashdot.org/story/12/03/25/1442228/javascript-game-of-tron-in-226-bytes

Our thanks to 'Gauss' for this news story!