"Tweet-sized" JavaScript code

February 15, 2012 7:34 AM

140byt.es JavaScript games and programs, all written in 140 bytes (characters) or less. Example games include Snake, Tetris (very basic), Minesweeper (again, very basic). Note that the license for most of these is NSFW.
posted by Deathalicious (10 comments total)

I don't understand what's supposed to be 140 bytes. There's more javascript than that on most of those pages.
posted by empath at 8:00 AM on February 15

Ha! These are great. I love this kind of reductive problem-solving, and there's something especially appealing about taking self-contained game concepts and trying to break them down mechanically and algorithmically to their barest bones. There's something neat about that you-can-see-it-if-you-squint recognizability of a game even when it's been aggressively simplified.

One of my favorite programming experiences in retrospect was the couple weeks I spent in probably 2004, killing time at my market research job by writing very small game clones on my Palm IIIc using a little C-like language and compiler that would take source directly from the built-in text editor on the Palm. The default editor only supported 4K files; you could install other editors or work around that limit with includes if you wanted to, but that seemed like too much fuss and so I resolved to just fit the games into self-contained one-shot files.

And that's a lot less of a constraint than this, obviously; I could generally manage to get the games full-featured in terms of basic mechanics, could get simple black-and-white graphics made using hand-coded bitmaps, use some drawing primitives and text-blitting functions to create a proper playing field, etc. I did Tetris (which ran very slow), Moon Lander, Robots; I made an Othello clone that even had a rudimentary AI opponent (it would probably consistently beat a toddler). If I had the spare bytes I'd put in a title screen as well with brief instructions.

Most of the time I didn't even have to get into crazy variable obfuscation to make it work, though I kept the variable names quite short. (Inputing code with Grafiti is its own incentive to keep things compact.) The primary challenge was more in finding the simplest way to express the mechanical relationships between the moving parts of the game. That's can be a very fun challenge.
posted by cortex at 8:12 AM on February 15

I don't understand what's supposed to be 140 bytes. There's more javascript than that on most of those pages.

They have both annotated versions with whitespace and commentary and streamlined versions that reduce to properly silly one-liners. See for example index.js below annotated.js on the Snake example, which is this (linebreaks mine to avert horizontal scroll here):

function(a,b,c,d,e){a.unshift(b);c^a[0]&&a.pop();
for(b=d*d;b--;)e=[e]+"■ "[!~a.indexOf(b)&b!=c]+["\n"[b%d]];
return~a.indexOf(a[0],1)||e}

posted by cortex at 8:14 AM on February 15 [1 favorite]

So, I am at work and can't check... how the hell is the *license* not safe for work?
posted by maryr at 8:18 AM on February 15

Yeah, but if you look on the actual page:

(function(){
var size = 30;

var oldstep, step = -1;
document.onkeydown = function(e) {
var keyCode = (e || window.event).keyCode,
nextstep = [1,size,-1,-size][keyCode-37]; // Bind arrows to change snake direction
step = (nextstep == -oldstep) ? oldstep : nextstep; // Don't enable to turn Pi/2
}

var center, apple = center = size*(size*.5+.5); // Init apple to middle of level
var f,snakie = (f=function(c,i){return i?f(c,--i).concat(c):[]})(center,5); // Fancy fn to create snakie = [center,center,..] with length = 5

(function() {
var oldlength = snakie.length, next = (snakie[0]+(oldstep=step)+size*size)%(size*size),
game = snake(snakie, next, apple, size);
if (typeof game === "number") { // Snake hit himself: Print Game Over centered
document.getElementById( "snake" ).innerHTML += (f=function(i){return i?f(--i)+" ":""})(size*.5-5) + "Game Over";
} else {
document.getElementById( "snake" ).innerHTML = game; // Print the level
setTimeout(arguments.callee, 100); // loop the game
}
if (snakie.length !== oldlength) {
while (~snakie.indexOf(apple)) {
apple = Math.floor(Math.random()*size*size); // reposition apple, if it was consumed
}
}
})();

})();
posted by empath at 8:24 AM on February 15

@empath: I suspect the two programs do the same thing. One version is just sane, while the other is very, very clever. I don't see how the above one works though, but I'm sure some mefi who knows javascript will explain it.

However, I question how they are making a GUI in 140 bytes. Does it really count if you use an external library?
posted by Canageek at 8:30 AM on February 15

Ah, I misunderstood what you meant. Yeah, there's a distinction (made more explicitly on some of these than others) between the core game logic and the fully-functional demos with keyhandling and such. The Tetris entry explicitly disclaims this, for example:

The main logic to move blocks, detect collision, assign new blocks, remove full lines and render the layout are included. Excluded are keyboard controls and the final rendering.

Again, it's an exercise in reduction, and with as confining a constraint as 140 bytes that's going to mean reducing a complicated thing like a game more aggressively than may be possible if your focus is on a working interactive demo rather than a distillation of the core game logic as an end in itself.
posted by cortex at 8:32 AM on February 15

Folks were using the twitcode hashtag a while back to post tiny programs like a Mandelbrot set, a web server, an IP stack, and a game of hangman. Nice to see tiny programs are still going strong.
posted by hoppytoad at 8:34 AM on February 15 [1 favorite]

maryr, the license is the "DO WHAT THE FUCK YOU WANT LICENSE".
posted by Xoder at 10:05 AM on February 15

Darn it Xoder! My boss saw the naughty word in your comment and now I am typing this from my office's time out box.
posted by Winnemac at 10:25 AM on February 15 [1 favorite]