Question

*To the guy who answered last time. You're not following the directions. Please follow specific directions...

*To the guy who answered last time. You're not following the directions. Please follow specific directions below.*

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: (Each selection must have its own button).

Must write output using (.innerHTML)

Rock

Scissors

Paper

Lizard

Spock

An output field where the computer displays it's play. (Same set as above)

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.

(Starting javascript we are given)

function startGame() {
    var rtp = document.getElementById("ROUNDS_TO_PLAY");
    alert("Playing rounds: " + parseInt(rtp.value));
}
function userChoice(buttonObj) {
    alert(buttonObj.innerHTML);
}

(This is the starter HTML to use)

<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="console.log('RSPLS Loaded')">
<h1>RSPLS</h1>
<form action="#">
How many rounds:
<input id="ROUNDS_TO_PLAY" type="number" min="1" max="100" placeholder="Rounds?" />
<button onClick="startGame()">Start!!!</button>
</form>
<hr />
<form action="#">
<button id="ROCK" onClick="userChoice(this)">Rock</button>
<button id="SCIS" onClick="userChoice(this)">Scissors</button>
<button id="PAPR" onClick="userChoice(this)">Paper</button>
   <button id="LZRD" onClick="userChoice(this)">Lizard</button>
   <button id="SPOK" onClick="userChoice(this)">Spock</button>
</form>
</body>
</html>

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

ANSWER:

  • I have provided the properly commented code in both text and image format so you can easily copy the code as well as check for correct indentation.
  • I have provided the output image of the code so you can easily cross-check for the correct output of the code.
  • Have a nice and healthy day!!

CODE TEXT

  • HTML CODE

<html>
   <head>
       <meta charset="UTF-8">
   </head>
   <body onload="console.log('RSPLS Loaded')">
       <h1>RSPLS</h1>
       <form action="#">
           How many rounds:
           <input id="ROUNDS_TO_PLAY" type="number" min="1" max="100" placeholder="Rounds?" />
           <button onClick="startGame()" id="startButton">Start!!!</button>
       </form>

       <!--Division for displaying counters-->
       <!--Hidding content untill game starts, using display-->
       <div id="counterDisp" style="display:none">
           <!-- Creating table to show counters-->
           <table border="1px solid black" style="border-collapse: collapse; text-align: center;">
               <tr>
                   <th>Chance #</th>
                   <th>Chances Left</th>
                   <th>Total Wins</th>
               </tr>
               <tr>
                   <td id="chances"></td>
                   <td id="chancesLeft"></td>
                   <td id="wins"></td>
               </tr>
           </table>
           <!--Division to display current round winner-->
           <div id="currentRound"></div>
       </div>

       <hr />

       <!---->
       <!--Hidding content untill game starts, using display-->
       <form action="#" id="choiceForm" style="display:none">
           <!--Button choice message-->
           <p>Click your choice:</p>

           <!--Choice buttons-->
           <button id="ROCK" onClick="userChoice(this)">Rock</button>
           <button id="SCIS" onClick="userChoice(this)">Scissors</button>
           <button id="PAPR" onClick="userChoice(this)">Paper</button>
           <button id="LZRD" onClick="userChoice(this)">Lizard</button>
           <button id="SPOK" onClick="userChoice(this)">Spock</button>
       </form>

       <!-- Division to final winner-->
       <div id="finalWinner"></div>

       <!-- JavaScript-->
       <script type="text/javascript" src="rpsIndex.js"></script>
   </body>
</html>

  • JAVASCRIPT CODE (rpsIndex.js)

// Defining four Global Counters;
// a. Chances Played; b. Chances Remaining; c. Chances win
// d. computerwins
var chance;
var chanceR;
var userWins;
var comWins;

// function startGame
function startGame() {
   // fetching # of rounds
var rtp = document.getElementById("ROUNDS_TO_PLAY");
// rtp vlue
var rtpValue = rtp.value;
  
// if rtpValue not >0
if((rtpValue<=0) || (rtpValue=="")){
   alert("Playing rounds Must be > 0!! ");
   return;
}
  
// otherwise
   // Disabling Start button and ROUNDS_TO_PLAY textbox
   document.getElementById("startButton").disabled = true;
   rtp.disabled = true;

   // enabling counter display and choice buttons
   document.getElementById("counterDisp").style.display = "block";
   document.getElementById("choiceForm").style.display = "block";

   // initializng three Global Counters;
   // a. Chances Played; b. Chances Remaining; c. Chances win;
   // d.computer wins
   chance = 1;
   chanceR = rtpValue-1;
   userWins= 0;
   comWins = 0;

// displaying counters in table using displayCounter function
displayCounter(chance,chanceR,userWins);

  
}

