A-MAZE-ing!!! Free Online Maze Game
My son loves mazes, so naturally I built him a maze game! He actually designed levels 2, 3, and 4. I tweaked them a little bit so that they make a little more sense, but the designs are his alone! We can add more levels to our heart’s content – it’s pretty easy now that everything is setup.
The Tech Side
This game was built with the Phaser 3 JavaScript and HTML5 game development framework, and I used the Webpack asset bundler and Babel to enable developing with newer features of JavaScript. The game is served with a simple NodeJS server app. This is my default setup for quick online games. I actually put in a little extra time to take the best practices from my last few projects and combine them into a template that I can use for future projects. Hopefully it saves me more time than I spent creating the template itself!
The art assets were taken from the free collections by Kenney. Kenney makes a lot of good game art and some nice tools to help non-artists as well. Many thanks, Kenney! The music loops and sound effects are from some asset packs I got a while back through Humble Bundle. They have incredible deals on game assets every once in a while!
The maze levels were created inside a free tilemap editor called Tiled. You can easily “paint” tiles where you want them, and Phaser integrates with it very nicely.
I also stumbled upon a nice free online tool for interacting with sprites. An image atlas is a combination of an image file and a data file (usually JSON). The image file actually contains multiple images all stacked next to each other, and the data file (the atlas) tells Phaser where each smaller image is located within the larger whole. This is a pain to do manually, but the Atlas Packer for Phaser 3 does a lot of the work for you! Nice!
Controlling the character on a computer is pretty simple. W is up, A is left, S is down, and D is right. On a mobile device, you can touch anywhere on the screen and drag your finger like a virtual joystick to make the character move.
Screenshots
