In this project, you'll create a word guessing game. Players will click letters from an onscreen keyboard to try to guess a random phrase. The player’s goal is to guess all the letters in the phrase. A player can keep choosing letters until they make five incorrect guesses. Letters guessed correctly will appear in the phrase. Letters guessed incorrectly will be counted at the bottom of the screen.
In this project, you'll create a browser version of “Wheel of Success”, a word guessing game where players will click letters from an onscreen keyboard to try to guess a random phrase.
Each time the player guesses a letter, you’ll need to compare the letter the player has chosen with the random phrase. If the letter is in the phrase, you’ll update the game board with the chosen letters.
A player can keep choosing letters until they make five incorrect guesses. If the letter they chose isn’t in the phrase, you’ll remove one of the player’s 5 guesses.
If the player completes the phrase before they run out of guesses, a winning screen will display. If the player guesses incorrectly 5 times, a losing screen will display.
A player can guess a letter only once. After they’ve guessed a letter, your programming will need to disable that letter.
I created a 'phrases' array that contains at least 5 different phrases as strings. The getRandomPhraseAsArray function then randomly choose a phrase from the array and splits that phrase into a new array of characters. The function then returns the new character array.
To set the game display, an addPhraseToDisplay function loops through the array of characters. Inside the loop, a list item is created for each character in the array. The character is put inside the list item, and appended to the #phrase ul in the HTML. If the character in the array is a letter and not a space, the function adds the class “letter” to the list item.
I added an event listener to the keyboard, using event delegation to listen only to button events from the keyboard. When a player chooses a letter, the “chosen” class is added to that button so the same letter can’t be chosen twice. The button is passed to the checkLetter function, and stored inside of a variable called letterFound.
The checkLetter function should get all of the elements with a class of “letter”, then loops over the letters and check if they match the letter in the button the player has just chosen. If there’s a match, the function adds the “show” class to the list item containing that letter, stores the matching letter inside of a variable, and returns that letter. If a match wasn’t found, the function returns null.
If the checkLetter function returns a null value, the player has guessed the wrong letter. In the keyboard event listener, after checkLetter is called, write a statement to check the value of the letterFound variable. If the value is null, remove one of the tries from the scoreboard. If you haven't created it yet, make sure you have a missed variable to store the state of the scoreboard (initialized to 0). When you remove a try from the scoreboard, make sure to increase the missed count by 1.
Each time the player guesses a letter, the 'checkWin' function checks whether the game has been won or lost. At the very end of the keyboard event listener, this function is run to check if the number of letters with class “show” is equal to the number of letters with class “letters”. If they’re equal, the overlay screen with the “win” class is displayed. Otherwise, if the number of misses is equal to or greater than 5, the overlay screen with the “lose” class is displayed.
To achieve the 'Extra Credit' grade, I created CSS transitions for each letter in the phrase display as they are revealed.
I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)