2023-11-07 14:52:42 -07:00
|
|
|
|
2023-11-07 20:33:42 -07:00
|
|
|
let pScore = 0;
|
|
|
|
|
let cScore = 0;
|
2023-11-07 22:30:37 -07:00
|
|
|
let ps;
|
2023-11-07 20:33:42 -07:00
|
|
|
const buttons = document.querySelectorAll('button');
|
2023-11-07 22:18:03 -07:00
|
|
|
const msg = document.querySelector("#msg");
|
2023-11-07 22:30:37 -07:00
|
|
|
const score = document.querySelector("#score");
|
|
|
|
|
const player = document.querySelector("#player");
|
|
|
|
|
const computer = document.querySelector("#computer");
|
2023-11-07 20:33:42 -07:00
|
|
|
|
2023-11-07 21:24:44 -07:00
|
|
|
|
2023-11-07 20:33:42 -07:00
|
|
|
buttons.forEach((button) => {
|
|
|
|
|
button.addEventListener('click', () => {
|
2023-11-07 22:40:11 -07:00
|
|
|
ps = button.id;
|
|
|
|
|
game();
|
2023-11-07 20:33:42 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2023-11-07 21:24:44 -07:00
|
|
|
|
2023-09-30 10:23:21 -06:00
|
|
|
function getComputerChoice(){
|
2023-09-30 10:36:53 -06:00
|
|
|
let compAnswer = Math.floor(Math.random() * 3) + 1;
|
|
|
|
|
|
|
|
|
|
if (compAnswer === 1) {
|
|
|
|
|
return "rock";
|
|
|
|
|
} else if (compAnswer === 2) {
|
|
|
|
|
return "paper";
|
|
|
|
|
} else {
|
|
|
|
|
return "scissors"
|
|
|
|
|
}
|
2023-09-30 10:23:21 -06:00
|
|
|
}
|
|
|
|
|
|
2023-11-07 21:35:33 -07:00
|
|
|
|
2023-09-30 10:23:21 -06:00
|
|
|
function playRound(playerSelection, computerSelection){
|
2023-09-30 10:47:14 -06:00
|
|
|
p = playerSelection.toLowerCase();
|
|
|
|
|
c = computerSelection.toLowerCase();
|
2023-09-30 10:23:21 -06:00
|
|
|
|
2023-09-30 10:52:40 -06:00
|
|
|
if (p === c) {
|
2023-09-30 10:47:14 -06:00
|
|
|
return "tie";
|
2023-09-30 10:52:40 -06:00
|
|
|
} else if (p === "rock") {
|
2023-09-30 10:47:14 -06:00
|
|
|
if (c === "paper") {
|
|
|
|
|
return "player loses";
|
|
|
|
|
} else { //scissors
|
2023-09-30 10:52:40 -06:00
|
|
|
return "player wins";
|
2023-09-30 10:47:14 -06:00
|
|
|
}
|
2023-09-30 10:52:40 -06:00
|
|
|
} else if (p === "paper") {
|
2023-09-30 10:47:14 -06:00
|
|
|
if (c === "scissors") {
|
|
|
|
|
return "player loses";
|
|
|
|
|
} else { //rock
|
2023-09-30 10:52:40 -06:00
|
|
|
return "player wins";
|
2023-09-30 10:47:14 -06:00
|
|
|
}
|
2023-09-30 10:52:40 -06:00
|
|
|
} else if (p === "scissors") {
|
2023-09-30 12:33:29 -06:00
|
|
|
if (c === "rock") {
|
2023-09-30 10:52:40 -06:00
|
|
|
return "player loses";
|
2023-09-30 12:33:29 -06:00
|
|
|
} else { //paper
|
2023-09-30 10:52:40 -06:00
|
|
|
return "player wins";
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-09-30 10:23:21 -06:00
|
|
|
}
|
|
|
|
|
|
2023-11-07 21:35:33 -07:00
|
|
|
|
2023-11-07 20:28:51 -07:00
|
|
|
function game() {
|
2023-11-07 20:33:42 -07:00
|
|
|
if (pScore < 5 && cScore < 5) {
|
2023-09-30 12:08:01 -06:00
|
|
|
const cs = getComputerChoice();
|
2023-11-08 01:04:09 -07:00
|
|
|
const play = playRound(ps, cs);
|
|
|
|
|
let psCap = ps.charAt(0).toUpperCase() + ps.slice(1);
|
|
|
|
|
let csCap = cs.charAt(0).toUpperCase() + cs.slice(1);
|
2023-09-30 12:08:01 -06:00
|
|
|
|
|
|
|
|
switch (play) {
|
|
|
|
|
case "player loses":
|
2023-11-08 01:04:09 -07:00
|
|
|
cScore ++;
|
2023-11-07 22:30:37 -07:00
|
|
|
computer.textContent = cScore;
|
2023-11-08 01:04:09 -07:00
|
|
|
msg.textContent = "You lose! " + csCap + " beats " + ps + ".";
|
2023-09-30 12:08:01 -06:00
|
|
|
break;
|
|
|
|
|
case "player wins":
|
2023-11-08 01:04:09 -07:00
|
|
|
pScore ++;
|
2023-11-07 22:30:37 -07:00
|
|
|
player.textContent = pScore;
|
2023-11-08 01:04:09 -07:00
|
|
|
msg.textContent = "You win! " + psCap + " beats " + cs + ".";
|
2023-09-30 12:08:01 -06:00
|
|
|
break;
|
2023-11-07 21:58:19 -07:00
|
|
|
default:
|
2023-11-08 01:56:49 -07:00
|
|
|
msg.textContent = "It's a tie! You both played " + cs + ".";
|
2023-09-30 12:08:01 -06:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-07 21:24:44 -07:00
|
|
|
if (pScore === 5 || cScore === 5) {
|
2023-11-07 22:10:15 -07:00
|
|
|
endGame();
|
2023-11-07 21:24:44 -07:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-07 21:35:33 -07:00
|
|
|
|
2023-11-08 00:20:16 -07:00
|
|
|
function endGame() {
|
2023-11-07 22:10:15 -07:00
|
|
|
let winner = (pScore > cScore) ? true : false;
|
2023-11-08 00:05:03 -07:00
|
|
|
const newGame = document.createElement("button");
|
|
|
|
|
const newDiv = document.createElement("div");
|
2023-09-30 10:23:21 -06:00
|
|
|
|
2023-11-07 21:35:33 -07:00
|
|
|
if (winner) {
|
2023-11-07 22:32:41 -07:00
|
|
|
msg.textContent = "You won the game! Great job!";
|
2023-09-30 12:59:56 -06:00
|
|
|
} else {
|
2023-11-07 22:32:41 -07:00
|
|
|
msg.textContent = "You lost the game. Better luck next time!";
|
2023-09-30 12:59:56 -06:00
|
|
|
}
|
2023-11-08 00:05:03 -07:00
|
|
|
|
|
|
|
|
newGame.textContent = "Play Again?";
|
|
|
|
|
newGame.classList.add("button");
|
2023-11-08 00:20:16 -07:00
|
|
|
newGame.addEventListener("click", resetGame);
|
2023-11-08 00:05:03 -07:00
|
|
|
newDiv.appendChild(newGame);
|
|
|
|
|
msg.appendChild(newDiv);
|
2023-11-08 00:20:16 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetGame() {
|
|
|
|
|
pScore = 0;
|
|
|
|
|
cScore = 0;
|
|
|
|
|
player.textContent = "0";
|
|
|
|
|
computer.textContent = "0";
|
|
|
|
|
msg.textContent = "";
|
2023-11-07 21:24:44 -07:00
|
|
|
}
|