-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
136 lines (125 loc) · 12.3 KB
/
index.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 lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="The game of Rock, Paper, Scissors, Lizard, Spock in your browser. How many times can you win?">
<meta name="keywords" content="">
<meta name="author" content="Joshua Chamberlain">
<link id="favicon" rel="icon" type="image/x-icon" href="IMG/Favicons/favicon1.ico">
<link rel="stylesheet" href="style.css">
<title>RPSLS</title>
</head>
<body>
<div class="container">
<header class="header">
<a href="index.html">
<div id="logo">
<img src="IMG/SVG/Rock.svg">
<img src="IMG/SVG/Paper.svg">
<img src="IMG/SVG/Scissors.svg">
<img src="IMG/SVG/Lizard.svg">
<img src="IMG/SVG/Spock.svg">
</div>
</a>
<button id="restart" class="restart-btn">Restart Game</button>
<div id="score" class="score">
<p>Player: 0</p>
<p>Computer: 0</p>
</div>
</header>
</div>
<div id="Game-Choices">
<svg xmlns="http://www.w3.org/2000/svg" class="ArrowChoices" width="809.865" height="792.421"
viewBox="0 0 809.865 792.421">
<g class="layer1" transform="translate(-1099.475 -702.721)" fill-rule="evenodd" stroke="#000"
stroke-linecap="round" stroke-linejoin="round">
<path class="SpockToScissors"
d="M1616.186 1439.233l21.94 12.907 21.941 12.907-22.148 12.548-22.148 12.548.207-25.455zm4.192 24.252l-272.575-4.78"
stroke-width="10" stroke="#000" fill="#000" />
<path class="RockToLizard"
d="M1153.04 892.917l11.176-21.998 11.176-21.998 14.662 20.104 14.661 20.105-25.837 1.893zm261.153-181.585l-249.775 175.08"
stroke-width="9.875" stroke="#000" fill="#000" />
<path class="PaperToRock"
d="M1584.106 707.632l24.97 2.72 24.969 2.721-14.864 20.06-14.863 20.06-10.106-22.78zm9.344 6.775l247.583 181.612"
stroke-width="9.822" stroke="#000" fill="#000" />
<path class="LizardToSpock"
d="M1169.217 1327.936l22.186-9.792 22.185-9.791-2.842 24.64-2.84 24.64-19.345-14.849zm30.665 13.252l-95.577-282.12"
stroke-width="9.615" stroke="#000" fill="#000" />
<path class="SpockToRock"
d="M1444.795 798.741l18.301-17.468 18.301-17.469 5.934 24.63 5.934 24.63-24.235-7.161zm33.684-24.95L1296.45 1354.42"
stroke-width="9.94" stroke="#000" fill="#000" />
<path class="ScissorsToPaper"
d="M1904.598 1106.965l-21.806-8.567-21.806-8.566 17.753-16.17 17.752-16.17 4.054 24.736zm-105.906 252.402l94.072-292.471"
stroke-width="9.483" stroke="#000" fill="#000" />
<path class="PaperToSpock"
d="M1311.54 1369.83l11.332-22.794 11.332-22.794 14.074 21.21 14.075 21.21-25.406 1.584zm492.404-382.942L1322.2 1365.369"
stroke-width="10" stroke="#000" fill="#000" />
<path class="ScissorsToLizard"
d="M1207.816 1033.34l-9.111-23.769-9.112-23.769 25.14 3.994 25.14 3.994-16.028 19.775zm-8.669-37.183l490.229 360.479"
stroke-width="10" stroke="#000" fill="#000" />
<path class="LizardToPaper"
d="M1764.891 993.491l-.273-25.454-.274-25.454 22.18 12.49 22.181 12.49-21.907 12.964zm35.69-26.76l-602.39.574"
stroke-width="10" stroke="#000" fill="#000" />
<path class="RockToScissors"
d="M1670.385 1319.35l23.73-9.212 23.731-9.212-3.888 25.157-3.888 25.157-19.842-15.946zM1502.43 770.242l204.182 573.361"
stroke-width="10" stroke="#000" fill="#000" />
</g>
</svg>
<div class="RPSLS" id="Rock">
<div onmouseover="overRock()" onmouseout="outRock()">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325" viewBox="0 0 876.325 876.325">
<path
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"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="RPSLS" id="Paper">
<div onmouseover="overPaper()" onmouseout="outPaper()">
<svg xmlns="http://www.w3.org/2000/svg" width="876.325" height="876.325" viewBox="0 0 876.325 876.325">
<path
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"
stroke-width="20" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round"
transform="rotate(65 438 438)" />
</svg>
</div>
</div>
<div class="RPSLS" id="Scissors">
<div onmouseover="overScissors()" onmouseout="outScissors()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325" width="876.325">
<path
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"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
transform="rotate(-150 438 438)" />
</svg>
</div>
</div>
<div class="RPSLS" id="Spock">
<div onmouseover="overSpock()" onmouseout="outSpock()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325" width="876.325">
<path
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"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
transform="rotate(-215 438 438)" />
</svg>
</div>
</div>
<div class="RPSLS" id="Lizard">
<div onmouseover="overLizard()" onmouseout="outLizard()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 876.325 876.325" height="876.325" width="876.325">
<path
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"
fill="none" stroke="#000" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
transform="rotate(75 438 438)" />
</svg>
</div>
</div>
</div>
<div class="modal">
<div id="result" class="modal-content"></div>
</div>
<script src="script.js"></script>
</body>
</html>