A fun (seriously, go try it!) 2D platformer game, built from scratch in pretty much all JavaScript. It’s wrapped in a fullstack website (deployed on heroku). Chock-full of cool features, I made this project with 3 friends from Fullstack Academy over the course of 2 sleepless weeks. It was made a while back, but it’s still my favorite project to date.
I worked significantly on all parts. But the 'ghost' feature (playing against your old playthrough) was primarily mine. I overcame storage size and browser framerate syncing issues during the recording and playing back of different playthroughs, and managed to build the ghost player code without at all modifying the code controlling the main player.
One of the things I'm proudest of is making a declarative set of higher-order functions that made route creation for CRUD operations in Express+MongoDB easy, and often one easily understood line. I still use the code when I make a server with using that tech.
router.post('/', mustBeLoggedIn, createDoc('Level','creator'));
( createDoc example for level creation route )
Due to the variable rate at which browsers request animation frames, two playthroughs grow more and more out of sync as time passes. This is problematic as the main mechanism of moving the Ghost player is by playing back the recorded actions of the player's previous playthrough (which assumes the exact same framerate). A lack of synchronicity would lead to Ghost Gus improperly walking off edges or into spikes or missing rotations. It was horrible.
In order to fix the syncing without taking up too much space per recorded playthrough, I took snapshots of the main player's coordinates and orientation in the game level at fixed intervals during the playthrough. I then forced the Ghost onto those coordinates with the proper orientation at those intervals during the playback. It took some experimentation to get the interval just right so that it wasn't too short (would take up excessive space), nor too long (there would be a noticeable 'jump' as the Ghost suddenly appears in a new spot), but in the end it worked really well.