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" content="An easy rock paper scissors game, Big Bang Theory Edition. Play against the computer, who can get to 10 first?" />
15
16 <meta name="keywords" content="Rock Paper Scissors Lizard Spock, Big Bang Theory, Game, Computer, win, first">
17
18 <meta name="author" content="cla-cif">
19
20 <meta name="google-site-verification" content="SqBo65TjJ3LSP_qHj1lmmvKPYpCH-xeWvvYIYpml0IM" />
21
22 <link rel="shortcut icon" href="assets/icons/game-favicon.ico" type="image/x-icon">
23
24 <link href="assets/icons/apple-touch-icon-home.png" rel="apple-touch-icon" type="image/x-icon" />
25
26 <link rel="preconnect" href="https://fonts.googleapis.com">
27
28 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
29
30 <link
31 href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
32 rel="stylesheet">
33
34 <link rel="stylesheet" href="style.css" />
35
36 <title>
37RPS-Lizard-Spock</title>
38
39</head>
40
41
42<body>
43
44 <!--title, subtitle and the support button-->
45
46 <header>
47
48 <div class="title">
49
50 <h1>
51ROCK PAPER SCISSORS LIZARD SPOCK</h1>
52
53 <h2>
54Who gets to 10 first?</h2>
55
56 </div>
57
58 <div class="div-support">
59
60 <a href="support.html" target="_blank" aria-label="Psst! Click me, the developer has a favour to ask you. Link opens in a new window"
61 id="btn-clickme" class="btn" itemscope>
62Psst! Click me</a>
63
64 </div>
65
66 </header>
67
68 <!--the main area contains the scores, the game and reset button-->
69
70 <div class="main">
71
72 <!--the scores area -->
73
74 <div class="scores-area">
75
76 <div class="left">
77You: <span id="user-score">
780</span>
79</div>
80
81 <div class="middle" id="result-message">
82YOU WON!</div>
83
84 <div class="right">
85Computer: <span id="computer-score">
860</span>
87</div>
88
89 </div>
90
91 <!--the game area: user choices on the left, computer choices on the right-->
92
93 <div class="game-area">
94
95 <!--user choices are clickable-->
96
97 <div class="user-choices">
98
99 <div class="uchoice" id="urock">
100
101 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
102 viewBox="0 0 876.325 876.325">
103
104 <path
105 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"
106 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
107 stroke-linejoin="round" />
108
109 </svg>
110
111 </div>
112
113
114 <div class="uchoice" id="upaper">
115
116 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
117 viewBox="0 0 876.325 876.325">
118
119 <path
120 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"
121 stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round"
122 stroke-linecap="round" />
123
124 </svg>
125
126 </div>
127
128
129 <div class="uchoice" id="uscissors">
130
131 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
132 width="876.325">
133
134 <path
135 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"
136 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
137 stroke-linejoin="round" />
138
139 </svg>
140
141 </div>
142
143
144 <div class="uchoice" id="ulizard">
145
146 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
147 width="876.325">
148
149 <path
150 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"
151 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
152 stroke-linejoin="round" />
153
154 </svg>
155
156 </div>
157
158
159 <div class="uchoice" id="uspock">
160
161 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
162 width="876.325">
163
164 <path
165 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"
166 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round"
167 stroke-linejoin="round" />
168
169 </svg>
170
171 </div>
172
173 </div>
174
175 <hr>
176
177 <!--the computer choices are randomly generated-->
178
179 <div class="computer-choices">
180
181 <div class="cchoice">
182
183 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
184 viewBox="0 0 876.325 876.325">
185
186 <path
187 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"
188 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
189 id="path-rock" />
190
191 </svg>
192
193 </div>
194
195
196 <div class="cchoice">
197
198 <svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325"
199 viewBox="0 0 876.325 876.325">
200
201 <path
202 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"
203 stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round"
204 id="path-paper" />
205
206 </svg>
207
208 </div>
209
210
211 <div class="cchoice" id="test">
212
213 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
214 width="876.325">
215
216 <path
217 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"
218 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
219 id="path-scissors" />
220
221 </svg>
222
223 </div>
224
225
226 <div class="cchoice">
227
228 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
229 width="876.325">
230
231 <path
232 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"
233 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
234 id="path-lizard" />
235
236 </svg>
237
238 </div>
239
240
241 <div class="cchoice">
242
243 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325"
244 width="876.325">
245
246 <path
247 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"
248 fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
249 id="path-spock" />
250
251 </svg>
252
253 </div>
254
255 </div>
256
257 </div>
258
259 <!--the reset button, automatic reset happens when one of the players reaches 10 points-->
260
261 <div class="reset-area">
262
263 <button id="btn-reset" class="btn">
264RESET</button>
265
266 </div>
267
268 </div>
269
270 <!--footer sections, no links-->
271
272 <footer>
273
274 <p>
275Created by cla-cif (ASK) 2022</p>
276
277 </footer>
278
279 <!--script-->
280
281 <script src="script.js">
282</script>
283
284</body>
285
286
287</html>