Techdegree Project 6

Game Show App

View on GitHub

Summary

This project required creating a browser version of “Wheel of Success”, a word guessing game. The site utilised Javascript to generate a random phrase that players try to guess by entering different letters into the program.

Details

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.

Using Javascript, you’ll create an array of phrases and write functions to choose a random phrase from that array, split the phrase into letters, and put those letters onto the game board.

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.

Solution

To complete this challenge, the JavaScript gets the elements needed from the HTML and saves them to variables, one for the 'qwerty' keyboard and one for the selected phrase. It creates a 'missed' variable, initialized to 0, that you’ll use later to keep track of the number of guesses the player has missed (remember, if the player guesses wrong 5 times, they lose the game)

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.

Extra Credit

To achieve the 'Extra Credit' grade, I created CSS transitions for each letter in the phrase display as they are revealed.

I also added a button to the “success” and “failure” screens that reset the game. This required making sure the Javascript recreated the buttons in the keyboard, generated a new random phrase, and set the number of misses back to zero.

Profile picture of Thomas Moore

Get in touch

I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)