August
16
2006
15:28
Kategorie:
Post Meta:

Wolfenstein 5k 

Ein sehr spartanischer Wolfenstein-Clone der mit 5KB JavaScript-Code auskommt. Hässlich, aber erstaunlich, dass das mit 5KB Code klappt!

Wolfenstein 5k

Nachtrag:

Ich habe eben in den FAQ nachgelesen, wie der Autor das gemacht hat. Das Programm nutzt geniale Tricks aus und verwendet sogar Raycasting (5KB Code !!!).

How are you rendering the graphics?

In most situations, dynamic rendering of graphics is confined to a server. For a fast-paced game, pixel-by-pixel manipulation of graphics on the client side is required. This game accomplishes this via two little-known browser tricks:

  • Most browsers can display not only GIF, JPEGs, and PNGs, but XBM images as well. XBMs are 1-bit black and white images, originally used within the X Windows System, that have a very simple format. Rather than being stored as binary data, an XBM file looks like C source code. This makes XBMs very easy to create dynamically.
  • IMG tags can accept Javascript urls in the SRC attribute, i.e. <IMG xsrc="javascript:javascript expression here">. The value returned by the Javascript expression is treated as data for the image.

The combination of these properties allows you to take an array containing image data, turn it into an XBM image, store it in a Javascript variable, and have it displayed in the browser. This is exactly what the game does each time it needs to update the display.

Unfortunately, neither Mac IE or Mozilla can render XBM images, so there’s no way to make the game work on those browsers using this rendering method.

How did you fit all this stuff in 5K?

By writing the code carefully, and compressing it. I wrote a Perl program to replace all the variable names with shorter versions, remove newlines, and replace constants with numeric equivalents when shorter.

I also minimized the use of Javascript keywords such as function, var, if/else. Short variable names were assigned to built-in objects such as document, window, and Math. I removed excess braces, used global variables when possible, and employed various other syntactic shortcuts to reduce the size of the source code to 5076 bytes. Combined with the 1-pixel red image at 43 bytes, the whole game fits into 5119 bytes, one byte short of the limit.

« Begriffsmonopole
Minette Walters – Im Eishaus »