-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
76 lines (76 loc) · 11 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
<html>
<head>
<link rel="stylesheet" href="assets/styles/index.css" />
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital@1&family=Monoton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Lato:ital@1&family=Monoton&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34cdf8a57f.js" crossorigin="anonymous"></script>
<script src="script.js" async></script>
</head>
<body>
<header class="header">
<h1>GHOST SPRINTER</h1>
<button type="button" id="music__button"><i class="fas fa-music"></i></button>
<p class="insturctions">START</p>
</header>
<div class="game-container">
<div class="map">
<div class="map__wall map__wall--w1"></div>
<div class="map__wall map__wall--w2"></div>
<div class="map__wall map__wall--w3"></div>
<div class="map__wall map__wall--w4"></div>
<div class="map__wall map__wall--w5"></div>
<div class="map__wall map__wall--w6"></div>
<div class="map__wall map__wall--w7"></div>
<div class="map__wall map__wall--w8"></div>
<div class="map__wall map__wall--w9"></div>
<div class="map__wall map__wall--w10"></div>
<div class="map__wall map__wall--w11"></div>
<div class="map__wall map__wall--w12"></div>
<div class="map__wall map__wall--w13"></div>
<div class="map__wall map__wall--w14"></div>
<div class="map__wall map__wall--w15"></div>
<div class="map__wall map__wall--w16"></div>
<div class="map__endzone sound-target">
</div>
<div class="ghost ghost__one">
<svg class="ghost__one__svg" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ghost__one__svg--body" d="M14.0678 0.315957C6.46427 0.520813 0.50577 6.8605 0.335595 14.4556L0.175926 21.5819C0.138108 23.2698 0.0603741 26.7391 0.0183573 28.6144C0.00364989 29.2708 0.65166 29.6605 1.22261 29.2981L3.40867 28.0337C4.2631 27.5838 5.29455 27.6069 6.12787 28.0946L8.07179 29.264C8.90521 29.7517 9.93666 29.7748 10.791 29.3249L12.7853 28.2438C13.6398 27.7939 14.6712 27.817 15.5045 28.3047L17.4484 29.4741C18.2819 29.9618 19.3133 29.9849 20.1676 29.535L22.162 28.4539C23.0164 28.004 24.0479 28.0271 24.8812 28.5148L26.9168 29.78C27.4731 30.0739 28.1378 29.7136 28.1504 29.1509C28.1945 27.1818 28.2723 23.7124 28.308 22.1184L28.4761 14.617C28.6527 6.7406 22.1402 0.121603 14.0678 0.315957Z"/>
<path class="ghost__one__svg--eyes" d="M19.6082 12.6359C17.8266 12.596 16.2928 14.0626 16.2528 15.8442C16.2129 17.6259 17.6795 19.1597 19.4612 19.1996C21.2428 19.2395 22.7766 17.7729 22.8165 15.9913C22.8565 14.2097 21.3898 12.6758 19.6082 12.6359ZM9.29388 12.4048C7.51226 12.3649 5.97841 13.8315 5.93849 15.6131C5.89857 17.3948 7.36519 18.9286 9.14681 18.9685C10.9284 19.0084 12.4623 17.5418 12.5022 15.7602C12.5421 13.9786 11.0754 12.4447 9.29388 12.4048Z" fill="#E4E7E7"/>
<path class="ghost__one__svg--lens" d="M19.5662 14.5113C18.816 14.4945 18.145 15.1362 18.1282 15.8863C18.1114 16.6364 18.7531 17.3074 19.5032 17.3243C20.2533 17.3411 20.9244 16.6994 20.9412 15.9493C20.958 15.1991 20.3164 14.5281 19.5662 14.5113ZM9.25187 14.2802C8.5017 14.2634 7.83069 14.9051 7.81388 15.6552C7.79708 16.4053 8.43878 17.0763 9.18885 17.0932C9.93902 17.11 10.61 16.4683 10.6268 15.7182C10.6436 14.968 10.0019 14.297 9.25187 14.2802Z" fill="#324D5B"/>
</svg>
</div>
<div class="ghost ghost__two">
<svg class="ghost__two__svg" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ghost__two__svg--body" d="M14.0678 0.315957C6.46427 0.520813 0.50577 6.8605 0.335595 14.4556L0.175926 21.5819C0.138108 23.2698 0.0603741 26.7391 0.0183573 28.6144C0.00364989 29.2708 0.65166 29.6605 1.22261 29.2981L3.40867 28.0337C4.2631 27.5838 5.29455 27.6069 6.12787 28.0946L8.07179 29.264C8.90521 29.7517 9.93666 29.7748 10.791 29.3249L12.7853 28.2438C13.6398 27.7939 14.6712 27.817 15.5045 28.3047L17.4484 29.4741C18.2819 29.9618 19.3133 29.9849 20.1676 29.535L22.162 28.4539C23.0164 28.004 24.0479 28.0271 24.8812 28.5148L26.9168 29.78C27.4731 30.0739 28.1378 29.7136 28.1504 29.1509C28.1945 27.1818 28.2723 23.7124 28.308 22.1184L28.4761 14.617C28.6527 6.7406 22.1402 0.121603 14.0678 0.315957Z"/>
<path class="ghost__two__svg--eyes" d="M19.6082 12.6359C17.8266 12.596 16.2928 14.0626 16.2528 15.8442C16.2129 17.6259 17.6795 19.1597 19.4612 19.1996C21.2428 19.2395 22.7766 17.7729 22.8165 15.9913C22.8565 14.2097 21.3898 12.6758 19.6082 12.6359ZM9.29388 12.4048C7.51226 12.3649 5.97841 13.8315 5.93849 15.6131C5.89857 17.3948 7.36519 18.9286 9.14681 18.9685C10.9284 19.0084 12.4623 17.5418 12.5022 15.7602C12.5421 13.9786 11.0754 12.4447 9.29388 12.4048Z" fill="#E4E7E7"/>
<path class="ghost__two__svg--lens" d="M19.5662 14.5113C18.816 14.4945 18.145 15.1362 18.1282 15.8863C18.1114 16.6364 18.7531 17.3074 19.5032 17.3243C20.2533 17.3411 20.9244 16.6994 20.9412 15.9493C20.958 15.1991 20.3164 14.5281 19.5662 14.5113ZM9.25187 14.2802C8.5017 14.2634 7.83069 14.9051 7.81388 15.6552C7.79708 16.4053 8.43878 17.0763 9.18885 17.0932C9.93902 17.11 10.61 16.4683 10.6268 15.7182C10.6436 14.968 10.0019 14.297 9.25187 14.2802Z" fill="#324D5B"/>
</svg>
</div>
<div class="ghost ghost__three">
<svg class="ghost__three__svg" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ghost__three__svg--body" d="M14.0678 0.315957C6.46427 0.520813 0.50577 6.8605 0.335595 14.4556L0.175926 21.5819C0.138108 23.2698 0.0603741 26.7391 0.0183573 28.6144C0.00364989 29.2708 0.65166 29.6605 1.22261 29.2981L3.40867 28.0337C4.2631 27.5838 5.29455 27.6069 6.12787 28.0946L8.07179 29.264C8.90521 29.7517 9.93666 29.7748 10.791 29.3249L12.7853 28.2438C13.6398 27.7939 14.6712 27.817 15.5045 28.3047L17.4484 29.4741C18.2819 29.9618 19.3133 29.9849 20.1676 29.535L22.162 28.4539C23.0164 28.004 24.0479 28.0271 24.8812 28.5148L26.9168 29.78C27.4731 30.0739 28.1378 29.7136 28.1504 29.1509C28.1945 27.1818 28.2723 23.7124 28.308 22.1184L28.4761 14.617C28.6527 6.7406 22.1402 0.121603 14.0678 0.315957Z"/>
<path class="ghost__three__svg--eyes" d="M19.6082 12.6359C17.8266 12.596 16.2928 14.0626 16.2528 15.8442C16.2129 17.6259 17.6795 19.1597 19.4612 19.1996C21.2428 19.2395 22.7766 17.7729 22.8165 15.9913C22.8565 14.2097 21.3898 12.6758 19.6082 12.6359ZM9.29388 12.4048C7.51226 12.3649 5.97841 13.8315 5.93849 15.6131C5.89857 17.3948 7.36519 18.9286 9.14681 18.9685C10.9284 19.0084 12.4623 17.5418 12.5022 15.7602C12.5421 13.9786 11.0754 12.4447 9.29388 12.4048Z" fill="#E4E7E7"/>
<path class="ghost__three__svg--lens" d="M19.5662 14.5113C18.816 14.4945 18.145 15.1362 18.1282 15.8863C18.1114 16.6364 18.7531 17.3074 19.5032 17.3243C20.2533 17.3411 20.9244 16.6994 20.9412 15.9493C20.958 15.1991 20.3164 14.5281 19.5662 14.5113ZM9.25187 14.2802C8.5017 14.2634 7.83069 14.9051 7.81388 15.6552C7.79708 16.4053 8.43878 17.0763 9.18885 17.0932C9.93902 17.11 10.61 16.4683 10.6268 15.7182C10.6436 14.968 10.0019 14.297 9.25187 14.2802Z" fill="#324D5B"/>
</svg>
</div>
<div class="ghost ghost__four">
<svg class="ghost__four__svg" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ghost__four__svg--body" d="M14.0678 0.315957C6.46427 0.520813 0.50577 6.8605 0.335595 14.4556L0.175926 21.5819C0.138108 23.2698 0.0603741 26.7391 0.0183573 28.6144C0.00364989 29.2708 0.65166 29.6605 1.22261 29.2981L3.40867 28.0337C4.2631 27.5838 5.29455 27.6069 6.12787 28.0946L8.07179 29.264C8.90521 29.7517 9.93666 29.7748 10.791 29.3249L12.7853 28.2438C13.6398 27.7939 14.6712 27.817 15.5045 28.3047L17.4484 29.4741C18.2819 29.9618 19.3133 29.9849 20.1676 29.535L22.162 28.4539C23.0164 28.004 24.0479 28.0271 24.8812 28.5148L26.9168 29.78C27.4731 30.0739 28.1378 29.7136 28.1504 29.1509C28.1945 27.1818 28.2723 23.7124 28.308 22.1184L28.4761 14.617C28.6527 6.7406 22.1402 0.121603 14.0678 0.315957Z"/>
<path class="ghost__four__svg--eyes" d="M19.6082 12.6359C17.8266 12.596 16.2928 14.0626 16.2528 15.8442C16.2129 17.6259 17.6795 19.1597 19.4612 19.1996C21.2428 19.2395 22.7766 17.7729 22.8165 15.9913C22.8565 14.2097 21.3898 12.6758 19.6082 12.6359ZM9.29388 12.4048C7.51226 12.3649 5.97841 13.8315 5.93849 15.6131C5.89857 17.3948 7.36519 18.9286 9.14681 18.9685C10.9284 19.0084 12.4623 17.5418 12.5022 15.7602C12.5421 13.9786 11.0754 12.4447 9.29388 12.4048Z" fill="#E4E7E7"/>
<path class="ghost__four__svg--lens" d="M19.5662 14.5113C18.816 14.4945 18.145 15.1362 18.1282 15.8863C18.1114 16.6364 18.7531 17.3074 19.5032 17.3243C20.2533 17.3411 20.9244 16.6994 20.9412 15.9493C20.958 15.1991 20.3164 14.5281 19.5662 14.5113ZM9.25187 14.2802C8.5017 14.2634 7.83069 14.9051 7.81388 15.6552C7.79708 16.4053 8.43878 17.0763 9.18885 17.0932C9.93902 17.11 10.61 16.4683 10.6268 15.7182C10.6436 14.968 10.0019 14.297 9.25187 14.2802Z" fill="#324D5B"/>
</svg>
</div>
<div class="ghost ghost__five">
<svg class="ghost__five__svg" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ghost__five__svg--body" d="M14.0678 0.315957C6.46427 0.520813 0.50577 6.8605 0.335595 14.4556L0.175926 21.5819C0.138108 23.2698 0.0603741 26.7391 0.0183573 28.6144C0.00364989 29.2708 0.65166 29.6605 1.22261 29.2981L3.40867 28.0337C4.2631 27.5838 5.29455 27.6069 6.12787 28.0946L8.07179 29.264C8.90521 29.7517 9.93666 29.7748 10.791 29.3249L12.7853 28.2438C13.6398 27.7939 14.6712 27.817 15.5045 28.3047L17.4484 29.4741C18.2819 29.9618 19.3133 29.9849 20.1676 29.535L22.162 28.4539C23.0164 28.004 24.0479 28.0271 24.8812 28.5148L26.9168 29.78C27.4731 30.0739 28.1378 29.7136 28.1504 29.1509C28.1945 27.1818 28.2723 23.7124 28.308 22.1184L28.4761 14.617C28.6527 6.7406 22.1402 0.121603 14.0678 0.315957Z"/>
<path class="ghost__five__svg--eyes" d="M19.6082 12.6359C17.8266 12.596 16.2928 14.0626 16.2528 15.8442C16.2129 17.6259 17.6795 19.1597 19.4612 19.1996C21.2428 19.2395 22.7766 17.7729 22.8165 15.9913C22.8565 14.2097 21.3898 12.6758 19.6082 12.6359ZM9.29388 12.4048C7.51226 12.3649 5.97841 13.8315 5.93849 15.6131C5.89857 17.3948 7.36519 18.9286 9.14681 18.9685C10.9284 19.0084 12.4623 17.5418 12.5022 15.7602C12.5421 13.9786 11.0754 12.4447 9.29388 12.4048Z" fill="#E4E7E7"/>
<path class="ghost__five__svg--lens" d="M19.5662 14.5113C18.816 14.4945 18.145 15.1362 18.1282 15.8863C18.1114 16.6364 18.7531 17.3074 19.5032 17.3243C20.2533 17.3411 20.9244 16.6994 20.9412 15.9493C20.958 15.1991 20.3164 14.5281 19.5662 14.5113ZM9.25187 14.2802C8.5017 14.2634 7.83069 14.9051 7.81388 15.6552C7.79708 16.4053 8.43878 17.0763 9.18885 17.0932C9.93902 17.11 10.61 16.4683 10.6268 15.7182C10.6436 14.968 10.0019 14.297 9.25187 14.2802Z" fill="#324D5B"/>
</svg>
</div>
<div class="map__overlay map__overlay--game-over">GAME OVER</div>
<div class="map__overlay map__overlay--victory">Congratz!</div>
</div>
</div>
</body>
</html>