This is a demonstration of maze generation and solution using randomized depth first search. This webapp is made using React.
The web app is hosted at maze.ozansap.com.
- - Variable width and height of the maze
- - Complete the algorithm instantly
- - Progress the algorithm one step at a time
- - Play/pause the algorithm as an animation
- - Variable animation speed
- - Works on mobile
- A grid is created with each cell having 4 walls around it
- Randomized depth first search starts from top left cell
- Visited cells are connected and added to a stack
- When the head has nowhere it can move to, it backtracks by popping the stack until a legal move is found
- Steps 3 and 4 repeat until the visited cell count reaches total cell count
- Randomized depth first search starts from the first selected cell. The head can only move to connected cells
- Visited cells are added to a stack
- When the head has nowhere it can move to, it backtracks by popping the stack until a legal move is found
- Steps 3 and 4 repeat until the head reaches second selected cell
- - Adding more algorithms and comparing them
- - Allowing the user to solve the maze on their own
This is my second webapp. I used this project to learn React and get into component based web development. React development process is a lot user friendlier and intuitive compared to vanilla web development. Components and Props are similar to classes and Object Oriented Programming and thus more coherent.
I also wanted this website to properly work on mobile. I had to learn responsive design techniques and how to properly make use of CSS. However, it was harder than I expected to convert my existing design to work responsively. I had to redesign the website a second time after learning responsive design techniques. I plan on making my next projects mobile first. Mobile first development will make it easier to create dynamic webpages.
- React to have a more streamlined development experience
- create-react-app to generate and build the webpage
- sass to have cleaner CSS files