Moon Sugar, a Puzzle-Platformer in JS

Around the beginning of the year, I was working my way through Wes Bos’s amusing course, JavaScript30. I’ve enjoyed the use of the browser DOM instead of endless JS library recommendations, and it has been great to solidify my JS skills.

The course also introduced me to some new syntatic structures and cool new whiz bangs from ES6. I had been learning JS from slightly older material produced by Douglas Crockford, and from a random mishmash of the usual W3Schools/MDN/Stack Overflow answers that googling tends to lead you to, and it was perfect timing to get a good look at some of the ES6 stuff.

At the same time, I started tinkering with my blog page here using some layout libraries produced by Metafizzy. I wanted more visual interest on my main page (sorry brutalism ilu, but COLOR!), and I also wanted a way to highlight my favorite content from my blog.

All those new JavaScript-flavored things smushed around in my brain and got me inspired to make another JS game.

The code is a bit messy. I started but did not finish refactoring to a fully object-oriented style, and I was learning ES6 while doing this, so there’s a wacky mix of old and new syntaxes. I think I’ll have some excellent opportunities coming up in the next few months to do a code review or some pair refactoring, hopefully with someone with better JS style and/or more ES6 know-how than me, so I am comfortable posting this version now and tidying up the code later.

I used metafizzy’s Packery to flow multiple canvas elements dynamically, and included the associated library Draggabilly to let the player actively manage the layout of the “room” canvases with drag-and-drop events. There are two players so that you can play local multiplayer co-op, and players can move from one canvas item to another by lining up the doorways as they move the canvases around. It’s a platformer-puzzle, and I think it’s really cool!

I made some of the art for this (the backgrounds), but most of the sprites came from the excellent Kenney.nl, and that was a fun addition. It was really nice to spend my time coding rather than spriting for this one.

Anyway, here is the game. I hope you give it a try.

Click this image to see MoonSugar in action