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
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...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if input from user is empty -> get an error string variable if input is not empty -> use preg_match() to match the pattern $pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/"; -> if it's a matched, get a success string variable */           } ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT