What it does
Maze 2: Electric Boogaloo is a game that randomly generates mazes that must be solved using the mouse without touching walls.
How I built it
This project can essentially be split into two parts: the maze generator and the graphics/game engine. The most complicated component of this was implementing the maze generation. We chose to generate a braid maze so that there would be very few dead ends. Our algorithm started by adding walls around the border of the maze. Then, we added walls at random within the maze without causing an dead ends. This created a maze-like structure of walls that did not necessarily have a solution and could have certain sections completely cut off from the rest of the maze. To connect these sections, we first identified each section with a unique id. Then, we went through every wall in the maze and checked if it separated two cells of different labels. If it did, we deleted the wall and changed all of the connected cells to a single id. Once all the cells had the same label, the maze was entirely connected and was finished. In order to punish the user for crashing into walls, we took advantage of the fact that the background was black. In order to check if the mouse had collided with a wall, we simply checked if the color at the mouse position was not black.
Challenges I ran into
It was difficult to get the maze generation algorithm working because we went into it without fully understanding how we would approach implementation, so we had to rewrite our program structure multiple times. We originally stored the maze as a simple array of all the wall segments. Because it was completely unorganized, we had to search the array every time we wanted to manipulate a certain wall piece. We then stored the maze as a grid of cells, with 4 values each to show where the cell had walls, but this was inconvenient because there was no way of directly referencing walls. Also, one cell's top wall was another one's bottom, and so handling these duplicate walls was confusing and inefficient. We finally settled on the structure in place now: two arrays containing all the possible walls. This was the best way because we could refer to specific walls, and then find the walls around with a function of the index, which was much better than searching an array and did not have to handle duplicate walls. For the graphics, we used an html5 canvas. This allowed us to draw directly to the screen and manage the ui at a relatively low level. The only downside to using a canvas over just html elements such as divs or spans was that a canvas's pixel size is fixed. This meant that if the window were ever resized, it would not be as simple as automatically adjusting relative positions for html elements. We had to recalculate the coordinates of everything we wanted to draw based on the new dimensions. Once this was completed, however, it did not interfere with any of the other components and was very reliable.
Accomplishments that I'm proud of
I am proud of getting the maze generation algorithm and the graphics to work without any outside code or libraries. Everything was done by us 100% from scratch during the weekend.
What's next for Maze 2: Electric Boogaloo
If we had had more time we would have made a better ui, added enemies and items, and implemented a scoring system.