I started developing the project as a game with the canvas element using phaser. But later decided it was much better with a table.
We Imagine as maze as a huge table with each border of each cell acting as a wall. We turn walls on and off to create a path inside the grid. However detecting which wall is open is difficult this way, also, it is difficult to make the maze editable, which I planned to do. As detecting clicks on a border is difficult.
So what do I mean by editable maze? Take a look at tinyjs.games/maze/make/ (The project is still under development so not all features of the maze work)
The Table Element Generation
- Each Cell is surrounded by 4 walls
- So even rows in the table (starting from 0) are wall rows
- Odd rows have 1 cell row and 1 wall row alternate
Take a look at this code:
- We have marked wall cells with wall class
- The joints between walls are marked as joint class
Add some css magic to make wall cells look like borders
We reduce the width of vertical wall cells, height of horizontal wall cells, and both width and height of joint cells
Making it clickable
Making it clickable is as easy as it goes, we edit the generateCell function in the code above to add a click event trigger on every wall cell, and simply taggle an
Explore the full code
Explore the full code at github.com/tinyjsgames/maze-generator/blob/master/js/table.js
In Part 2:
In Part 2 of this post that I will be posting next week, I will try to make the maze playable with a starting position , a final position and a small ball as player!