Application: Updated documentation:

Transcription

1 Spring 13 Maze Generator and Solver Albert Toledo, Warren Barksdale, Brooke Macklin, Anesha Bembury Application: Updated documentation: Hampton University CSC 252 Data Structures and Algorithms Dr. Yeng Hu

2 Team 8 A maze is a tour puzzle in the form of a complex branching passage through which the solver must find a route. This is a single page web application that generates and solves a maze. Motivation In computer science, we try to solve problems. Maze is a perfect problem to practice problem-solving skills. Not only solving a maze is a problem to solve but also creating one is a pretty complicated problem. As a project in the Data Structures and Algorithms class in Hampton University we are assigned to develop an application that will generate a random maze and solve it. Idea Maze is a very complex structure. In our application, we wanted maze to be seen as simple and clean as possible. Two dimensional and flat view with black borders and white background was the cleanest solution. We wanted to allow the user to have some kind of control in the program. We allow user to provide some input that will manipulate the generation of the maze: o Number of columns o Number of rows o Size of each cell o Complexity of the maze (low/ high) This makes the application more interactive. As mentioned above, we wanted the application to be single view. To allow the user input in the same screen, we decided to use a simple form and submission buttons. The platform The accessibility of our application is very important for us. That was a big factor when we chose the platform for our application. Web is one of the most accessible things in the world. So, we decided to make a web page for our application and store it in a

3 web hosting service so that it is accessible to anyone with a web browser and internet connection who has the link to our page. Programming Languages Today with the rise of the web development, there are various techniques and programming languages that allow you to develop web applications. We used HTML (Hypertext Markup Language) as our markup language to create the elements on the page. For styling the HTML elements, we used CSS (Cascade Style Sheets), which allow us to manipulate the style attributes of multiple HTML elements from a single file. Most importantly, for the logic behind our application we used JavaScript. The most important reason why we used JavaScript in our application is that we wanted to keep the application in one single page. In a single page application we don t really want to keep refreshing the page. This means we need to use a browser side language, so the code will run on the browser without refreshing the page. JavaScript is an ideal browser side language to manipulate the attributes and the styles of the HTML elements. Hosting Creating a web page is not enough to make it accessible to everyone on the web. We need to store it on a web-hosting server so that people around the world with Internet connection can access. We hosted our application in Justhost.com web hosting services under the domain of alberttoledo.com. The link to our application is Graphical User Interface Our application is a simple and easy to use maze generator and solver. The graphical user interface of the application consists of 2 fundamental components. The form where the user is allowed to enter the input:

4 And the generated maze after the user generates the maze. Both components are dynamic during the use of the application. The most important possible change in the form is that after a maze is generated, there appears a maze id, which is specific to the maze on the scree. The maze id is a permalink that allows the user to go to that specific maze anytime using the link. The most important dynamic change in the maze is however, the animation that appears during the solving process after the user clicks solve button in the form. While the maze is being solved, little dark blue breadcrumbs are being left to indicate the current cell that the solver is on. If the solver has to go back because it came to a dead end, the visited cells that are not on the current path get the gray breadcrumbs to make it easier to see for the user to see which cells are visited.

5 The Form The form for the input in our application is a <form> element. It has three <input> elements with type= text for number of the rows, columns and the cell size. It also has an <input> element with type= radio to choose whether the complexity of the maze is high or low. The form submission consists of two <button> elements. The form doesn t really have any submission actions, since we don t want to refresh the page during the application. So the action attribute of the form has the value javascript:, which indicates that the buttons of the form will call JavaScript methods. In our case, the Generate button calls the function build() from the maze.js file, and the Solve button calls the function solve() from the solve.js file. So, we don t really submit the form, but we use the current values in the input fields of the form when we operate JavaScript functions.

6 The Maze The maze component in our application consists of <div> elements. <div> elements in HTML are mostly used to organize other elements. But in our case, since the maze is empty and doesn t contain any text etc, we just used <div> elements to represent the maze, the rows, and the cells. The hierarchy of our HTML maze is: box maze mrow cell This means that there is a <div> element with id= box which serves as a container to contain all the elements that forms the maze. In the box element, there is another <div> element with id= maze which actually represents the maze itself. In the maze element there are several <div> elements with class= mrow. Each mrow elements represent a row in the maze. The number of the mrow elements depends on the input user gives in the Number of Rows part of the form. Lastly, in every row, there are several <div> elements with class= cell. Of course, we need to do something with the cells we have to make it look like a maze. We need something that will serve as the walls of the maze. Each <div> element in HTML has four borders: top, bottom, left and right. Borders exist regardless in every element, however sometimes they are visible and sometimes invisible. We use the CSS code to decide which cells will have which borders. To do this, we need the class attributes of the cells to specify which borders they should have visible. So, when generating the maze using the JavaScript code, we concatenate keywords to their class attribute such as top, right, nobottom etc. Using these class attributes we can control the border style of the cells from our CSS file.

