Question
The HTML page should be divided into four sections: A gallows section that will display a picture of the gallows and hanged man in stages.
The HTML page should be divided into four sections:
A gallows section that will display a picture of the gallows and hanged man in stages.
A strikes section that will display incorrect guesses.
A word section that will show the word to guess as it is slowly revealed.
A guess section that will contain a form where the player can type in their guess each round. Create the HTML elements you'll need and give them id attributes that will make them easier to select with CSS and JavaScript later - this game will be driven by event management and DOM manipulation. Note that there are 7 images in the images folder that you can use for the gallows section, corresponding to the number of strikes accrued. 2. The logic for this game will be fairly complex compared to everything you've done so far, but all of it should be familiar. The first thing you'll need to do in your JavaScript is create some variables that will track the game's state and we can grab the word to guess at the same time!). Add the following code to your script.js file: let word = prompt("Welcome to Hangman! Player 1, please enter a word for Player 2 to guess.").toUpperCase(); let revealed Letters = new Array (word.length); revealedLetters.fill(false); const maxStrikes = 6; let strikes = 0; let strikeLetters = new Array (maxStrikes); Let's break down what all of this code is meant to do. The first statement prompts the first player to enter a word for the second player to guess. The input is saved as all uppercase letters into the variable named word. Note the switch toUpperCase(): we want to always work in upper case letters to avoid confusing 'a' and 'A' as unequal. The next statement creates an array with as many elements as word has characters. Each index of revealed Letters will correspond to a character in word, and if revealed Letters[n] is truthy, then word[n] has been correctly guessed. The next statement starts every element in the array as false, meaning no letters have been correctly guessed yet. The maxStrikes variable holds how many strikes the second player can get without the game ending. The next variable, strikes, holds the current strikes the second player has, which starts at o. The last statement creates an array that will contain every letter that has been incorrectly guessed by the second player. We can use this array to display the letters to the user so they can see which incorrect letters they've already guessed. 3. You'll need the following four functions. Note that we have included helpful comments describing what each function should do. Add them to your script file: function drawStrikeLetters() { I should create a String from strikeLetters and put that into the content of some element } function drawWordProgress() { // should iterate over revealed Letters, and if the value at each index is truthy, print the corresponding letter from word. Otherwise, it should print a - } function drawgallows() { 1/ should update an element's sic attribute to point to "images/strike-" + strikes + ".png" } function processGuess(e) { e.preventDefault(); // prevent the form from trying to send information somewhere let guess; // assign to the value of the 's element, topperCase() if (strikes
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started