JS1k: We have a winner!

First published: Sep 27, 2010 Read time: 2 mins

If you’ve been following my blog posts over the past couple of months you will have seen JS1k being mentioned quite a few times. If not the idea is simple; create something cool with JavaScript using only 1024 bytes. Now you may think that you can’t do much with 1Kb, but you’d be wrong! Just take a look at the 1st place entry:

JS1k winner image using canvas — All this with 1024 bytes of JavaScript? That's crazy talk!

The author Marijn Haverbeke has created a very cool little platform game that’s actually very playable. As you jump from block to block and move through the level to collect the gold coins, the game gets progressively harder. How exactly did he do that I hear you ask; well using this code of course:

1
2
3
4
5
6
7
8
9
10
11
c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=[];R=Math.random;for($ in C=
c.getContext('2d'))C[$[J=X=Y=0]+($[6]||'')]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=\
H[i++]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H[(x+X)/u|0]>9?0:X;j=H[o=\
x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C){A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P\
?c:'#'+'ceff99ff78f86eeaaffffd45333'.substr(c*3,3);f();ba()};for(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/\
2,235,Z?250-15*Z:w);i=o-5+Z;S=x-i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A(2,25,T-7\
,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i%7?'#7e3':(i^o||y^T||(y=H[i]+=$/99),\
'#c7a'\));G.P(1,'#ca6');i%4&&A(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,56,\
h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,9),A(G,25,$,5),fc(24,$,2,h),D=B&y\
>$-9?1:D);ta(S-u,0)}A(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+'¢',5,15)}D=y>h?1:D"
,u);onkeydown=onkeyup=function(e){E=e.type[5]?4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E}

See, simple… urghh! That’s the minified source code so it won’t make much sense, but Marijn has been kind enough to post the unminified code for everyone to look at in a blog post about the entry. Very impressive! I’ll be taking a close look at the source when I get some spare time. Many congratulations to Marijn, superb work.

There are 10 winners in total listed on the JS1k page, all equally impressive, but here are my 5 personal favourites:

3D Snowman by romancortes
Mandelbrot with Colours by Gabor Turi
Colourful Visualisation by “Cowboy” Ben Alman
Tiny Chess by Óscar Toledo
Wobbling Tunnel by Marcin Ignac

Some excellent submissions there, I sure you’d agree. Take a look at all the submissions on the JS1k demo page.

I’d like to say a big thank you to Peter van der Zee for creating the JS1k competition, I’ve really enjoyed it. I’m already looking forward to next year. On a side note, just imagine what’s possible with 2048 bytes!

Webmentions