Checkout the Live Version of the Project!
HTML5, CSS3, JavaScript, Matter
A responsive, JavaScript focused project which allows users to maneuver a blue ball to the square goal at the end of the maze. Upon winning, the user will see a success message.
-
Download the full package, select the Code button, choose the "Download ZIP" option.
-
Requires use of Matter.js - Review documentation here.
- Important features in the documentation required for physics: world, engine, runner, render, body.
-
CDN can be found here - type matter js to find script.
-
Toggle the maze with the a(left), d(right), w(up), and s(down) keys.
| Challenges | Outcomes within Project |
|---|---|
| How do we generate a maze? | Set up a tree data structure + use recursion to implement simple algorithm. |
| How are we going to draw a maze? | Matter.JS grid system can be used to draw the maze onto a canvas element. |
| How do we make keys control the ball? | Matter.JS allows key presses to be mapped so that movement can occur on shapes. |
| How do we detect when the ball touches goal? | Matter.JS detects collisions between different shapes & report them to us as events. |
- Create a grid of cells.
- Pick a random starting cell & iterate it.
- Build a randomly-ordered list of neighbors for that cell.
- If a neighbor has been visited previously, remove it from the list.
- For each remaining neighbor, move to it and remove the wall between those cells.
- Repeat for new neighbor.
- We need border walls to prevent shapes from falling off the page.
- See shapes.js as sample idea to build border walls and shapes.
- Add a loading page that tells users how to maneuver the maze. Users must use the a(left), d(right), w(up), and s(down) keys.
- Add a modal that allows users to reset the game. The game already randomizes the maze upon refreshing.
Dany Chheang dany.chheang@gmail.com