Skip to content

Added the reset button to reset the game. app.js #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sanket-825 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added the reset button to reset the game. app.js #37

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 68 additions & 47 deletions StonePaperScissors/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,84 @@
let userScore = 0;
let compScore = 0;
let compScore = 0;

const choices = document.querySelectorAll(".choice");
const msg = document.querySelector("#msg");
let choices = document.querySelectorAll(".choice");
let msg = document.querySelector("#msg");
const resetButton = document.querySelector("#reset-btn");

const userScorePara = document.querySelector("#user-score");
const compScorePara = document.querySelector("#comp-score");

const genCompChoice = () => {
const options = ["rock", "paper", "scissors"];
const randIdx = Math.floor(Math.random() * 3);
return options[randIdx];
};
const options = ["rock", "paper", "scissors"];
const randmIndx = Math.floor(Math.random() * 3);
return options[randmIndx];
}

const drawGame = () => {
msg.innerText = "Game was Draw. Play again.";
msg.style.backgroundColor = "#081b31";
};
const Draw = () => {
console.log("Game was Draw");
msg.innerText = `Game Was Draw! Play Again.`
msg.style.backgroundColor = "#081b31";
}

const showWinner = (userWin, userChoice, compChoice) => {
if (userWin) {
userScore++;
userScorePara.innerText = userScore;
msg.innerText = `You win! Your ${userChoice} beats ${compChoice}`;
msg.style.backgroundColor = "green";
} else {
compScore++;
compScorePara.innerText = compScore;
msg.innerText = `You lost. ${compChoice} beats your ${userChoice}`;
msg.style.backgroundColor = "red";
}
};
if(userWin){
console.log("You Win!");
userScore++;
userScorePara.innerText = userScore;
msg.innerText = `You Win!, Your ${userChoice} beats ${compChoice} `;
msg.style.backgroundColor = "green";
}
else{
console.log("You Loose!");
compScore++;
compScorePara.innerText = compScore;
msg.innerText = `You Loose!, ${compChoice} beats your ${userChoice}`;
msg.style.backgroundColor = "red";
}
}

const playGame = (userChoice) => {
//Generate computer choice
const compChoice = genCompChoice();

if (userChoice === compChoice) {
//Draw Game
drawGame();
} else {
let userWin = true;
if (userChoice === "rock") {
//scissors, paper
userWin = compChoice === "paper" ? false : true;
} else if (userChoice === "paper") {
//rock, scissors
userWin = compChoice === "scissors" ? false : true;
} else {
//rock, paper
userWin = compChoice === "rock" ? false : true;
console.log(`user choice is: ${userChoice}`)
// Genereate Computer Choice
const compChoice = genCompChoice();
console.log(`computer choice is: ${compChoice}`)

if(userChoice === compChoice){
//Draw Game
Draw();
}
showWinner(userWin, userChoice, compChoice);
}
};
else{
let userWin = true;
if(userChoice === "rock"){
//scissors, paper
userWin = compChoice === "paper" ? false:true;
}
else if(userChoice === "paper"){
// rock, scissors
userWin = compChoice === "scissors" ? false:true;
}
else{
// rock, paper
compChoice === "rock" ? false : true;
}
showWinner(userWin, userChoice, compChoice);
}
}

choices.forEach((choice) => {
choice.addEventListener("click", () => {
const userChoice = choice.getAttribute("id");
playGame(userChoice);
// console.log(choice);
choice.addEventListener("click", () => {
const userChoice = choice.getAttribute("id")
// console.log("choice was clicked", userChoice);
playGame(userChoice);
})
})

resetButton.addEventListener("click", () => {
userScore = 0;
compScore = 0;
userScorePara.innerText = userScore;
compScorePara.innerText = compScore;
msg.innerText = "Play your move";
msg.style.backgroundColor = "rgba(208, 106, 208, 1)";
});
});