I need a round javascript counter and a counter counter for my game
I am trying to teach myself coding using codeacademy.com. I decided to try and apply some of what I had learned to create web rock, paper, scissors, lizards, spoka. The code for the game works well, I know there are probably better ways to do this, but I figured it out later, but I want to add a score for the player and computer plus a round counter. Can someone tell me how to get the counters to work, I've tried a couple of things but can't figure it out.
Once I have javascript working, I am going to create a one page site to practice HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<script>
var rock = "rock"
var paper = "paper"
var scissors = "scissors"
var lizard = "lizard"
var spock = "spock"
var compScore = 1
var playerScore = 1
function roundUp() {
round += 1
}
function compare(choice1, choice2) {
var round = 1
var computerChoice = Math.random()
if (computerChoice <= 0.2) {
choice2 = "rock";
} else if(computerChoice <= 0.4) {
choice2 = "paper";
} else if (computerChoice <= 0.6) {
choice2 = "scissors";
} else if (computerChoice <= 0.8) {
choice2 = "lizard";
}
else {
choice2 = "spock";
}
if (choice1 === choice2) {
document.getElementById("winner").innerHTML = "Round tied!";
} else if (choice1 === rock) {
if (choice2 === paper) {
compScore += 1
document.getElementById("winner").innerHTML =
"Paper covers rock, computer wins";
}
else if (choice2 === scissors) {
playerScore += 1
document.getElementById("winner").innerHTML =
"Rock breaks scissors, you win";
}
else if (choice2 === lizard) {
playerScore += 1
document.getElementById("winner").innerHTML =
"Rock crushes lizzard, you win";
}
else {
compScore += 1
document.getElementById("winner").innerHTML =
"Spock vaporises rock, computer wins";
}
} else if (choice1 === paper) {
if (choice2 === rock) {
document.getElementById("winner").innerHTML =
"Paper covers rock, you win";
playerScore += 1
} else if (choice2 === scissors) {
document.getElementById("winner").innerHTML =
"Scissors cut paper, computer wins";
compScore += 1
} else if (choice2 === lizard) {
document.getElementById("winner").innerHTML =
"lizard eats paper, computer wins";
compScore += 1
} else {
document.getElementById("winner").innerHTML =
"Paper disproves spock, you win";
playerScore += 1
}
} else if (choice1 === scissors) {
if (choice2 === rock) {
document.getElementById("winner").innerHTML =
"Rock breaks scissors, computer wins";
compScore += 1
} else if (choice2 === paper) {
document.getElementById("winner").innerHTML =
"Scissors cut paper, you win";
playerScore += 1
}else if (choice2 === lizard) {
document.getElementById("winner").innerHTML =
"Scissors decapitate lizard, you win";
playerScore += 1
} else {
document.getElementById("winner").innerHTML =
"Spock smashes scissors, computer wins";
compScore += 1
}
} else if (choice1 === lizard) {
if (choice2 === rock) {
document.getElementById("winner").innerHTML =
"Rock crushes lizzard, computer wins";
compScore += 1
} else if (choice2 === scissors) {
document.getElementById("winner").innerHTML =
"Scissors decapitate lizard, computer wins";
compScore += 1
} else if (choice2 === paper) {
document.getElementById("winner").innerHTML =
"Lizard eats paper, you win";
playerScore += 1
} else {
document.getElementById("winner").innerHTML =
"Lizard poisons spock, you win";
playerScore += 1
}
} else {
if (choice2 === rock) {
document.getElementById("winner").innerHTML =
"Spock vaporises rock, you win";
playerScore += 1
} else if (choice2 === scissors) {
document.getElementById("winner").innerHTML =
"Spock smashes scissors, you win";
playerScore += 1
} else if (choice2 === paper) {
document.getElementById("winner").innerHTML =
"Paper disproves spock, computer wins";
compScore += 1
} else {
document.getElementById("winner").innerHTML =
"Lizard poisons spock, computer wins";
compScore += 1
}
}
document.getElementById("choice1").innerHTML = choice1
document.getElementById("choice2").innerHTML = choice2
document.getElementById("computerChoice").innerHTML = computerChoice
document.getElementById("playerScore").innerHTML = playerScore
document.getElementById("compScore").innerHTML = compScore
document.getElementById("round").innerHTML = round
roundUp()
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<h3>Round</h3>
<p id="round"></p>
<h4>Player Choice</h4>
<p id="choice1"></p>
<h4>Player Score</h4>
<p id="playerScore"></p>
<h4>Computer Choice</h4>
<p id="choice2"></p>
<h4>Computer Score</h4>
<p id="compScore"></p>
<h4>And the winner is</h4>
<p id="winner"></p>
<button type="button" onclick="compare(rock, choice2)">Rock</button>
<button type="button" onclick="compare(paper, choice2)">Paper</button>
<button type="button" onclick="compare(scissors, choice2)">scissors</button>
<button type="button" onclick="compare(lizard, choice2)">lizard</button>
<button type="button" onclick="compare(spock, choice2)">Spock</button>
</body>
</html>
source to share
You need to create round
as a global variable, as you did, with the help of rock
, paper
, scissors
etc. Identify the same side
var round = 0;
and your function roundUp
should work as expected.
EDIT . You also forgot to end your statements with semicolons. And I guess you don't need to send choice2
as a parameter on button click when you set it inside your function.
source to share
You need to take var round = 1
out of compare () because every time you run the compare function, round falls back to reset back to 1. Instead, use var round = 0 with your other variable declarations instead. Also, I put the script at the bottom to make sure the page elements are loaded before your script. I highly recommend using semicolons after variable declarations. http://jsfiddle.net/ja4m0qoL/
source to share
You need to run a function that will update the playerScore as you would for the round counter when the player makes a selection. I would pass a parameter that tells roundUp () which player has scored:
roundUp(winner){
round++; //increments round
if(winner === computer){
compScore++; //increments score
document.getElementById("compScore").innerHTML = compScore; //updates HTML
}
else if(winner === player){
playerScore++; //increments score
document.getElementById("playerScore").innerHTML = playerScore; //updates HTML
}
};
source to share