function userChoice(buttonObj) {
   // fetching users choice
   var userResponse = buttonObj.innerHTML;

   // fetching computers random response
   // defining list of responses
   var choiceList = ["Rock","Scissors","Paper","Lizard","Spock"];
   // fetching random index from 0 to 4 using math.floor and random
   var randomInd = Math.floor(Math.random() * 5);
   // computer response
   var comResponse = choiceList[randomInd];

   // calling function whoWin to fetch current chance winner
   var winner = whoWin(userResponse,comResponse);

   // if winner = 0; its draw
   if(winner == 0){
       // no body wins
       // displaying draw message
       // defining message
       var message="Human: "+userResponse+"; Computer: "+comResponse+"; Its DRAW!!";
       document.getElementById("currentRound").textContent=message;
   }
   else if(winner == 1){
       // user wins
       userWins += 1;
       // displaying user win message
       // defining message
       var message="Human: "+userResponse+"; Computer: "+comResponse+"; User WINS!!";
       document.getElementById("currentRound").textContent=message;
   }
   else{
       // computer wins
       comWins += 1;
       // displaying user win message
       // defining message
       var message="Human: "+userResponse+"; Computer: "+comResponse+"; User LOSE!!";
       document.getElementById("currentRound").textContent=message;
   }

   // changing counter values
   chance = chance+1;
   chanceR = chanceR-1;

   // displaying changes using function displayCounter
   displayCounter(chance,chanceR,userWins);

   // if chanceR is less than 0; displaying final result
   // and hidding choice buttons
   if(chanceR<0){
       // hidding buttons
       document.getElementById("choiceForm").style.display = "none";
       // final winner
       if(userWins>comWins){
           // winning message
           var message = "Human wins after winning "+userWins+" of "+(chance-1);
           // display final message
           document.getElementById("finalWinner").innerHTML=message;          
       }
       else if(userWins<comWins){
           // losing message
           var message = "Human lose after scoring "+userWins+" of "+(chance-1);
           // display final message
           document.getElementById("finalWinner").innerHTML=message;          
       }
       else{
           // draw message
           var message = "Its draw after scoring "+userWins+" of "+(chance-1);
           // display final message
           document.getElementById("finalWinner").innerHTML=message;  
       }
   }


}

// function to display counter values in table
function displayCounter(chance,chanceR,wins){
   // textContent replacing of table data
   document.getElementById("chances").textContent = chance;
   document.getElementById("chancesLeft").textContent = chanceR;
   document.getElementById("wins").textContent = wins;
}

// function whoWin, with user and computer response, to tell who wins
// output => 0: if draw; 1: user win; 2: com win
function whoWin(userResponse,comResponse){
   // defining javascript dictionary, having key with one choice
   // and value as list of choices the key can defeat
   var winOverChoices = {
       "Rock":["Lizard", "Scissors"],
       "Scissors":["Paper", "Lizard"],
       "Paper":["Rock", "Spock"],
       "Lizard":["Spock", "Paper"],
       "Spock":["Scissors", "Rock"]
   };

   // if its same choice, its draw
   if(userResponse == comResponse){
       return 0;
   }
   // else if userResponse beats comResponse
   // i.e. if in list of winOverChoices of userResponse have comResponse
   // using includes method of list to do the same
   else if(winOverChoices[userResponse].includes(comResponse)){
       // user win returning value 1
       return 1;
   }
   else{
       // com Win returning value 2
       return 2;
   }
}

CODE IMAGE

  • HTML CODE

  • JAVASCRIPT CODE (rpsIndex.js)

OUTPUT IMAGES

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
Using Notepad++, copy the code presented in Listing 26.2, "A Form That Displays Data in a...
Using Notepad++, copy the code presented in Listing 26.2, "A Form That Displays Data in a Pop-Up Window," in the subsection "Displaying Data From a Form" in the section "Accessing Form Elements With JavaScript" in Ch. 26, "Working with Web-Based Forms of Sams Teach Yourself HTML, CSS and JavaScript All In One. Save the file using the name Week4ValidationExample.html. Test your code and debug as necessary. Change the name of the display() function to myDisplay() where my is your first...
For this assignment you'll be creating an application that has the user input a subtotal, tax...
For this assignment you'll be creating an application that has the user input a subtotal, tax rate and tip percentage and then displays the sales tax, tip amount and the total. You'll use JQuery instead of the getElementByX functions AND you will display all messages on the page (no alert or prompt boxes) The starter file is based off of the Lab 2 sales_tax application. Feel free to borrow code from your lab solution but realize you will need to...
In the previous assessment, you used a static set of named variables to store the data...
In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT