-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (118 loc) · 9.24 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="./img/hangman.png" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<title>Hangman</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="hangman-container">
<div class="startgame">
<h1>HANGMAN</h1>
<button onclick="startGame()">Play now</button>
</div>
<h1>Remaining lives: <span id="lives">10</span></h1>
<div id="hangman-render">
<svg
width="343"
height="356"
viewBox="0 0 343 356"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="hangman-img">
<path
id="hangman1"
d="M8 346.014C23.3115 348.933 39.2329 347.772 54.8 347.772H80M35 26C35 42.3899 33.2 59.3773 33.2 75.2329C33.2 87.6989 36.8 99.1859 36.8 111.278C36.8 122.96 38.6 134.757 38.6 145.956C38.6 161.863 45.8 176.331 45.8 192.161V309.969C45.8 318.791 42.4242 334.144 45.8 340.739"
stroke="white"
stroke-width="15"
stroke-linecap="round"
/>
<path
id="hangman2"
d="M20 23.6763C42.7694 27.375 70.8448 26.4247 93.4195 22.4754C104.375 20.5589 116.544 22.14 127.716 20.6742C138.883 19.209 151.585 20.5884 162.816 20.5884C220.103 20.5884 277.654 23.6763 335 23.6763"
stroke="white"
stroke-width="15"
stroke-linecap="round"
/>
<path
id="hangman3"
d="M10 85C21.4426 70.088 37.6606 61.1977 52.2799 49.2222C61.3695 41.7765 70.2997 34.703 80.0983 28.0278C85.9522 24.0398 100.888 14.025 104 8"
stroke="white"
stroke-width="15"
stroke-linecap="round"
/>
<path
id="hangman4"
d="M189 24C189 48.584 194 71.6292 194 96"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman5"
d="M178.149 106.512C181.897 100.07 184.73 97.8341 192.008 94.8801C199.912 92.3642 210.717 91.8934 217.393 96.4845C219.992 98.2714 221.627 100.838 223.74 103.08C226.343 105.843 225.208 111.251 227.473 113.954C228.872 115.625 229.102 120.748 228.966 122.956C228.833 125.118 227.329 127.444 226.26 129.374C224.816 131.979 220.681 135.292 218.047 136.772C214.699 138.652 213.735 139 209.647 139C201.646 139 195.7 136.772 187.855 135.836C184.827 135.474 182.194 133.092 179.829 131.335C176.401 128.789 176.467 125.322 174.789 121.798C172.465 116.915 175.784 110.577 178.149 106.512Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman6"
d="M207.109 139.28C199.895 138.163 195.78 139.362 190.624 144.964C189.96 151.274 190.009 161.303 190.733 167.326C191.076 170.178 191.603 173.938 191.459 176.764C191.309 179.699 193.349 182.636 193.051 185.474C192.82 187.672 195.016 191.326 195.739 193.479C196.78 196.579 197.121 196.874 200.595 197.221C204.049 197.566 206.084 196.69 209.335 195.831C212.824 194.909 212.323 193.042 212.656 189.874C213.264 184.097 213.071 177.985 213.652 172.463L215.465 155.233C215.576 154.179 213.532 147.548 212.506 147.148C212.995 142.499 209.745 139.688 207.109 139.28Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman7"
d="M185.721 152.32C186.812 149.504 188.727 146.973 190.579 144.598C190.898 144.795 191.934 147.168 192.152 147.497C192.456 147.957 193.715 148.876 193.794 149.53C194.12 152.242 194.014 154.777 193.724 157.527C193.239 162.141 191.26 166.346 189.271 170.51C187.077 175.105 183.881 179.437 182.265 184.173C180.763 188.576 177.73 191.792 177.24 196.449C177.098 197.802 176.697 199.339 175.207 198.724C174.136 198.283 172.73 197.749 171.576 197.549C169.365 197.166 170.245 194.393 170.464 193.051C170.636 191.995 171.318 190.927 171.573 189.85C171.9 188.467 172.467 187.112 173.1 185.838C174.286 183.453 175.243 181.169 176.112 178.622C177.134 175.626 178.162 172.622 179.384 169.726C180.28 167.606 180.227 165.069 181.42 163.063C182.384 161.443 182.613 159.352 183.288 157.603C183.985 155.796 185.024 154.118 185.721 152.32Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman8"
d="M218.809 152.176C217.769 149.358 215.71 146.768 213.711 144.333C213.309 144.505 211.833 146.758 211.539 147.065C211.128 147.495 209.524 148.314 209.366 148.947C208.711 151.574 208.594 154.056 208.676 156.759C208.813 161.294 210.787 165.523 212.776 169.713C214.971 174.336 218.397 178.765 219.882 183.491C221.263 187.883 224.601 191.213 224.739 195.791C224.78 197.12 225.113 198.646 226.965 198.139C228.296 197.775 230.039 197.342 231.447 197.219C234.144 196.984 233.354 194.221 233.22 192.897C233.115 191.856 232.399 190.77 232.196 189.703C231.937 188.332 231.385 186.973 230.747 185.69C229.552 183.288 228.621 180.997 227.822 178.457C226.882 175.467 225.937 172.47 224.747 169.567C223.875 167.44 224.183 164.967 222.943 162.934C221.94 161.292 221.867 159.236 221.224 157.486C220.561 155.679 219.473 153.975 218.809 152.176Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman9"
d="M191.638 199.884C191.92 196.887 193.073 193.951 194.21 191.181C194.57 191.288 196.218 193.307 196.518 193.567C196.937 193.932 198.402 194.491 198.657 195.101C199.713 197.63 200.304 200.101 200.777 202.827C201.571 207.4 200.813 211.967 200.036 216.496C199.177 221.494 197.281 226.498 197.019 231.483C196.775 236.116 194.731 240.003 195.533 244.619C195.766 245.96 195.8 247.546 194.195 247.34C193.043 247.192 191.542 247.043 190.374 247.149C188.138 247.354 188.228 244.452 188.072 243.101C187.95 242.039 188.314 240.833 188.266 239.729C188.203 238.311 188.379 236.857 188.641 235.466C189.131 232.859 189.429 230.409 189.57 227.729C189.736 224.576 189.904 221.414 190.291 218.306C190.574 216.029 189.83 213.598 190.431 211.355C190.917 209.543 190.566 207.468 190.738 205.607C190.916 203.685 191.458 201.798 191.638 199.884Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
<path
id="hangman10"
d="M213.409 198.688C212.766 195.772 211.396 193.051 210.063 190.491C209.774 190.652 208.659 192.9 208.442 193.203C208.139 193.627 206.98 194.405 206.848 195.046C206.302 197.706 206.14 200.238 206.111 203.002C206.063 207.639 207.32 212.032 208.59 216.385C209.991 221.187 212.267 225.837 213.164 230.718C213.998 235.255 216.247 238.778 216.198 243.46C216.184 244.82 216.37 246.39 217.693 245.94C218.644 245.616 219.888 245.238 220.886 245.163C222.797 245.02 222.328 242.169 222.276 240.812C222.235 239.744 221.764 238.609 221.656 237.511C221.516 236.102 221.171 234.694 220.761 233.36C219.995 230.862 219.411 228.488 218.929 225.864C218.361 222.776 217.79 219.679 217.043 216.67C216.496 214.466 216.793 211.95 215.982 209.829C215.327 208.115 215.342 206.012 214.944 204.201C214.534 202.33 213.821 200.55 213.409 198.688Z"
fill="white"
stroke="white"
stroke-width="5"
stroke-linecap="round"
/>
</g>
</svg>
</div>
<div class="controller">
<h1 id="guess"></h1>
<div class="alphabet"></div>
</div>
<div id="buttons"></div>
</div>
<script src="script.js"></script>
</body>
</html>