For fun and practise! Based on the Codewars Kata Maze Runner and the code I had written to solve the kata, I built a single page front end app which tests the users memory by showing a maze for 4 seconds and then asking for the directions to escape, with the aim to practise my JavaScript DOM, HTML and CSS.
Test your memory of course!
- On the web page you have an animated title, instructions and a play button
- Click Play! and a maze will appear for 4s
- The maze then disappears and a text field asking for direction comes up
- You have to remember the way out and input the directions to escape
- If you don't escape you can try again, if you do, you can play again!
To play please visit: https://memory-maze.herokuapp.com/
- JavaScript, HTML and CSS
- Node.js
- Express for the server and then hosted on Heroku
- Travis CI: automatically builds and tests code changes, for immediate feedback on the success of the change
- Coveralls: integrated with Travis CI to provide test coverage report
- Clone the repository
- Run
npm install
- Run
npm run test
-
There is only one, hardcoded maze so 'playing again' is a bit meaningless
-
Following user stories to be implemented:
As a player
So that I am always improving me memory
I would like lots of different mazes
As a player with a variable memory
So that I can choose a level appropriate to how I'm feeling
I would like the option small, medium and large maze
As a developer
So I do not have to store lots of mazes waste memory
I would like to generate the maze on click of the 'Play' button
- [] Won't let you press escape or an alert comes up if you press enter without entering anything
- [] Direction input doesn't have to be in capitals
- [] Invalid characters/non nsew letters to have an alert?
- [] Test the front end
- more CSS including animating frames
- how to integrate Travis CI and Coveralls to create a simple pipeline
- mocking in Jest
- strengthened DOM skills, through timeouts, creating elements
-
Integrating Travis CI/Coveralls
-
Deploying a server on Heroku