Issues:
1<!DOCTYPE html>
2
3<html lang="en">
4
5
6<head>
7
8 <meta charset="UTF-8">
9
10 <meta http-equiv="X-UA-Compatible" content="IE=edge">
11
12 <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
14 <meta name="description"
15 content="An easy rock paper scissors game, Big Bang Theory Edition. Play against the computer, who can get to 10 first?" />
16
17 <meta name="keywords" content="Rock Paper Scissors Lizard Spock, Big Bang Theory, Game, Computer, win, first">
18
19 <meta name="author" content="cla-cif">
20
21 <meta name="google-site-verification" content="SqBo65TjJ3LSP_qHj1lmmvKPYpCH-xeWvvYIYpml0IM" />
22
23 <link rel="shortcut icon" href="assets/icons/game-favicon.ico" type="image/x-icon">
24
25 <link href="assets/icons/apple-touch-icon-home.png" rel="apple-touch-icon" type="image/x-icon" />
26
27 <link rel="preconnect" href="https://fonts.googleapis.com">
28
29 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30
31 <link
32 href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
33 rel="stylesheet">
34
35 <link rel="stylesheet" href="assets/css/main.css" />
36
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
39</script>
40
41
42 <title>
43Rock Paper Scissors Lizard Spock</title>
44
45</head>
46
47
48<body>
49
50 <!--title, subtitle and the support button-->
51
52 <header>
53
54 <div class="title">
55
56 <h1>
57ROCK PAPER SCISSORS LIZARD SPOCK</h1>
58
59 <h2>
60Who gets to 10 first?</h2>
61
62 </div>
63
64 <div class="div-support">
65
66 <a href="support.html" target="_blank"
67 aria-label="Psst! Click me, the developer has a favour to ask you. Link opens in a new window"
68 id="btn-clickme" class="btn" itemscope>
69Psst! Click me</a>
70
71 </div>
72
73 </header>
74
75 <!--the main area contains the scores, the game and reset button-->
76
77 <div class="main">
78
79 <!--the scores area -->
80
81 <div class="scores-area">
82
83 <div class="left">
84You: <span id="user-score">
850</span>
86</div>
87
88 <div class="middle" id="result-message">
89YOU WON!</div>
90
91 <div class="right">
92Computer: <span id="computer-score">
930</span>
94</div>
95
96 </div>
97
98 <!--the game area: user choices on the left, computer choices on the right-->
99
100 <div class="game-area">
101
102 <!--user choices are clickable-->
103
104 <div class="user-choices">
105
106 <div class="uchoice" id="urock">
107
108 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
109 viewBox="0 0 876.325 876.325">
110
111 <path
112 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-342.972 31.905c27.99 9.621 49.089 33.512 64.479 63.823m-92.019-54.205c-12.634 49.174-6.615 47.612-5.683 59.888m26.666 21.857c-2.532-21.825-19.442-16.715-26.666-21.857m-29.07 45.244c19.03-30.353 33.031-59.712 75.626-94.204 5.07-2.706 10.691-.545 12.459 1.53 4.338 4.652 7.449 8.541 12.24 26.884 4.764 19.748 6.086 40.872 5.027 62.949-1.148 17.74-6.779 32.337-20.546 43.933-21.05 21.36-58.308 37.535-93.33 54.424m-63.823-220.32c-7.146 38.53-13.381 74.937-17.049 105.352-5.169 38.633-5.203 52.673-5.135 76.641M342.813 393.13c-14.692 43.835-22.198 80.484-28.852 116.28-4.244 28.706-7.849 57.412-10.928 86.117m-12.24-266.22c-25.25 76.803-28.373 129.83-40.217 182.726M692.09 96.31L566.63 205.159c-45.174-3.8-89.604-4.624-132.454.874-48.84 6.633-95.51 17.363-138.137 31.474-32.404 11.596-46.114 27.642-54.206 45.026-10.22 27.47-15.658 57.809-20.109 88.74-5.923 52.507-5.843 76.495-7.431 108.412 1.74 8.503-5.508 20.267 36.256 27.778l1.338 22.493c3.871 32.111 29.683 41.213 50.709 50.709l.437 14.862c4.178 33.697 39.109 36.503 59.014 38.906 9.403 15.342 10.788 33.513 38.469 42.403 14.238 4.091 24.222 5.477 52.02 3.497 4.377 9.096 8.576 18.59 17.486 17.486 48.607-3.125 115.909-27.08 164.803-48.96 26.291-17.054 60.245-66.722 64.697-103.603 3.99-35.519 7.183-69.446 6.557-95.734l149.503-106.226"
113 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
114 stroke-linejoin="round" />
115
116 </svg>
117
118 </div>
119
120
121 <div class="uchoice" id="upaper">
122
123 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
124 viewBox="0 0 876.325 876.325">
125
126 <path
127 d="M345.347 496.045l8.928 9.286m512.05-67.169a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM213.918 95.688c14.625 19.415 31.8 40.383 62.857 55.714 107.806 46.057 166.362 72.514 221.786 104.286 53.262 32.426 97.063 79.13 145.714 136.786 6.407 9.266 20.817 19.528 8.929 51.07 25.544 16.805 14.382 40.12-.357 58.215 17.056 63.944-20.494 72.66-65 71.072-3.952 25.58-20.007 48.421-56.786 41.785-93.833-36.501-141.202-88.508-185.714-118.571l35.357 66.071c19.109 45.608-44.264 63.704-63.214 45.715-24.818-29.7-26.537-38.206-111.072-113.572-29.106-26.034-37.194-44.799-36.428-67.5 2.387-16.591.58-38.342-9.643-54.286-29.21-35.89-73.635-82.276-111.277-108.8 7.273-16.02 13.767-31.944 23.563-48.28 14.614-26.02 35.104-51.489 54.772-71.83 27.94-28.901 48.232-47.46 75.673-60.984zm196.429 334.286c118.474 90.39 144.66 97.411 177.5 142.857M445.968 374.989c21.658 18.492 38.683 33.998 89.399 71.216 53.26 35.53 86.705 52.942 116.673 67.175M475.768 319.178c22.798 24.357 44.335 52.008 83.59 77.024 31.884 23.577 60.628 35.77 93.846 47.343"
128 stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round"
129 stroke-linecap="round" />
130
131 </svg>
132
133 </div>
134
135
136 <div class="uchoice" id="uscissors">
137
138 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
139 width="876.325">
140
141 <path
142 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM380.732 645.74c79.965-11.942 139.086-37.008 175.364-76.457m-235.437-8.495c115.112-15.857 152.371-22.868 199.029-30.946 29.74-5.798 47.77-2.006 48.544 20.63l-12.136 18.811c28.367 3.187 59.732 23.357 46.723 47.937l-35.8 60.073M460.828 333.24c-.583 21.5-7.446 45.092.607 63.713 13.331 17.817 18.134 44.164 25.485 67.962 13.566 9.638 20.742 10.252 42.476-4.855 13.395-10.282 18.097-26.393 20.024-41.262 1.905-18.406 4.98-36.812 8.495-55.218 4.258-15.276 31.644-7.954 31.554.606l-.607 31.554c-8.248 86.961 41.883 88.302 79.49 108.01M846.144 325.35l-108.01-4.247c-31.72-25.099-68.4-47.717-109.83-67.961-27.028-16.05-52.052-15.062-75.849-3.641-34.71 17.792-68.087 38.819-91.626 83.738L202.94 256.177c-40.131-15.408-77.837 26.564-34.587 62.5 79.303 46.548 175.223 81.31 244.539 121.966-97.828 23.116-193.757 31.042-290.049 41.869-28.03 5.743-39.547 76.408 6.675 78.883l191.14-.607c9.741 29.346-9.007 61.54 60.074 84.952 8.89 21.937 1.292 46.002 57.039 61.893 38.382 9.471 81.158.634 129.247-30.34 71.296 5.111 84.772 5.361 100.728-1.82 41.158-19.8 69.043-48.791 89.2-83.131l77.062-1.214"
143 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
144 stroke-linejoin="round" />
145
146 </svg>
147
148 </div>
149
150
151 <div class="uchoice" id="ulizard">
152
153 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
154 width="876.325">
155
156 <path
157 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM310.95 260.424c43.122-13.3 111.183-40.465 127.427-48.543 14.526-8.933 33.652-1.996 53.702 0-8.45-.855 205.058 87.075 200.85 102.548m-514.26 458.738c1.099-37.04.072-78.335-16.384-150.485-7.016-33.491-17.501-56.112-1.214-162.622 9.305-33.604 18.609-62.849 27.913-124.393 6.13-28.142-7.568-51.807 44.903-90.413 54.428-26.027 104.4-46.961 169.296-84.951 18.09-9.78 35.75-17.541 66.14-4.854 75.478 34.136 162.579 76.022 211.166 92.233 35.771 14.38 52.097 32.456 15.777 61.286-10.91 32.3-13.498 61.535-61.894 54.005-87.253-22.162-261.979-58.043-266.99-2.427.165 36.183 38.848 70.927 103.155 46.723 24.07-5.115 54.814-22.888 78.884-37.621 70.245-35.408 101.107 43.431 79.49 55.218l-112.864 88.592-103.155 89.806c-10.137 10.09-19.944 20.51-18.204 42.476-3.538 92.48 8.33 146.45 15.17 212.985"
158 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
159 stroke-linejoin="round" />
160
161 </svg>
162
163 </div>
164
165
166 <div class="uchoice" id="uspock">
167
168 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
169 width="876.325">
170
171 <path
172 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-215.961-218.66c-45.325 72.466-53.428 148.35-78.492 207.791M374.664 157.27c23.565 41.229 29.579 175.99 42.475 250m125.24 19.168c25.04-3.913 36.01 9.37 45.05 25.32m-195.168-25.07c15.596-22.457 32.562-20.273 49.757-13.957m-77.09 161.824c68.303-6.792 107.65 30.16 120.398 107.29M325.513 846.589l-.607-99.514c-70.376-63.372-84.47-86.154-108.01-125-23.884-36.311-91.482-56.464-111.65-95.874-18.383-40.373.981-57.424 29.126-62.5 32.84-5.641 49.42.8 61.894 7.888 41.666 24.272 101.431 73.43 120.145 66.141 10.019-162.28-.437-226.742-3.64-325.85.207-33.774 19.748-53.097 61.893-54.611 16.151-50.898 80.908-54.353 84.951-15.777l35.801 242.112 81.31-205.097c18.642-38.158 88.9-15.065 73.638 40.995-4.427 29.11-13.996 15.338-12.014 22.312 42.844-2.636 55.746 9.884 56.338 35.592-81.538 239.28-27.912 195.915-39.684 205.712 10.312-6.949 2.436 100.581-6.372 126.517-21.75 95.853-45.92 85.005-67.658 118.022l1.214 111.65"
173 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
174 stroke-linejoin="round" />
175
176 </svg>
177
178 </div>
179
180 </div>
181
182 <hr>
183
184 <!--the computer choices are randomly generated-->
185
186 <div class="computer-choices">
187
188 <div class="cchoice">
189
190 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
191 viewBox="0 0 876.325 876.325">
192
193 <path
194 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-342.972 31.905c27.99 9.621 49.089 33.512 64.479 63.823m-92.019-54.205c-12.634 49.174-6.615 47.612-5.683 59.888m26.666 21.857c-2.532-21.825-19.442-16.715-26.666-21.857m-29.07 45.244c19.03-30.353 33.031-59.712 75.626-94.204 5.07-2.706 10.691-.545 12.459 1.53 4.338 4.652 7.449 8.541 12.24 26.884 4.764 19.748 6.086 40.872 5.027 62.949-1.148 17.74-6.779 32.337-20.546 43.933-21.05 21.36-58.308 37.535-93.33 54.424m-63.823-220.32c-7.146 38.53-13.381 74.937-17.049 105.352-5.169 38.633-5.203 52.673-5.135 76.641M342.813 393.13c-14.692 43.835-22.198 80.484-28.852 116.28-4.244 28.706-7.849 57.412-10.928 86.117m-12.24-266.22c-25.25 76.803-28.373 129.83-40.217 182.726M692.09 96.31L566.63 205.159c-45.174-3.8-89.604-4.624-132.454.874-48.84 6.633-95.51 17.363-138.137 31.474-32.404 11.596-46.114 27.642-54.206 45.026-10.22 27.47-15.658 57.809-20.109 88.74-5.923 52.507-5.843 76.495-7.431 108.412 1.74 8.503-5.508 20.267 36.256 27.778l1.338 22.493c3.871 32.111 29.683 41.213 50.709 50.709l.437 14.862c4.178 33.697 39.109 36.503 59.014 38.906 9.403 15.342 10.788 33.513 38.469 42.403 14.238 4.091 24.222 5.477 52.02 3.497 4.377 9.096 8.576 18.59 17.486 17.486 48.607-3.125 115.909-27.08 164.803-48.96 26.291-17.054 60.245-66.722 64.697-103.603 3.99-35.519 7.183-69.446 6.557-95.734l149.503-106.226"
195 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
196 id="path-rock" />
197
198 </svg>
199
200 </div>
201
202
203 <div class="cchoice">
204
205 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
206 viewBox="0 0 876.325 876.325">
207
208 <path
209 d="M345.347 496.045l8.928 9.286m512.05-67.169a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM213.918 95.688c14.625 19.415 31.8 40.383 62.857 55.714 107.806 46.057 166.362 72.514 221.786 104.286 53.262 32.426 97.063 79.13 145.714 136.786 6.407 9.266 20.817 19.528 8.929 51.07 25.544 16.805 14.382 40.12-.357 58.215 17.056 63.944-20.494 72.66-65 71.072-3.952 25.58-20.007 48.421-56.786 41.785-93.833-36.501-141.202-88.508-185.714-118.571l35.357 66.071c19.109 45.608-44.264 63.704-63.214 45.715-24.818-29.7-26.537-38.206-111.072-113.572-29.106-26.034-37.194-44.799-36.428-67.5 2.387-16.591.58-38.342-9.643-54.286-29.21-35.89-73.635-82.276-111.277-108.8 7.273-16.02 13.767-31.944 23.563-48.28 14.614-26.02 35.104-51.489 54.772-71.83 27.94-28.901 48.232-47.46 75.673-60.984zm196.429 334.286c118.474 90.39 144.66 97.411 177.5 142.857M445.968 374.989c21.658 18.492 38.683 33.998 89.399 71.216 53.26 35.53 86.705 52.942 116.673 67.175M475.768 319.178c22.798 24.357 44.335 52.008 83.59 77.024 31.884 23.577 60.628 35.77 93.846 47.343"
210 stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round"
211 id="path-paper" />
212
213 </svg>
214
215 </div>
216
217
218 <div class="cchoice" id="test">
219
220 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
221 width="876.325">
222
223 <path
224 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM380.732 645.74c79.965-11.942 139.086-37.008 175.364-76.457m-235.437-8.495c115.112-15.857 152.371-22.868 199.029-30.946 29.74-5.798 47.77-2.006 48.544 20.63l-12.136 18.811c28.367 3.187 59.732 23.357 46.723 47.937l-35.8 60.073M460.828 333.24c-.583 21.5-7.446 45.092.607 63.713 13.331 17.817 18.134 44.164 25.485 67.962 13.566 9.638 20.742 10.252 42.476-4.855 13.395-10.282 18.097-26.393 20.024-41.262 1.905-18.406 4.98-36.812 8.495-55.218 4.258-15.276 31.644-7.954 31.554.606l-.607 31.554c-8.248 86.961 41.883 88.302 79.49 108.01M846.144 325.35l-108.01-4.247c-31.72-25.099-68.4-47.717-109.83-67.961-27.028-16.05-52.052-15.062-75.849-3.641-34.71 17.792-68.087 38.819-91.626 83.738L202.94 256.177c-40.131-15.408-77.837 26.564-34.587 62.5 79.303 46.548 175.223 81.31 244.539 121.966-97.828 23.116-193.757 31.042-290.049 41.869-28.03 5.743-39.547 76.408 6.675 78.883l191.14-.607c9.741 29.346-9.007 61.54 60.074 84.952 8.89 21.937 1.292 46.002 57.039 61.893 38.382 9.471 81.158.634 129.247-30.34 71.296 5.111 84.772 5.361 100.728-1.82 41.158-19.8 69.043-48.791 89.2-83.131l77.062-1.214"
225 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
226 id="path-scissors" />
227
228 </svg>
229
230 </div>
231
232
233 <div class="cchoice">
234
235 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
236 width="876.325">
237
238 <path
239 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zM310.95 260.424c43.122-13.3 111.183-40.465 127.427-48.543 14.526-8.933 33.652-1.996 53.702 0-8.45-.855 205.058 87.075 200.85 102.548m-514.26 458.738c1.099-37.04.072-78.335-16.384-150.485-7.016-33.491-17.501-56.112-1.214-162.622 9.305-33.604 18.609-62.849 27.913-124.393 6.13-28.142-7.568-51.807 44.903-90.413 54.428-26.027 104.4-46.961 169.296-84.951 18.09-9.78 35.75-17.541 66.14-4.854 75.478 34.136 162.579 76.022 211.166 92.233 35.771 14.38 52.097 32.456 15.777 61.286-10.91 32.3-13.498 61.535-61.894 54.005-87.253-22.162-261.979-58.043-266.99-2.427.165 36.183 38.848 70.927 103.155 46.723 24.07-5.115 54.814-22.888 78.884-37.621 70.245-35.408 101.107 43.431 79.49 55.218l-112.864 88.592-103.155 89.806c-10.137 10.09-19.944 20.51-18.204 42.476-3.538 92.48 8.33 146.45 15.17 212.985"
240 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
241 id="path-lizard" />
242
243 </svg>
244
245 </div>
246
247
248 <div class="cchoice">
249
250 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
251 width="876.325">
252
253 <path
254 d="M866.325 438.162a428.162 428.162 0 0 1-428.163 428.163A428.162 428.162 0 0 1 10 438.162 428.162 428.162 0 0 1 438.162 10a428.162 428.162 0 0 1 428.163 428.162zm-215.961-218.66c-45.325 72.466-53.428 148.35-78.492 207.791M374.664 157.27c23.565 41.229 29.579 175.99 42.475 250m125.24 19.168c25.04-3.913 36.01 9.37 45.05 25.32m-195.168-25.07c15.596-22.457 32.562-20.273 49.757-13.957m-77.09 161.824c68.303-6.792 107.65 30.16 120.398 107.29M325.513 846.589l-.607-99.514c-70.376-63.372-84.47-86.154-108.01-125-23.884-36.311-91.482-56.464-111.65-95.874-18.383-40.373.981-57.424 29.126-62.5 32.84-5.641 49.42.8 61.894 7.888 41.666 24.272 101.431 73.43 120.145 66.141 10.019-162.28-.437-226.742-3.64-325.85.207-33.774 19.748-53.097 61.893-54.611 16.151-50.898 80.908-54.353 84.951-15.777l35.801 242.112 81.31-205.097c18.642-38.158 88.9-15.065 73.638 40.995-4.427 29.11-13.996 15.338-12.014 22.312 42.844-2.636 55.746 9.884 56.338 35.592-81.538 239.28-27.912 195.915-39.684 205.712 10.312-6.949 2.436 100.581-6.372 126.517-21.75 95.853-45.92 85.005-67.658 118.022l1.214 111.65"
255 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
256 id="path-spock" />
257
258 </svg>
259
260 </div>
261
262 </div>
263
264 </div>
265
266 <!--the reset button, automatic reset happens when one of the players reaches 10 points-->
267
268 <div class="reset-area">
269
270 <button id="btn-reset" class="btn">
271RESET</button>
272
273 </div>
274
275 </div>
276
277 <!--footer sections, no links-->
278
279 <footer>
280
281 <p>
282Created by cla-cif (ASK) 2022</p>
283
284 </footer>
285
286 <!--script-->
287
288 <script src="assets/js/script.js">
289</script>
290
291
292</body>
293
294
295</html>