154 lines
5.0 KiB
JavaScript
154 lines
5.0 KiB
JavaScript
//1.function called getComputerChoice
|
||
//that will randomly return either ‘Rock’, ‘Paper’ or ‘Scissors’.
|
||
|
||
//2.function that plays a single round of Rock Paper Scissors.
|
||
//The function should take two parameters - the playerSelection and computerSelection -
|
||
//and then return a string that declares the winner of the round like so:
|
||
//"You Lose! Paper beats Rock"
|
||
//Make your function’s playerSelection parameter case-insensitive
|
||
//(so users can input rock, ROCK, RocK or any other variation).
|
||
|
||
//3.Important note: you want to return the results of this function call, not console.log() them.
|
||
//You’re going to use what you return later on,
|
||
//so let’s test this function by using console.log to see the results:
|
||
|
||
//4.Write a NEW function called game().
|
||
//Call the playRound function inside of this one to play a 5 round game
|
||
//that keeps score and reports a winner or loser at the end.
|
||
//At this point you should be using console.log() to display
|
||
//the results of each round and the winner at the end.
|
||
//Use prompt() to get input from the user. Read the docs here if you need to.
|
||
//Feel free to re-work your previous functions if you need to.
|
||
//Specifically, you might want to change the return value to something more useful.
|
||
//Feel free to create more “helper” functions if you think it would be useful.
|
||
|
||
function getComputerChoice(){
|
||
const number = Math.floor(Math.random() * 3);
|
||
let computer = number;
|
||
|
||
if (number === 0){
|
||
computer = "rock";
|
||
}
|
||
else if (number === 1){
|
||
computer= "paper";
|
||
}
|
||
else{
|
||
computer= "scissors";
|
||
}
|
||
|
||
return computer;
|
||
}
|
||
|
||
const btns = Array.from(document.querySelectorAll('.btn'));
|
||
btns.forEach(btn => btn.addEventListener('click', graphicGame));
|
||
|
||
let player = 0;
|
||
let computer = 0;
|
||
const container = document.querySelector("#content");
|
||
let score = document.createElement("p");
|
||
|
||
score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;
|
||
container.appendChild(score);
|
||
|
||
function graphicGame(player1, player2){
|
||
if (player < 5 && computer < 5) {
|
||
let party = playRound(player1, player2);
|
||
|
||
if(party === true){
|
||
player +=1;
|
||
}
|
||
else if(party === false){
|
||
computer +=1;
|
||
}
|
||
score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;
|
||
|
||
let resultScore = document.createElement("p");
|
||
|
||
if(player === 5){
|
||
resultScore.textContent = "You win!";
|
||
container.appendChild(resultScore);
|
||
btns.forEach(btn => btn.disabled = true);
|
||
|
||
}
|
||
else if(computer === 5){
|
||
resultScore.textContent = "Computer wins!";
|
||
container.appendChild(resultScore);
|
||
btns.forEach(btn => btn.disabled = true);
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
function playRound(playerSelection, computerSelection){
|
||
let state = null;
|
||
|
||
computerSelection = getComputerChoice();
|
||
playerSelection = playerSelection.target.dataset.word;
|
||
//playerSelection = playerSelection.toLowerCase();
|
||
|
||
let result = document.createElement("p");
|
||
if (playerSelection === "rock" && computerSelection == "paper"){
|
||
result.textContent = "You Lose! Paper beats Rock";
|
||
state = false;
|
||
}
|
||
else if(playerSelection === "paper" && computerSelection == "rock"){
|
||
result.textContent = "You Win! Paper beats Rock";
|
||
state = true;
|
||
}
|
||
else if(playerSelection === "paper" && computerSelection == "scissors"){
|
||
result.textContent = "You Lose! Scissors beats Paper";
|
||
state = false;
|
||
}
|
||
else if(playerSelection === "scissors" && computerSelection == "paper"){
|
||
result.textContent = "You Win! Scissors beats Paper";
|
||
state = true;
|
||
}
|
||
else if(playerSelection === "rock" && computerSelection == "scissors"){
|
||
result.textContent = "You Win! Rock beats Scissors";
|
||
state = true;
|
||
}
|
||
else if(playerSelection === "scissors" && computerSelection == "rock"){
|
||
result.textContent = "You Lose! Rock beats Scissors";
|
||
state = false;
|
||
}
|
||
else{
|
||
result.textContent = "It's a Tie!";
|
||
state = null;
|
||
}
|
||
|
||
container.appendChild(result);
|
||
return state;
|
||
}
|
||
|
||
function game(player1, player2){
|
||
let player = 0;
|
||
let computer = 0;
|
||
const container = document.querySelector("#result");
|
||
let score = document.createElement("p");
|
||
let result = document.createElement("p");
|
||
result.textContent = "You win";
|
||
|
||
while (player < 5 && computer < 5) {
|
||
let party = playRound(player1, player2);
|
||
|
||
score.textContent = `Player score: ${player}/5 Computer score: ${computer}/5`;
|
||
container.appendChild(score);
|
||
|
||
if(party === true){
|
||
player +=1;
|
||
}
|
||
else if(party === false){
|
||
computer +=1;
|
||
}
|
||
|
||
if(player === 5){
|
||
result.textContent = "You win!";
|
||
container.appendChild(result);
|
||
}
|
||
else if(computer === 5){
|
||
result.textContent = "Computer wins!";
|
||
container.appendChild(result);
|
||
}
|
||
}
|
||
|
||
} |