Makaila Akahoshi [coordinator] - In charge of logistics, coordination and communication with group and professor. The coordinator is also responsible for assembling an implementation plan and the project report.
Matt Henrickson [implementer] - Responsible for the technical implementation of the project and demonstrating the efficacy of the implementation.
Natalie Forman [documentor] - Assembles the in-code documentation, external documentation, website, the description of solution in the project report
We created five ASP generated mazes that are visualized and playable using HTML, CSS, and Javascript. First we developed the rules and constraints for the solvable mazes in our proposed Greek mythology universe using clingo and ansProlog. Next we developed a front-end interface to visualize the generated maze. For the final part in our project we made the mazes playable using Javascript events. Our mazes were created at different difficulty levels, each following a different Greek Mythology theme. Rather than just having one requirement to solve the maze we created mazes that were a bit more complex and required a user to complete a task in order to finish the maze
In comparison to our initial plan we went above and beyond and created five solvable, complex mazes instead of just three. We also reached our ‘bonus goal’ and made each maze playable by the user. We were unable to incorporate a timer in the final website, but overall the website works without having the user enter in a file. While testing our visualization we ran into some issues where the user was required to refresh the browser in order to view the correct maze, however we were able to solve that issue and now everything works as initially planned.
We completed five different mazes based on three different type of levels, easy, medium, and hard. The logic and constraints will be slightly different for each of the mazes based on the level. To create the mazes we programmed the logic in AnsProlog and used clingo as our solver to execute our program.
Easy: The player is trapped in a labyrinth with the deadly minotaur. The player must get the sword, slay the minotaur, and exit the labyrinth. The size of the maze will be 10x10. The player will always spawn at (1,1) and the exit will always spawn at (10,10). The sword and the minotaur will both be accessible. You will only be able to confront the minotaur when you have the sword, if you try before that you will lose.
Medium: The player is Hermes, messenger of the gods. Of course, Hermes needs his winged sandals to travel, which he has lost! The player must find their winged sandals and then use them to traverse over “sky” tiles to retrieve an important message and then reach the exit. The size of the maze will be 15x15. The player will always spawn at (1,1) and the exit will always spawn at (15,15). The player will have to use the sandals to reach the exit but may or may not need them to get the message. The player cannot finish the maze without the message. If the player tries to go over a sky tile without their sandals, they lose.
Hard: You are an adventurer who has been trapped in the underworld and is trying to escape. Hades has caught wind of this and has donned his cap of invisibility to try to stop you. You must retrieve the magical key to the underworld and then use it to unlock the exit and then proceed to the exit without getting caught by Hades who will be invisible to you. The size of the maze will be 15x15. The player will always spawn at (1,1) and the exit will always spawn at (15,15). If the player runs into Hades or tries to escape the underworld before unlocking the exit, they will lose.
For the visualization of the mazes we exported the output we received from clingo and saved the output as variables in our Javascript file. Prior to using variables we were using text files and imported the files on the website using a filereader function. However, that became tedious when testing and also wasn’t very user friendly, so we chose to save the output as variables instead. For the website we designed the website so that the user can choose the level they want and toggle between the levels using buttons, rather than input a different text file. Based on what button the user clicks on we display the corresponding maze using HTML, CSS, and Javascript. The website was coded in HTML and CSS and the actual board was displayed using Javascript. For the Javascript portion of this project we parsed through the given string that was outputted from clingo, and based on the level, assigned background images to the divs on the page which served as our canvas. The overall themes of our website was based on Greek Mythology and the obstacles and tasks that are generated in our mazes also reflected Greek Mythology as well.
As an additional bonus we made our mazes playable by adding javascript event handlers to the tiles on the board. Based on the position of the cursor it determines the users place on the maze. All of the logic that we discussed and that was programmed into our logic was included in the play aspect of the maze. When making it playable the most challenging part was testing the mazes and verifying that all of the logic was there. Since there are multiple ways that a user can finish the task but still lose the game we had to take that into account when programming the play aspect of the maze. Another challenge was the variation in the levels, since every level has different logic and variables we couldn’t simply reuse function as we would have liked to. Each maze was unique and required it’s own function in some cases.
The main technologies that we used in this project were HTML, CSS, JavaScript, and Clingo. We used Clingo to generate mazes based on certain constraints depending on what level was being generated. We then parsed that output and visualized it using HTML, CSS, and JavaScript. The main change of plans that we had was when we chose to have the outputs from Clingo saved as variables rather than having the text files read automatically. The main problems that we encountered were in the transfer of data from Clingo to JavaScript. It was difficult because we divided the work so one of us worked on the ASP in Clingo and the other two worked on getting the visualization working, so we had to be sure to keep a strong line of communication. While this was a challenge, it was also a triumph because we ended up communicating very effectively. Another problem was a lack of planning that caused us to have to do some extra work to accommodate for variables we had not originally planned for.
We planned to share code through a GitHub repository. There would be a detailed readme file with what our project is and how the implementation works. In the implementation of our project we planned to make commits and detailed comments of the code so that each member would know what changes had been made.
We met the GitHub documentation criteria by using GitHub for code sharing. There is also a README with instructions on how to use the logic and explaining the project. Our commit messages tried to be detailed but we could have improved by committing more frequently so changes were done in smaller segments.
The ASP code is commented based on what was deemed explanatory and appropriate. The Javascript code is commented following JSDoc guidelines. This was our first time using JSDoc for commenting so there may be some inconsistencies and there is definitely room for improvement. Other improvements that could have been made were to comment consistently while developing rather than post-development. Also understanding JSDoc ahead of time and making sure to follow proper GitHub protocols.
We planned to determine whether our mazes are solvable, complex, and logically correct by using our Javascript visualization to verify that the mazes perform like our english logic. From the visualization we would be able to see whether a task object is being blocked by walls or whether the end of the maze is reachable by the user or not. The visualization would also serve as a way to compare the difficulty of the levels. To test whether our mazes are difficult enough we would comparing the time it takes to generate the mazes.
For the most part our project was successful. We were able to use Clingo to generate five mazes that match the rules that we had established in English. The only example that we tried to get to work for multiple mazes were the medium levels. For an unknown reasons, the finish tile is being covered by a sky tile every time. However, when ran with a random frequency of 1, the level works just as planned. Everything concerning the visualization of the levels is running as planned.
Time it takes to generate each kind of maze:
Easy: 0.359s
Medium: 0.531s
Hard: 1.250s
For the checkpoint, we planned to have a basic website completed with most of the answer set programming done. We would also have a basic pseudo code of the visualization completed.
Our reach goal was to make the maze playable and include a timer that would see how fast the user completed the maze. Our final bonus points result was making the maze playable but not including the timer. This is because the scope of making it playable was larger than we expected and we did not anticipate the number of variables we would have. We feel that we deserve all 100 bonus points in that the mazes are complex, the visualization is both functional and appealing and the mazes are interactive and playable.
Coordinator: Makaila Akahoshi
Implementor: Matt Hendrickson
Documentor: Natalie Forman