-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
195 lines (164 loc) · 9.91 KB
/
script.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
let Choice = ['Rock', 'Paper', 'Scissors'];
setTimeout(() => {
let x=document.getElementById('howto');
x.style.opacity='0';
x.style.height='0px';
x.style.margin='0px';
setTimeout(() => {
x.innerHTML='';
}, 1500);
}, 10000);
document.body.addEventListener('keyup',(event)=>{
if(event.key==='r'||event.key==='R')
playGame('Rock');
else if(event.key==='p'||event.key==='P')
playGame('Paper');
else if(event.key==='s'|| event.key==='S')
playGame('Scissors');
else if(event.key===' ')
autoplay();
else if(event.key==='Backspace')
{
ResetTheScore();
if(document.getElementById('autoPlay-button').innerText !=="AutoPlay")
autoplay();
}
})
function ResetTheScore(){
document.getElementById('result-full').style.display='none';
document.getElementById('whatresult').innerHTML='Result';
localStorage.setItem('Lose',0);
localStorage.setItem('Win',0);
localStorage.setItem('Tie',0);
updateScore();
}
let intervalid;//required to stop the setInterval
function autoplay(){
let a=document.getElementById('autoPlay-button').innerText; //used the innertext of the button to use the same button to both start and stop auto play
if(a==="AutoPlay")
{
intervalid=setInterval(function()
{
let v=pcChoice1();
playGame(v);
}, 1400);//this starts the interval where every second we choose a value randomly and pass it as user choice to the platgame function to play
document.getElementById('autoPlay-button').innerText='StopPlay'; //once we start auto play we want to autoplay button to change so that we can use to also stop the autoplay
}
else
{
clearInterval(intervalid); //this is the way to stop setinterval using the intervalid of the setinterval
document.getElementById('autoPlay-button').innerText='AutoPlay';
}
}
function updateScore() {
if(localStorage.getItem('Tie')===null){
localStorage.setItem('Tie',0);
localStorage.setItem('Win',0);
localStorage.setItem('Lose',0);
}
document.getElementById('lose').innerHTML =localStorage.getItem('Lose');
document.getElementById('tie').innerHTML = localStorage.getItem('Tie');
document.getElementById('win').innerHTML = localStorage.getItem('Win');
}
function pcChoice1()
{
let a =(Math.floor(Math.random() * Choice.length)); //this selects a random index from 0,1,2
a=Choice[a]; //this stores the value in array choice[index from above ] in a
return a; //here we return the chosen value as string
}
function playGame(userChoice) {
let pcChose=pcChoice1(); //this is to get computers choice
document.getElementById('result-full').style.display='block';
let a=document.getElementById('whatresult');
if (userChoice === 'Rock') {
document.getElementById('your-img').src='images/rock-emoji.png';
document.getElementById('your-img').alt='rock';
if (pcChose === 'Rock') {
document.getElementById('pc-img').src='images/rock-emoji.png';
document.getElementById('pc-img').alt='rock';
//isNaN is builtin function which gives true or false if a result is NaN or not
// (isNaN(parseInt(localStorage.getItem('Tie')))) ? 0: (parseInt(localStorage.getItem('Tie')))+1
// above line would have been required if updateScore was not called at very start because
// localStorage.getItem('Tie') will give null and parseInting it gives NaN and any math operation with NaN is NaN , so incrementing would not have worked ,
localStorage.setItem( 'Tie' , ((parseInt)(localStorage.getItem('Tie'))+1) );
a.innerHTML='Tie.';
a.style.color='Yellow';
} else if (pcChose === 'Paper') {
document.getElementById('pc-img').src='images/paper-emoji.png';
document.getElementById('pc-img').alt='paper';
localStorage.setItem('Lose',((parseInt)(localStorage.getItem('Lose'))+1));
a.innerHTML=' You Lose.';
a.style.color='red';
} else {
document.getElementById('pc-img').src='images/scissors-emoji.png';
document.getElementById('pc-img').alt='scissors';
localStorage.setItem('Win',((parseInt)(localStorage.getItem('Win'))+1));
a.innerHTML='You Win.';
a.style.color='green';
}
} else if (userChoice === 'Paper') {
document.getElementById('your-img').src='images/paper-emoji.png';
document.getElementById('your-img').alt='paper';
if (pcChose === 'Rock') {
document.getElementById('pc-img').src='images/rock-emoji.png';
document.getElementById('pc-img').alt='rock';
localStorage.setItem('Win',((parseInt)(localStorage.getItem('Win'))+1));
a.innerHTML='You Win.';
a.style.color='green';
} else if (pcChose === 'Paper') {
document.getElementById('pc-img').src='images/paper-emoji.png';
document.getElementById('pc-img').alt='paper';
localStorage.setItem('Tie',((parseInt)(localStorage.getItem('Tie'))+1));
a.innerHTML='Tie.';
a.style.color='Yellow';
} else {
document.getElementById('pc-img').src='images/scissors-emoji.png';
document.getElementById('pc-img').alt='scissors';
localStorage.setItem('Lose',((parseInt)(localStorage.getItem('Lose'))+1));
a.innerHTML='You Lose.';
a.style.color='red';
}
} else if (userChoice === 'Scissors') {
document.getElementById('your-img').src='images/scissors-emoji.png';
document.getElementById('your-img').alt='scissors';
if (pcChose === 'Rock') {
document.getElementById('pc-img').src='images/rock-emoji.png';
document.getElementById('pc-img').alt='rock';
localStorage.setItem('Lose',((parseInt)(localStorage.getItem('Lose'))+1));
a.innerHTML='You Lose.';
a.style.color='red';
} else if (pcChose === 'Paper') {
document.getElementById('pc-img').src='images/paper-emoji.png';
document.getElementById('pc-img').alt='paper';
localStorage.setItem('Win',((parseInt)(localStorage.getItem('Win'))+1));
a.innerHTML='You Win.';
a.style.color='green';
} else {
document.getElementById('pc-img').src='images/scissors-emoji.png';
document.getElementById('pc-img').alt='scissors';
localStorage.setItem('Tie',((parseInt)(localStorage.getItem('Tie'))+1));
a.innerHTML='Tie.';
a.style.color='yellow';
}
}
updateScore(); // Update the scores after each game
}
// this is what is setting up the local storage score on refresh
/*
Initialization of Scores: The updateScore() function is called, which retrieves the values for 'Lose', 'Win', and 'Tie' from localStorage and updates the corresponding elements on the page to display these scores.
If these values are not present in localStorage, it sets them to 0. // this is the key that you don't have NaN problem
*/
handleResize(); //calling the method initially so that it get applied on first load
/*this function below is called whenever window resize , so that we can adjust css accordingly , without having to do it manaully in css file*/
function handleResize(){
let element=document.getElementById('rock-button');
element=getComputedStyle(element).width;//here by using getComputedStyle(elementreference ) we got the css value for defined property .
document.getElementById('rock-button').style.height=element;
document.getElementById('paper-button').style.height=element;
document.getElementById('scissors-button').style.height=element;
document.getElementById('rock-button').style.borderRadius=element;
document.getElementById('paper-button').style.borderRadius=element;
document.getElementById('scissors-button').style.borderRadius=element;
}
window.addEventListener('resize', handleResize); //this is a event listener that gets active everytime the window gets a resize , here we passed handleResize function as parameter so we didnot use the brackets becuase we don't want to call in immediately , but the event listener should call it
updateScore(); // Initialize the scores on page load