Faulty Rocket is a type writting game which was created to help users improve upon their typing skills. This game was implemented within a week and created using vanilla JavaScript, HTML5, and CSS.
Start Screen
Run Screen
- Typewriting interface which indicates the user's input in real time
- Virual Keyboard shows the user's key strocks in real time; excluding special characters
- Run data is posted after user completes a quote.
- The Typwriting interface calculates the WPM in order to lauch the rocket
- Async animations within the canvas
- A rotation of chill house music at user's convience
- As soon as the timer and quote is rendered, start typing the quote within the input box
- The user must correctly complete the quote in order to retrive his or her results
- There is 5 different levels each with their own wpm threshold
- The user has 3 tries to complete a level
- The goal is to get the rocket to space
The forumula used to calculate the net WPM is [(totalChars/5) - errors] / time(min).
- Word Count _ A word is considered a word if it has more than 5 characters _ The character count is determined after retriving the quote from the qutoable api _ The information is passed to the game class
- Time _ The timer starts as soon as the quote is rendered _ The time is calculated by creating a new Date instance and constanly subtrating the start date with the current date _ This provides a more accurate time span
- Error Count _ Each character and space within the quote belongs to its own span element _ I am consistantly looping through each element to check if that span element includes the 'inccorect' class attribute _ If so, I add the index of that node list array into my error array, and ensure the error was not counted twice _ I retrive the length of the error array and set to my error count placeholder which stores the max error count for that specific run
The above data is passed to the TypeWrittingConsole class in which is calculates the net WPM.
The WPM data is passed to the Rocket class in which the rocket utilizes the information to perform the animation
In order to show the user's keystrockes in real time, I utitlize a keydown and keyup event listener. The event listeners are constantly added and removing a class attribute.
- Improve upon the current architecture of the game _ DRY up the code more
- Implement a formula which determines the rocket's travel distance using the next WPM _ Currently the rocket travels based on preset bounds _ The rocket travel is not as dynamic as it could be
- Improve upon the animations _ the rocket and level backgrounds have to the potential to be better
- Change the UI of the site
- Reduce the severity of the error handling