In JAVASCRIPT,

Create a simple "Rock, Scissors, Paper, Lizard, Spock" game in a web page where YOU play against the computer for a given number of rounds (specified by you).

Create a "web page" with the following components: An input field for the "number of rounds to play"

The "number of remaining" rounds should also be displayed somewhere on the screen.

A button to "Start" the game play.The function attached to this button can "setup" the rest of the game.

For example: initialize counters, show/hide other components, etc.

A set of buttons for the player to choose their play:

Rock

Scissors

Paper

Lizard

Spock

An output field (or area) where the computer displays it's play (the computer's choice).

(Same set as above)

Note: This does not have to be a "text field"; you may use an image placeholder if you like if you'd to incorporate additional graphics. The objective is to simply have a place on the screen where the user user can know what choice the computer actually made... text, graphics, emoji's, or whatever. This also applies the "user choice" buttons as well.

An output field which displays the result of the current round:

For example: Computer won with rock breaking scissors.

The game should end when the number of rounds specified at the beginning have been played. The "overall winner" should be displayed.

For example: Human wins after winning 3 of 5 rounds.

Example.html:

RSPLV

How many rounds:

---

Computer Chose:
Rounds Remaining:

Exampl

var gameData = { humanWins : 0, compWins : 0 };

// What beats what.... // For example: winMatrix['ROCK'] is the list of things that ROCK will beat. let winMatrix = { // TODO: Complete... ROCK: ['SCIS', 'LZRD'], PAPR: ['ROCK', 'SPOK'], SCIS: [] };

// Simple "Wrapper" to make getting page (HTML) // elements much more succinct. let get = id => document.getElementById(id);

// Called by the BODY's "onLoad" event to finish initializing the game elements. function initGame() { get("USER_CHOICE_BUTTONS").hidden = true; get("ROUNDS_TO_PLAY").disabled = false; get("START_BUTTON").disabled = false; }

// Called when the user clicks the "Start" button // to set up the actual game. function startGame() { var rtp = get("ROUNDS_TO_PLAY"); var rounds = parseInt(rtp.value); if (isNaN(rounds)) { alert("Must enter a number"); } else { get("USER_CHOICE_BUTTONS").hidden = false; get("ROUNDS_TO_PLAY").disabled = true; get("START_BUTTON").disabled = true; gameData.roundsRemaining = rounds;

console.log("TODO: Starting Game") } }

// Called whenever a "user choice" button is clicked. // TODO: Decrement the number of rounds remaining // TODO: Determine the winner (or tie) and update the "gameData" accordingly. // TODO: If there are no rounds remaining, end the game function userChoice(buttonObj) { console.log(buttonObj.innerHTML);

var hChoice = buttonObj.id; var cChoice = compChoice(); console.log(hChoice + " " + cChoice); // TODO: compare hChoice and cChoice to // determine winner of round. gameData.roundsRemaining--; get("ROUNDS_REMAINING").innerHTML = gameData.roundsRemaining;

if (gameData.roundsRemaining <= 0) { gameOver(); } }

// Called by the userChoice() function to get // the computer's choice. function compChoice() { //let tokens = ["ROCK", "PAPR", "SCIS"]; // This "dynamically" gets all of the game tokens from the "winMatrix". // SEE: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys var tokens = Object.keys(winMatrix); rndChoice = getRandomInt(0, tokens.length); return tokens[rndChoice]; }

// This function should return "HUMAN", "COMPUTER", or "TIE" // depending on who won the round. (You may also want to update // the "gameData" here as well.) function getRoundWinner(cChoice, hChoice) { //TODO: return 'HUMAN', 'COMPUTER', 'TIE'

if (cChoice === hChoice) return 'TIE' var winList = winMatrix[hChoice]; var isHumanWinner = winList.includes(cChoice); if (isHumanWinner) return 'HUMAN' else return 'COMPUTER' }

// Called from the "userChoice" function once // the game should end. function gameOver() { get("USER_CHOICE_BUTTONS").hidden = true; // TODO: Display overall winner and // game stats. console.log("TODO: Display Final Game Stats..."); }

// Stolen from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive }

e.js