-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
116 lines (107 loc) · 3.72 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const game = () => {
let pScore = 0; //Player Score
let cScore = 0; //Computer Score
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector('.intro');
const match = document.querySelector('.match');
playBtn.addEventListener('click', ()=>{
introScreen.classList.add('fadeOut');
match.classList.add('fadeIn');
});
};
//Play Match
const playMatch=()=>{
const options = document.querySelectorAll(".options button");
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
const hands = document.querySelectorAll(".hand img");
hands.forEach(hand => {
hand.addEventListener("animationend",function(){
this.style.animation = "";
});
});
//Computer options
const computerOptions = ["rock","paper","scissors"];
options.forEach(options=>{
options.addEventListener("click",function(){
//computer choice
const computerNumber = Math.floor(Math.random()*3);
const computerChoice = computerOptions[computerNumber];
//here we call function
setTimeout(()=>{
compareHands(this.textContent,computerChoice);
//update images
playerHand.src =`./assets/${this.textContent}.png`;
computerHand.src = `./assets/${computerChoice}.png`;
},2000);
//Animations
playerHand.style.animation="shakePlayer 2s ease";
computerHand.style.animation="shakeComputer 2s ease";
});
});
};
const updateScore = ()=>{
const playerScore = document.querySelector(".player-score p");
const computerScore = document.querySelector(".computer-score p");
playerScore.textContent = pScore;
computerScore.textContent = cScore;
}
const compareHands = (playerChoice, computerChoice)=>{
const winner = document.querySelector(".winner");
//Checking for a tie
if(playerChoice===computerChoice){
winner.textContent = "It's a tie ";
return;
}
//check for rock
if (playerChoice==="rock"){
if(computerChoice==="scissors"){
winner.textContent="Player wins";
pScore++;
updateScore();
return;
}
else{
winner.textContent="Computer wins";
cScore++;
updateScore();
return;
}
}
//check for paper
if (playerChoice==="paper"){
if(computerChoice==="rock"){
winner.textContent="Player wins";
pScore++;
updateScore();
return;
}
else{
winner.textContent="Computer wins";
cScore++;
updateScore();
return;
}
}
//check for scissors
if (playerChoice==="scissors"){
if(computerChoice==="paper"){
winner.textContent="Player wins";
pScore++;
updateScore();
return;
}
else{
winner.textContent="Computer wins";
cScore++;
updateScore();
return;
}
}
}
//Call all the inner functions
startGame();
playMatch();
};
game(); // Start the game