forked from yakudoo/TheAviator
-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
132 lines (123 loc) · 5.91 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
<!-- Copied and modified from http://games-aviator.com/ -->
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Aviator 2</title>
<meta name="description" content="An extension of Karim Maaloul's game The Aviator." />
<meta name="keywords" content="three.js, game, aviator, browser, javascript" />
<meta name="author" content="Michel Helms for Codrops" />
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/game.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
</head>
<body>
<div class="game-holder" id="gameHolder">
<div class="header">
<div class="header__title-wrap">
<h1 class="header__title">
<span class="header__title-pre">The</span>
<span class="header__title-main">Aviator 2</span>
</h1>
<h2 class="header__tagline">An extension of Karim Maaloul's <a href="http://tympanus.net/codrops/?p=26501" class="hover-line">The Aviator</a></h2>
</div>
<div class="score" id="score">
<div class="score__content" id="level">
<div class="score__label">level</div>
<div class="score__value score__value--level" id="levelValue">1</div>
<svg class="level-circle" id="levelCircle" viewbox="0 0 200 200">
<circle id="levelCircleBgr" r="80" cx="100" cy="100" fill="none" stroke="#d1b790" stroke-width="24px" />
<circle id="levelCircleStroke" r="80" cx="100" cy="100" fill="none" #f25346 stroke="#68c3c0" stroke-width="14px" stroke-dasharray="502" />
</svg>
</div>
<div class="score__content score__content--fixed" id="dist">
<div class="score__label">distance</div>
<div class="score__value score__value--dist" id="distValue">0</div>
</div>
<div class="score__content score__content--fixed" id="coins">
<div class="score__label">coins</div>
<div class="score__value score__value--dist" id="coinsValue">0</div>
</div>
<div class="score__content" id="lifes">
<div class="score__label">life</div>
<img class="heart" src="heart.png"/>
<img class="heart" src="heart.png"/>
<img class="heart" src="heart.png"/>
</div>
</div>
</div>
<nav class="links">
<a href="http://tympanus.net/Development/TextRepetitionEffect/" class="hover-line">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=63296" class="hover-line">Article</a>
<a href="https://github.com/Badestrand/TheAviator2" class="hover-line">GitHub</a>
</nav>
<div class="world" id="world">
<canvas id="threejs-canvas"></canvas>
</div>
<div class="message--replay" id="replayMessage">
Click to Replay
</div>
<div id="error">
<p><b>Error</b></p>
<p id="error-message"></p>
</div>
<div id="new-level">
<p>Level</p>
<p>1</p>
</div>
<div id="intro-screen" class="visible">
<button type="button">Start</button>
</div>
<div id="score-screen">
<div>
<p class="headline">Map complete</p>
<div class="lines">
<div>
<span>Coins</span>
<span><span id="score-coins-collected">129</span> / <span id="score-coins-total">136</span></span>
</div>
<div>
<span>Enemies killed</span>
<span><span id="score-enemies-killed">3</span> / <span id="score-enemies-total">20</span></span>
</div>
<div>
<span>Shots fired</span>
<span><span id="score-shots-fired">9820</span></span>
</div>
<div>
<span>Damage taken</span>
<span><span id="score-lifes-lost">1</span></span>
</div>
</div>
</div>
<br/>
Thanks for playing!
</div>
</div>
<div id="attribution" style="display: none">
<p>
Sound effects obtained from https://www.zapsplat.com and https://freesound.org/.<br/>
<br/>
This game uses these following sounds from freesound:<br/>
Sound "Crash" by user "Previsionary" (https://freesound.org/people/Previsionary/sounds/593677) licensed under Creative Commons 0<br/>
Sound "Bubble Pop" by user "elmasmalo1" (https://freesound.org/people/elmasmalo1/sounds/376968) licensed under Attribution 3.0<br/>
Sound "Bullet_Impact_2" by user "toxicwafflezz" (https://freesound.org/people/toxicwafflezz/sounds/150838) licensed under Attribution 3.0<br/>
Sound "Pacific Ocean" by user "tim.kahn" (https://freesound.org/people/tim.kahn/sounds/174763) licensed under Attribution 3.0<br/>
Sound "Airship propeller engine" by user "ilm0player" (https://freesound.org/people/ilm0player/sounds/578181/) licensed under Creative Commons 0<br/>
Sound "Rock Smash" by user "NeoSpica" (https://freesound.org/people/NeoSpica/sounds/512243) licensed under Creative Commons 0<br/>
Sound "Gun shot/bullet hit" by user "coolguy244e" (https://freesound.org/people/coolguy244e/sounds/266916) licensed under Creative Commons 0<br/>
Sound "Pistol Shot" by user "LeMudCrab" (https://freesound.org/people/LeMudCrab/sounds/163456/) licensed under Creative Commons 0<br/>
Sound "Water Splash" by user "Yin_Yang_Jake007" (https://freesound.org/people/Yin_Yang_Jake007/sounds/406087/) licensed under Attribution 3.0<br/>
Sound "Coins - 01" by user "DWOBoyle" (https://freesound.org/people/DWOBoyle/sounds/140382/) licensed under Attribution 3.0<br/>
</p>
</div>
<script type="text/javascript" src="/game.js"></script>
</body>
</html>