Jump'N'Shoot!

By far the most fun and challenging demo to develop, Jump'N'Shoot is a bookmarklet that allows you to load a little spaceman into almost any page. Equipped with a laser blaster and a space suit, turn any webpage into a side-scrolling destruction fest by running across, jumping on, and shooting page elements.

Check it out! saberpeep.github.io/web-demos/jumpnshoot...

A bookmarklet is a bookmark that, when you click it, loads javascript code into whatever page you are on. Obviously some sites have blocked this functionality such as commerce and baking sites, as well as some random sites such as twitter, but most sites don't care and we can load and run fun javascript like this.


Even though I have spent a huge amount of time optimizing the code, some sites have too many elements for Jump'N'Shoot to handle in any current browser, so I have included a bit of code that limits the number of interactable elements to 500 of each type. Ignored platform elements will be faded in an attempt to communicate which you wont be able to stand on because they exceeded this limit.

In order to optimize the performance to a reasonable level, the code builds a cache of the positions and specific attributes of both platform elements (the ones you can stand on) and target elements (the ones you can shoot). Certain parts of this cache are updated upon resizing the window, (as to work with dynamic width and flowing pages), and this does actually take a second, so a quick stuttering after resizing the window is expected.

Jump'N'Shoot uses jQuery, and the code automatically detects and inserts jQuery if it is not present or a new enough version. A performance bug that took me a long time to track down was that older versions of jQuery were causing significant slowdowns in certain functions, thus the version check was added.

The bookmarklet itself was created with Peter Coles' bookmarklet creator, and is really only responsible for creating a script tag with a link to jumpnshoot.js from my github page and calling the start function. This allows easy updates to Jump'N'Shoot without re-generating the bookmarklet, and as such the end user will never have to update their bookmark.

The animations are handled via two sprite sheet images, rapidly updating the background image position. The character was drawn by myself in Autodesk Sketchbook referencing a simple walk cycle animation sheet.

Thanks to  conorbuck on github.com for the code to find the angle between two points.
Thanks to BenAlabaster on stackoverflow.com for the code to get the slope from one point and an angle in degrees.
Thanks to Peter Coles at mrcoles.com for the bookmarklet creator.
Thanks to Anders Tornblad on stackoverflow.com for the base for the script to dynamically load jQuery.
Thanks to Kyle Pennell at appendto.com for the base for the code for a js object with public and private functions
And thanks to NTL on stackoverflow.com for the E11 Math.trunc() workaround.