-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
95 lines (78 loc) · 3.11 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
const userScore_span = document.querySelector('#user-score');
const robotScore_span = document.querySelector('#robot-score');
const userSelect_span = document.querySelector('#user-selection');
const robotSelect_span = document.querySelector('#robot-selection');
const resultText = document.querySelector('.result > p');
const rockChoice = document.querySelector('#Rock');
const paperChoice = document.querySelector('#Paper');
const scissorsChoice = document.querySelector('#Scissors');
let userScore = 0;
let robotScore = 0;
const getRobotChoice = () => {
const choices = ['Rock', 'Paper', 'Scissors'];
const randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
const win = (userChoice, robotChoice) => {
userScore++;
userScore_span.textContent = userScore;
userSelect_span.textContent = userChoice;
robotSelect_span.textContent = robotChoice;
if(userChoice === 'Rock' && robotChoice === 'Scissors') {
resultText.textContent = `Rock breaks Scissors. You win🔥🥳`;
} else if (userChoice === 'Paper' && robotChoice === 'Rock') {
resultText.textContent = `Paper covers Rock. You win🔥🥳`;
} else if (userChoice === 'Scissors' && robotChoice === 'Paper') {
resultText.textContent = `Scissors cuts Paper. You win🔥🥳`;
}
console.log(document.getElementById(userChoice));
document.getElementById(userChoice).classList.add('green-glow');
setTimeout(() => document.getElementById(userChoice).classList.remove('green-glow'), 300);
}
const lose = (userChoice, robotChoice) => {
robotScore++;
robotScore_span.textContent = robotScore;
userSelect_span.textContent = userChoice;
robotSelect_span.textContent = robotChoice;
resultText.textContent = `${userChoice} loses to ${robotChoice}. You lose💩😟`
document.getElementById(userChoice).classList.add('red-glow');
setTimeout(() => document.getElementById(userChoice).classList.remove('red-glow'), 300);
}
const draw = (userChoice, robotChoice) => {
userSelect_span.textContent = userChoice;
robotSelect_span.textContent = robotChoice;
resultText.textContent = `${userChoice} equals ${robotChoice}. It's a draw.`;
document.getElementById(userChoice).classList.add('gray-glow');
setTimeout(() => document.getElementById(userChoice).classList.remove('gray-glow'), 300);
}
const game = (userChoice, robotChoice) => {
switch(userChoice + robotChoice) {
case 'RockScissors':
case 'PaperRock':
case 'ScissorsPaper':
win(userChoice, robotChoice);
break;
case 'RockPaper':
case 'PaperScissors':
case 'ScissorsRock':
lose(userChoice, robotChoice);
break;
case 'RockRock':
case 'PaperPaper':
case 'ScissorsScissors':
draw(userChoice, robotChoice);
break;
}
}
function main() {
rockChoice.addEventListener('click', () => {
game('Rock', getRobotChoice());
});
paperChoice.addEventListener('click', () => {
game('Paper', getRobotChoice());
});
scissorsChoice.addEventListener('click', () => {
game('Scissors', getRobotChoice());
})
}
main();