JSuper Mario 1K – My JS1K Spring Entry

by Vincent Thibault, posted Apr 10, 2013 in Blog (No Comments)


Two weeks ago ended the latest JS1K contest (submit an awesome demos in just 1K of javascript), I created for the occasion a Super Mario running in an infinite world (If you want to take a look at the Source code).

I had the idea of doing a Mario by visiting @jseidelin’s site, you can actually see in the background the sprites I used for my entry (thanks to him to allow me to use them).

Storing sprite

Before starting I knew that just storing the sprite in the script will exceed the 1K limit. I decided to store the pixel color using 0 and 1 and let JSCrush do its job, since there will have a lot of repeated sequence, the compression will be far better.

I came finaly with this:

    k.data[i+3]=1<<"0008888880000000088888800000088888800000008888880000000888888000008000000008800888888888880008888888888000088888888880088888888880008888888888000888888888000088888888808888888888888800888008000000008880080000008880080000000888008000000088800800888008888888880888888888888880808000800000008080008000008080008000000808000800000080800080088800888888888088888000008888080880008000000808800080000808800080000080880008000008088000800080088888888808888008880088808800008888800088000088888088000088888008800008888800880000888888008888888888888800888008880000000000000000000000000000000000000000000000000000000000000088000888888888008880088800888008888888000000088888880000088888880000888888888000088888888888000088888888808888888800088808888888888800008888880000088888888800088888888880008888888888808008888888880888888800888888888888888888000888888000008888808800000088808888800888888888880800888888888088888880088888008808808800008888888888000888888888800008888888808808888808808880888888888088888888888888800088888800000888888888800088800088880008888888888888888888888888000888888808888888800888880088888888000888888888800000880088880008888888888888888888888888800800888808888888880088888008888088880088000888800000008888888000888880088888888888888800000088800080888888888888888808888000888800000088888000000888888880088800000000000888880000000008888888088888888888888888888800088888000000000000000088888000008888000000000000000000000008888888808880000000000000"[i>>2]; // can be replace by i/4

Which generate this:

Map rendering

The map rendering wasn’t complexe at all, so I will not explain it here, just check the source and you will understand.
The tricky part was to change the sprite base on the Y position : if ( y < 4 ) rendering ground else rendering [?] cube.

Optimizing Space

Seems I know I will use JSCrush because just the sprite exceed the 1K, I did a lot of optimizations to gain bytes.
The idea was simple, try to repeat the same code multiple times to help the packer to pack bytes.

  • 150-16*j-0“, the -0 is not needed but added it to the code allow me to gain one byte (reason : there were multiple occurrences of “150-16*j-” in the code) (same as 150-16*j-16, it was at start 150-17*j).
  • (s=13,160)” before it was 150. I modify this part because there were a lot of occurences of 13,16 in my script.
  • j&&(i-5+x/13)% Another de-optimized part, the j was inversed in the check ecause used each time, it was better to not cache this operations.
  • Also, I don’t know if I’m the only one to think about it but JSCrush use variables, why not use the same variables to avoid recreating some others and gaining bytes ? So I used Y as a tick variable and $ as a look at variable. Which saved me 4 bytes.

Result ?


Best compression Ever ?

Source code

Leave a comment