Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Introduction to Wireless and Mobile Systems

Authors: Dharma P. Agrawal, Qing An Zeng

4th edition

1305087135, 978-1305087132, 9781305259621, 1305259629, 9781305537910 , 978-130508713

More Books

Students also viewed these Programming questions

Question

Evaluate the limit using continuity. lim tan(x - y) (x,y) (2,3)

Answered: 1 week ago