Week 8: Hangman

What are the main action and processes of Hangman?

• What is the user doing? (clicking buttons, typing text, choosing options)
• What changes on the page when they interact?
• What needs to be stored?
• What is the “win,” “result,” or “end state” of the experience?

Write the Logic in Natural Language (Numbered Steps) on a sheet of paper or notebook

Write the program logic as a numbered list, ideally grouped around main functions. Each line should be one clear action or decision. Avoid code words at first. Just describe what happens.

     A) startGame()  // setup a fresh round, same as a reset

     B) guessLetter()  // handle the user's action (click or Enter)

     C) updateGameState(letter)  // modify the core game data based on the guess

     D) updateDisplay()  // reflect current state in the UI

     E) checkWinLose()  // determine end conditions

  

• Set-up: What are the HTML/DOM elements? What variables and arrays are need?
• Start state: what does the page show when it loads? What processes are needed to start the game?
• Inputs: what does the user provide (click, input text, choice)?
• Process: what does the program calculate, compare, or decide?
• Output: what changes appear on the page?
• Repeat or End: what happens again until the game stops? What needs to be checked?

Mark the Steps That Need Variables, Conditionals, Arrays, Loops, and Functions

Next to your numbered steps, label with simple tags:

• [LET/CONST] stored variable for DOM elements as well as values that are tracked in the game?
• [ARRAY] what lists or potential (empty) lists are needed
• [FUNC] what stored steps are going to be used multiple times in the game? Remember that funtion can be called within other functions.
• [IF] a decision tree (if correct, if count is 0, if something matches) for responses to certain checked conditions.
• [LOOP] repeated actions, to check an array for example

NOTE: Your Hangman game will likely need to use the following JavaScript actions:

• Math.floor() / Math.random() — select a random word from an array
• secretWord.split("") — turn a word into an array of letters
• shownWord.push("_") — add underscores to build the hidden word array
• input.value — get the letter typed by the user
• input.value = "" — clear the text box
• input.focus() — put the cursor back in the text box
• letter.toLowerCase() — make the typed letter lowercase so it matches the word
• triedLetters.includes(letter) — check if a letter has already been guessed
• return — stop a function early
• shownWord.join(" ") — combine array into spaced string for display
• triedLetters.join(", ") — display guessed letters as a comma list
• shownWord.join("") === secretWord — check if the whole word has been revealed
• input.disabled = true — turn off the text box or button (false turns it back on)

As you label your steps, think carefully: Is this storing data? Repeating something? Making a decision? Updating the screen? That thinking process is more important than the final syntax.

Translate to “Code-Like” Pseudocode

Now type your steps as a comment at the top of your script area, so they sound closer to code, but still readable. Use short lines that map cleanly into JavaScript later.

• Example: “Set score to 0.”
• Example: “When user clicks Submit, check answer.”
• Example: “If answer is correct, add 1 to score.”
• Example: “Show the next question.”

SET-UP (Before the game starts)
1. Create an array of possible words (wordsArray).
2. Store DOM elements in variables (so you can update the page):
   - wordDisplay (where the underscores/letters show)
   - message (where feedback shows)
   - lettersTriedDisplay (where tried letters show)
   - remainingDisplay (where guesses left show)
   - input (text box for the letter)
   - guessBtn (Guess button)
   - resetBtn (New Word button)
3. Create game-state variables (values that will change during play):
   - secretWord (string)
   - secretLetters (array)
   - shownWord (array)
   - triedLetters (array)
   - guessesLeft (number)
4. Connect event listeners:
   - guessBtn click -> guessLetter()
   - resetBtn click -> startGame()
5. Call startGame() to begin the first round.

A) startGame()  // set up a fresh round (also runs when New Word is clicked)
1. Clear the input and message, and turn the input and Guess button back on.
2. Pick a random secret word from the list.
3. Split the word into a letters array.
4. Create a shownWord array of underscores (same length).
5. Reset letters tried and guesses left.
6. Call updateDisplay().
7. Focus the input box.

B) guessLetter()  // runs when Guess is clicked
1. Read the letter from the input (make it lowercase).
2. If it was already tried, show a message and stop.
3. Add the letter to triedLetters.
4. Call updateGameState(letter).
5. Call updateDisplay().
6. Call checkWinLose().
7. Clear the input and focus it for the next guess.

C) updateGameState(letter)  // change the game data
1. Loop through the secretLetters array.
2. If the letter matches, reveal it in the shownWord array.
3. Track whether at least one match was found.
4. If no match, subtract one from guessesLeft.

D) updateDisplay()  // show the current state on the page
1. Show shownWord (with spaces between letters).
2. Show triedLetters (as a comma list).
3. Show remaining guesses.
4. Clear any old message.

E) checkWinLose()  // check for the end of the round
1. If shownWord.join("") equals secretWord, show a win message.
2. Else if guessesLeft equals 0, show a lose message with the word.
3. In either case, disable the input and Guess button.