-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (91 loc) · 5.75 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
<!doctype html>
<html lang = "en">
<!--
author: mina, vinson
date: 2020-11-24
title: twd - javascript game - html
-->
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>don't get extinct</title>
<link rel = "stylesheet" href = "styles/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/favicomatic/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/favicomatic/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/favicomatic/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/favicomatic/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="images/favicomatic/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/favicomatic/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="images/favicomatic/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicomatic/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="images/favicomatic/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="images/favicomatic/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="images/favicomatic/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicomatic/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="images/favicomatic/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head>
<body>
<div class = "wrapper">
<h1>Don't get extinct</h1>
<h3>❬ Your Mission ❭</h3>
<p>Meteors are falling! Help your dinosaur avoid extinction by avoiding the falling meteors.</p>
<h3>❬ Controls ❭</h3>
<p>Left and right arrow keys to move. </p>
<button id="#musicButton" class="musicButton">Music On/Off</button>
<!-- game stuff goes here? -->
<div class = "game-container" id = "game-container">
<!-- main-character -->
<div id="player">
<img id="player-1" src="images/dinosaur_1_green_final.png" alt="player">
</div>
<!-- falling meteor -->
<div id="fallingMeteor">
<img id="m1" src="/images/meteor.png">
</div>
<!-- start [character selection] -->
<div id="gallery" class="gallery">
<div class="thumbnails">
<h4>Choose Your Species</h4>
<img onmouseover="preview.src=img1.src" id="img1" src="images/dinosaur_1_green_final.png" alt="Character Option 1" title="Choose Sky?" />
<img onmouseover="preview.src=img2.src" id="img2" src="images/dinosaur_2_green_final.png" alt="Character Option 2" title="Choose Patrick?" />
<img onmouseover="preview.src=img3.src" id="img3" src="images/dinosaur_3_green_final.png" alt="Character Option 3" title="Choose Christian?" />
<img onmouseover="preview.src=img4.src" id="img4" src="images/dinosaur_4_green_final.png" alt="Character Option 4" title="Choose Leila?" />
<img onmouseover="preview.src=img5.src" id="img5" src="images/dinosaur_5_green_final.png" alt="Character Option 5" title="Choose Morgan?" />
</div>
<div class="preview">
<h4>Species Selected</h4>
<img id="preview" src="images/dinosaur_1_green_final.png" alt="Chosen Character" />
</div>
<div class = "char-button-div">
<button id="charButton" class = "char-button">Confirm Selection</button>
</div>
</div>
<!-- gameplay stats (time in game, points collected) -->
<div id="stats" class="stats">
<div id="stats-wrapper" class="stats-wrapper">
<div class = "time-stat">
Time: <span id="timeStat"></span>
</div>
<div class = "points-stat" onload="pointsTracker()">
Meat Collected: <span id="pointsStat"></span>
</div>
</div>
</div>
<!-- end gameplay stats -->
</div>
</div>
<footer>© 2020 a Javascript Game by <a href="http://mbui.bcitwebdeveloper.ca/">Mina Bui</a> and <a href="http://vnguyen.bcitwebdeveloper.ca/">Vinson Nguyen</a>. </footer>
<script src="/scripts/character.js"></script>
<script src="/scripts/script.js"></script>
</body>
</html>