Stellar-Drift-Game-M2/index.html at master · samlaubscher/Stellar-Drift-Game-M2 · GitHub

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
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Stellar Drift - Mini space game!! ">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico">
    <!-- Google Fonts Link - text fonts -->
    <link href="https://fonts.googleapis.com/css?family=Audiowide|Oxanium:wght@300;500;700|Orbitron&display=swap"
        rel="stylesheet">
    <!-- Font Awesome Link - used for icons -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        type="text/css" />
    <!-- Stylesheet Link -->
    <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    <title>Stellar Drift Game</title>
</head>

<body>
    <article id="container">
        <!-- Floating Banners Above Canvas -->
        <section class="top-banner">
            <!-- Name Title Above Game -->
            <div class="name-title">
                <h1>STELLAR DRIFT</h1>
                <h2 class="text-layer-8">STELLAR DRIFT</h2>
                <h2 class="text-layer-7">STELLAR DRIFT</h2>
                <h2 class="text-layer-9">STELLAR DRIFT</h2>
                <h2 class="text-layer-10">STELLAR DRIFT</h2>
                <h2 class="text-layer-2">STELLAR DRIFT</h2>
                <h2 class="text-layer-4">STELLAR DRIFT</h2>
                <h2 class="text-layer-6">STELLAR DRIFT</h2>
                <h2 class="text-layer-5">STELLAR DRIFT</h2>
                <h2 class="text-layer-3">STELLAR DRIFT</h2>
                <h2 class="text-layer-1">STELLAR DRIFT</h2>
            </div>
            <!-- Audio -->
            <!-- Background Music -->
            <audio id="music" src="assets\audio\Event Horizon - Background music.mp3" loop></audio>
            <!-- Game Start -->
            <audio id="start" src="assets\audio\Start game.mp3"></audio>
            <!-- Player Crash -->
            <audio id="explosion" src="assets\audio\Explosion.mp3"></audio>
            <!-- Game Complete -->
            <audio id="completed" src="assets\audio\Game complete.mp3"></audio>
            <!-- Mute Button -->
            <ul class="mute-btn">
                <li>
                    <button id="mute" aria-label="Mute Audio">
                        <i id="i-muted" class="hidden fa fa-volume-off"></i>
                        <i id="i-not-muted" class="fa fa-volume-up"></i>
                    </button>
                </li>
            </ul>
            <!-- Reset Button -->
            <ul class="reset-btn">
                <li>
                    <button id="reset">Reset</button>
                </li>
            </ul>
        </section>
        <!-- Start Game Panel -->
        <section id="start-panel">
            <!-- Instructions -->
            <p>INSTRUCTIONS:<br>Have you got the skills to maneuver the ship as you race through the asteroid field to
                reach the winning score of 10,000?
                As your score increases, so will your speed! Watch for the colours changing to indicate your
                progression!</p>
            <!-- Controls -->
            <p>CONTROLS:<br>To control the ship, use the left and right arrow keys, or for mobile and tablet users,
                touch anywhere on the the left and right sides of the screen. When you're ready, hit the Enter key or
                press the Start Game button to begin... good luck!</p>
            <!-- Start Button -->
            <button id="start-btn">Start Game</button>
            <!-- Game Credits -->
            <p id="credit">Game & Music created by Sam Laubscher</p>
        </section>

        <!-- Crash Panel -->
        <section id="crash-panel">
            <!-- Display Message -->
            <p>YOU CRASHED - UNLUCKY!<br></p>
            <!-- Score Output Display -->
            <p>YOUR SCORE:</p>
            <p id="score-output"></p>
            <p>See if anyone can beat your score! Hit enter to restart</p>
            <!-- Restart Button -->
            <button id="restart-btn">Restart Game</button>
            <!-- Game Credits -->
            <p id="credit">Game & Music created by Sam Laubscher</p>
        </section>

        <!-- Completed Panel -->
        <section id="completed-panel">
            <!-- Display Message -->
            <p>YOU WON!<br></p>
            <!-- Score Output Display -->
            <p>Thats pretty impressive! Congratulations!<br>
                YOU HIT:

            <p>10,000</p>

            <p>See if you can do it again by restarting the game!</p>
            <!-- Restart Button -->
            <button id="restart-btn">Restart Game</button>
            <!-- Game Credits -->
            <p id="credit">Game & Music created by Sam Laubscher</p>
        </section>
        <!-- Countdown Timer Overlay -->
        <div id="countdown">
            <p id="countdowntimer"></p>
        </div>
        <!-- Github Button Icon -->
        <div id="github">
            <ul class="github-button">
                <!-- Icon with link to project repo page -->
                <li><a target="_blank" rel="noopener" href="https://github.com/samlaubscher/Stellar-Drift-Game-M2"
                        aria-label="Github"><i class="fa fa-github"></i></a></li>
            </ul>
        </div>
        <!-- Direction Buttons -->
        <section id="bottom-banner">
            <ul class="dir-btn-container">
                <!-- Left Side Screen Button -->
                <li class="dir-btns-sides">
                    <button class="side-screen-btn" id="left-direction-btn" aria-label="Left Direction"></button>
                </li>
                <!-- Right Side Screen Button -->
                <li class="dir-btns-sides">
                    <button class="side-screen-btn" id="right-direction-btn" aria-label="Right Direction"></button>
                </li>
            </ul>
        </section>
        <!-- Canvas -->
        <canvas id="canvas">
            This browser unfortunately does not support the HTML Canvas API. Please use an updated version.
        </canvas>
    </article>
</body>
<!-- Javascript Scripts Link -->
<script src="assets/js/script.js"></script>

</html>