This JavaScript program will let the user play Rock, Paper, Scissors against the computer. If the player wishes to play the game, he should press a button to begin play. The program will prompt the player to input a choice of “rock” for Rock, “paper” for Paper, “scissors” for Scissors, "Lizard" for lizard, and "spock" for Spock. The computer “player” will generate a random number to indicate it’s choice.
The program will then display who won the game (computer or player) along with the choices made by the computer and player.
The issue I am having is that when var "UserChoice" puts in their answer inside of the text-box and they click "Submit" the screen goes blank. I also don't know how to neatly put down my "IF" statements without having a massive list. I am extremely new to JavaScript so my skills and abilities are at a low level. Thank you for the help!
CSS
body {
background-color: #1D6EB0;
}
h1 {
font-family: Cambria, sans-serif;
font-size: 45px;
color: #FFFFFF;
}
button {
background-color: #FFFFFF;
padding: 10px 25px;
}
input[type=text] {
-webkit-transition: width 20.4s ease-in-out;
transition: width 20.0s ease-in-out;
padding: 12px 20px;
margin: 8px 0;
}
input[type=text]:focus {
width: 40%;
}
HTML
<head>
<title> RPSSL </title>
</head>
<div style="width:1331px; height:62px ;border:6px; background-color:#263035">
<center><h1>Rock, Paper, Scissors, Lizard, and Spock</h1></center></div>
<center>
<img src="http://ift.tt/2g9xN80"
width= "350" height= "350">
<br>
<input type="text" placeholder="Make your choice...">
<br>
<button type="submit" value="Submit" id="user" onclick="Game();" > Good Luck!
</center>
</body>
</html>
JavaScript
var rock = 1;
var paper = 2;
var scissors = 3;
var spock = 4;
var lizard = 5;
var ComputerChoice = Math.floor(Math.random() * 5 + 1);
var UserChoice = document.getElementById("user").value;
function Game() {
if (UserChoice === ComputerChoice) {
document.getElementById("user").value = "<h2>Its a tie! Your opponent also chose </h2>" + ComputerChoice;
}
if (ComputerChoice == 1) {
(UserChoice == 2, 3)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 4, 5)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (ComputerChoice == 2) {
(UserChoice == 5, 3)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 1, 4)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (ComputerChoice == 3) {
(UserChoice == 4, 1)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 2, 5)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (ComputerChoice == 4) {
(UserChoice == 5, 2)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 3, 1)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (ComputerChoice == 5) {
(UserChoice == 3, 1)
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
} else {
(UserChoice == 2, 4)
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}
if (UserChoice == "") {
document.getElementById("user").innerHTML = "<h2> Uhhh, you didnt win or lose. You forgot to TYPE!!!"
}
}
Aucun commentaire:
Enregistrer un commentaire