The web page has the followings: Two drop zones: Player Throw, and Computer Thro
ID: 3669545 • Letter: T
Question
The web page has the followings:
Two drop zones: Player Throw, and Computer Throw
Three images that are draggable: Rock , Scissors, and Paper. The images should be stacked vertically below the drop zone "Player Throw".
There is one button that starts the game. Once the button is clicked, the user has one second to drag one of these three images to his drop zone "Player Throw".
Once one-second timer is expired, the computer will pick its own throw randomly (one of these images: Rock , Scissors, and Paper).
Your javascript will then evaluate who is the winner of this game. The result should be "Player wins", "Computer wins", or "Tie". And the result should be displayed in an element on the web page.Rules:
Rock wins against scissors
Scissors wins against paper
Paper wins against Rock
YOU HAVE TO DESIGN THE CODE BY USING HTML5, JAVASCRIPT AND CSS. PLEASE DESIGN YOUR CODE AND REPLY TO ME AS EARLY AS POSSIBLE. THANK YOU.
Explanation / Answer
<div id="console-log"></div>
* Simple "Rock, Paper, Scissors" Game *
***************************************/
var consoleLine = "<p class="console-line"></p>";
// Note: This doesn't handle arrays very well (PTD)
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
// Get the human player's choice
var userChoice = prompt("Do you choose rock, paper or scissors?");
// Generate computer's choice
var computerChoice = Math.random();
if (computerChoice < 0.33) {
computerChoice = "rock";
} else if (computerChoice > 0.66) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
// Helper function to see if the both choices match two particular values (i.e.
// one of the choices is one value and the other choice is the other value. This
// helps simplify and make the winning logic easier to read.
var areThey = function (value1, value2, choice1, choice2) {
if (value1 === choice1 && value2 === choice2) {
return (true);
} else if (value1 === choice2 && value2 === choice1) {
return (true);
}
return (false);
}
// Determine which of the choices made is the winner or if there is a tie
var compare = function (choice1, choice2) {
if (areThey("paper", "rock", choice1, choice2)) {
return ("paper wins");
} else if (areThey("paper", "scissors", choice1, choice2)) {
return ("scissors wins");
} else if (areThey("scissors", "rock", choice1, choice2)) {
return ("rock wins");
}
return ("it's a tie!");
}
// Show the results
console.log(compare(userChoice, computerChoice));
{
.console-line font-family: monospace;
margin: 2px;
}
---------------------------------------------------------------------------------------------------------------------------------------------------
This is the CSS
javascript.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.