7 Following is an example of the CSS code of a visible border. And the following is an example of the CSS code of an invisible border. In both examples, the border is 1px of size and solid. The only thing we change is the color, transparent or black, which makes it visible or invisible. What about the breadcrumbs that the application leaves on the visited cells to make the animation effect? In our CSS code, we have an image background for each cell by default. The image we use as the background is a simple dark blue square of the size 4x4 in.png format. This image background is what we use as our breadcrumbs. However, we don t see any breadcrumbs in the maze as it is generated, although the image background is by default. Here we use the trick of the background position. As you see in the code fragment, the position of the background image is set to -10px. Which means that the background is out of the borders of the element. 10 pixels out left of the element. This makes the illusion of no background. When our solver visits a cell, we change the background image position attribute to 50% 50% to center it and make it visible as you can see below. When our solver needs to go back because it came to a dead end, we switch the color of the breadcrumb to grey to make it clear that the visited cell is not in the right route. This is an illusion too. We actually set the background image to a completely new

8 image file. Since we already set the background image position value to 50% 50% when we first visited the cell, we don t need to change it again. Generation Algorithms Our application allows the user to choose one of the two complexity levels of the maze: high or low. The logic behind the two complexities lies in the algorithms used to generate the maze. Different algorithms generate different types of mazes. Some of them have longer walls going to dead ends; some of them have short pockets etc. We used Eller s Algorithm for the low complexity and the depth first search algorithm for the high complexity. Eller s Algorithm Assume that there all left-most cells have a left-wall and all right-most cells have a right wall. 1. Create the first row. No cells will be members of any set 2. Join any cells not members of a set to their own unique set 3. Create right-walls, moving from left to right: A. Randomly decide to add a wall or not If the current cell and the cell to the right are members of the same set, always create a wall between them. (This prevents loops) If you decide not to add a wall, union the sets to which the current cell and the cell to the right are members. 4. Create bottom-walls, moving from left to right:

9 A. Randomly decide to add a wall or not. Make sure that each set has at least one cell without a bottom-wall (This prevents isolations) If a cell is the only member of its set, do not create a bottom-wall If a cell is the only member of its set without a bottom-wall, do not create a bottom-wall 5. Decide to keep adding rows, or stop and complete the maze A. If you decide to add another row: a. Output the current row b. Remove all right walls c. Remove cells with a bottom-wall from their set d. Remove all bottom walls e. Continue from Step 2 B. If you decide to complete the maze. Add a bottom wall to every cell a. Moving from left to right: If the current cell and the cell to the right are members of a different set: i. Remove the right wall ii. Union the sets to which the current cell and cell to the right are members. iii. Output the final row Depth First Search Algorithm Make the initial cell the current cell and mark it as visited While there are unvisited cells 1. If the current cell has any neighbors which have not been visited 1. Choose randomly one of the unvisited neighbors 2. Push the current cell to the stack 3. Remove the wall between the current cell and the chosen cell 4. Make the chosen cell the current cell and mark it as visited 2. Else if stack is not empty 1. Pop a cell from the stack

10 3. Else 2. Make it the current cell 1. Pick a random cell, make it the current cell and mark it as visit Solving Algorithm The solution code uses the same depth-first search algorithm as the generator, leaving a trail of breadcrumbs as it goes and rolling them back up when it hits a dead-end. As mentioned above, when visiting the cells we set the position of the background image to center to make it visible. The operation that our solver code does, doesn t take a time that would allow the user to see the process, as it happens very quick. To give the animation effect and let the user see the process of solving the maze, we used a timer, which allows the browser to refresh the display in every step. Maze ID One of the most useful features of our application is that every random generated maze has an id, which allows the user to generate the exact same maze later. Every time we generate a maze, we use an xor function that will create a string from the information of the maze generated. This information includes everything that makes the maze unique from the user input such as number of rows and columns to the random generated information, which makes the maze unique. We display this id as a link in the same box as the input form. The link URL has the maze id on it after a question mark, which allows us to access it using JavaScript code. So, every time we generate a maze, we first check if there is an id stored in the URL and if there is, then we extract the maze information from the URL using the reverse of the xor function we used to generate the id.

11 Bugs and the Future Reference As all software does, our application has some bugs and possible improvements. Bug #1 One of the bugs we have is the form validation. If there is any value missing in the form, the program still tries to generate the maze and gets stuck. The page needs to be refreshed in order for the program to work properly again. Bug #2 Maze id problem. FIXED The maze id had an incorrect link where the file name as wrong.