-
Notifications
You must be signed in to change notification settings - Fork 0
/
RockPaperScissors.html
137 lines (115 loc) · 4.72 KB
/
RockPaperScissors.html
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
<!DOCTYPE html>
<html>
<head>
<title>jsGames > RockPaperScissors</title>
<link rel="stylesheet" href="index.css" />
</head>
<style>
#game-box {
display: none;
grid-template-columns: 100px 100px 100px;
gap: 20px;
}
.square {
background-color: blue;
color: white;
padding: 20px;
}
.choice-line {
display: none;
}
.clickable {
user-select: none;
cursor: pointer;
}
</style>
<body>
<a href="index.html">back</a>
<h1>Rock Paper Scissors</h1>
<button id="new-game" class="clickable">New Game</button>
<h2>
Computer: <span id="computer-score">0</span> <br />
User: <span id="user-score">0</span>
</h2>
<div id="game-box">
<div id="rock" class="square clickable">Rock</div>
<div id="paper" class="square clickable">Paper</div>
<div id="scissors" class="square clickable">Scissors</div>
</div>
<h2 id="user-says" class="choice-line">
User: <span id="user-choice"></span>
</h2>
<br />
<h2 id="computer-says" class="choice-line">
Computer: <span id="computer-choice"></span>
</h2>
</body>
<script>
// global variables
// score counters
let COMPUTER_SCORE = 0;
let USER_SCORE = 0;
// Possible computer choices
const COMPUTER_CHOICES = ['Rock', 'Paper', 'Scissors'];
// elements
let USER_SAYS = document.getElementById('user-says');
let COMPUTER_SAYS = document.getElementById('computer-says');
// squares
const ROCK = document.getElementById('rock');
const PAPER = document.getElementById('paper');
const SCISSORS = document.getElementById('scissors');
//----------------------------------------------------------------
// functions
function newGame() {
// make the game visible
document.getElementById('game-box').style = 'display: grid;';
// initialize the scores
COMPUTER_SCORE = 0;
USER_SCORE = 0;
// update the scores on the screen
document.getElementById('computer-score').innerHTML =
COMPUTER_SCORE;
document.getElementById('user-score').innerHTML = USER_SCORE;
// hide the choice lines
COMPUTER_SAYS.style = 'display: none;';
USER_SAYS.style = 'display: none';
}
//----------------------------------------------------------------
// Event Listeners
// when a square is clicked
for (let square of document.getElementsByClassName('square'))
square.addEventListener('click', function () {
// getting the user's choice
const userChoice =
this.id.charAt(0).toUpperCase() + this.id.substr(1); // capitalizing the first letter
console.log('User: ' + userChoice);
// getting the computer's choice randomly
const computerChoice =
COMPUTER_CHOICES[Math.floor(Math.random() * 3)];
console.log('Computer: ' + computerChoice);
// showing the two choices on the screen
COMPUTER_SAYS.style = 'display: inline;';
USER_SAYS.style = 'display: inline;';
document.getElementById('computer-choice').innerHTML =
computerChoice;
document.getElementById('user-choice').innerHTML = userChoice;
// see who won and update the score
if (userChoice == 'Rock') {
if (computerChoice == 'Paper') COMPUTER_SCORE++;
else if (computerChoice == 'Scissors') USER_SCORE++;
} else if (userChoice == 'Paper') {
if (computerChoice == 'Rock') USER_SCORE++;
else if (computerChoice == 'Scissors') COMPUTER_SCORE++;
} else if (userChoice == 'Scissors') {
if (computerChoice == 'Rock') COMPUTER_SCORE++;
else if (computerChoice == 'Paper') USER_SCORE++;
} else console.log('Daya, kuch to gadbad hai');
// update the score on the screen
document.getElementById('computer-score').innerHTML =
COMPUTER_SCORE;
document.getElementById('user-score').innerHTML = USER_SCORE;
});
// when the new game button is clicked
document.getElementById('new-game').addEventListener('click', newGame);
</script>
</html>