Use "w", "s", "a", "d" to move up, down, left or right
Maze solved!
Congratulations!
This is another procedural map (or maze in this case) creation model. First, a class of Cell was created, where it stored attributes like position (x, y) and walls check with Boolean.
class Cell {
constructor(x, y) {
this.x = x;
this.y = y;
this.walls = [true, true, true, true]; // top, bottom, right, left of cell
this.visited = false;
}
}
Then using “for loop” across canvas’s width and height, new instance of class Cell was introduced with each pixel position
and pushed to an array grid. Then the player and the target was spawned on a random position independently. Player and
target was spawned first cause that way it’s not needed to keep checking wall collision, which could lead to much longer
or even an infinite loop.
After that setting a cell size variable, whole canvas was again iterated with another for
loop. In this case, we did not need to check whole grid, rather each cell width or height interval. For example, if our
cell size is 20 and array of
grid = [(x0, y0),
(x1, y0),
.... ,
(x1, y1),
(x1, y2)
.... ,
(xn, yn)]
, we iterate like following :
For the 1st row along canvas width: [0,0] to [20, 0] to [40, 0] and so on
For the 2nd row along canvas width: [0,20] to [20, 20] to [40, 20] and so on
....
...
While within the iteration, we check a random side (top, bottom, right or left) of each pixel position with sidewalls[Math.floor(Math.random() * sidewalls.length)];. Except the checked side,
all other sides will be used to make walls. This is done by setting false to “walls” attribute of class Cell. This also ensures
that there will be always an open path in a square cell. After that all had to do is draw the elements and implement the player
movement controls.
My workflow for writing this code