I want to improve my knowledge about Data Structures. In this project It will help me to to this. I am using matter.js library.
First thing I try is understanding the Matter.js library. To do so, I create a box, and understand using gravity and isSticky property. It helped me to create border for my maze. When I did not give isSticky property to my box, the box was dissappearing. Now however, I insert four more rectangles to create borders, and give them 'isSticky: true' property.
Now the box is not dissappearing from the screen.
However, I cannot interact the object with mouse. I added 'Mouse' and 'MouseConstraints' properties to do that.
Using 'MouseConstraints' allowed me to interact with object which is not 'isStatic: true'. Green dot represents 'force' that we use to box. I will use gravity and interaction with mouse element when the user end up finishing the maze correctly.
With the help of maze algorithm and rendering, the app can generate randomized maze. In addition, software developer can easily edit settings.
Now, the walls are red and the ball's color is green. When the user finished the maze successfully, the maze will fall apart, and maze will tell to the user that he/she has won. Hence, I edited the gravity for the falling apart side, and hide the winning message.
