i made snake in a bookmarklet

2025-02-07

thanks to the current bitsy jam theme i've been on a bit of a snake kick... and anyway, as the title of this post says, i made snake in a bookmarklet!

here it is:

snakelet

to play:

if you're curious about how the program was written, read on :)

most bookmarklet URLs start with javascript: which tells the browser to run the rest of the URL text as javascript on the current page. this is what i've used for the other bookmarklets i've made recently, since i wanted them to be able to interact with the user's current open webpage.

however, it's also possible to make a bookmarklet using a data URL such as data:text/html - this tells the browser the rest of the URL text is an HTML document. the advantage of this for making a bookmarklet game is that it provides a blank canvas. there's no existing webpage obscuring your game's graphics, you can intercept all the window key events without breaking anything, etc.

at this point you have the full toolkit of HTML/CSS/JS at your disposal - the sky is the limit! or at any rate, the maximum URL length of your web browser is.

that said, i did decide to impose some loose constraints on myself: i only used a handful of HTML tags, ~18 browser APIs, a single canvas, a single audio channel, and four keys for input. where possible, i leaned into the inherent properties of the browser as a medium: for example i left the canvas at its default size of 300 by 150 pixels, and i relied on the default frame rate of window.requestAnimationFrame() rather than do any delta time calculations. in general, i tried to keep it short and sweet in the spirit of something like a pico-8 postcart. the size of the final program came in at 2.9kb - smaller than the size of the default bitsy game (3.3kb) or a standard atari 2600 cartridge (4kb).

i'm pretty happy with how it came out! if you'd like to read the source code in full, here it is: