-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (137 loc) · 6.9 KB
/
index.html
File metadata and controls
151 lines (137 loc) · 6.9 KB
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
146
147
148
149
150
151
<!--
######################################
## JS Canvas Game - Quadrant Patrol ##
###################################### -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ### Open graph meta tags ### -->
<meta name="title" property="og:title" content="Quadrant Patrol" />
<meta name="description" content="JavaScript game rendered on HTML5" />
<meta property="og:type" content="game" />
<meta name="image" property="og:image" content="https://senimtra.dev/linkedIn/Quadrant_Patrol.png" />
<meta name="description" property="og:description" content="JavaScript game rendered on HTML5 👾🔫🕹" />
<meta name="author" content="Gregor aka Senimtra" />
<!-- ### Link own css stylesheet ### -->
<link rel="stylesheet" href="./style.css" />
<!-- ### Pre-load SNES font ### -->
<link rel="stylesheet preload" href="./fonts/SnesItalic-1G9Be.ttf" as="style" />
<title>Quadrant Patrol</title>
</head>
<body>
<div id="container">
<!-- ### Start screen begins here ### -->
<div id="intro">
<h1 id="game-title">Quadrant<br />Patrol</h1>
<button id="start-game" class="menu-button">Start Game!</button>
<button id="resume-game" class="menu-button">Resume Game!</button>
<button id="instructions" class="menu-button">Instructions</button>
<button id="credits" class="menu-button">Credits</button>
</div>
<!-- ### Instructions screen begins here ### -->
<div id="game-instructions">
<h1>Instructions</h1>
<div id="game-actions">
<div>
<div id="icon-left"></div>
Move to the left
</div>
<div>
<div id="icon-right"></div>
Move right
</div>
<div>
<div id="icon-fire">SPACE</div>
Fire projectiles
</div>
<div>
<div id="icon-bounce"></div>
Bouncing Razor
</div>
<div>
<div id="icon-score"></div>
Bonus score
</div>
<div>
<div id="icon-health"></div>
Bonus health
</div>
<div>
<div id="icon-shield"></div>
Reflective shield
</div>
<div>
<div id="icon-wings"></div>
Call your wingmates
</div>
</div>
</div>
<!-- ### Credits screen begins here ### -->
<div id="game-credits">
<h1>Credits</h1>
<h2>ALL USED ASSETS WERE FREE TO DOWNLOAD AND FREE TO USE ...<br />so to the best of its knowledge and belief
...</h2>
<div id="credit-container">
<div><span class="credit">SEAMLESS BACKGROUND
</span>https://screamingbrainstudios.itch.io/seamless-space-backgrounds * author: Screaming
Brain Studios * Adaption: clipped to fit canvas</div>
<div><span class="credit">ASTEROIDS </span>https://www.pngegg.com/en/png-nzbum * author:
unknown * Adaption: second (darker) set of rocks</div>
<div><span class="credit">PLAYER SPACESHIP </span>
https://opengameart.org/content/animated-fighter-spaceship * author's blog =>
http://millionthvector.blogspot.de * Adaption: resized, made into a spritesheet</div>
<div><span class="credit">PLAYER SPACESHIP EXHAUST
</span>https://opengameart.org/content/explosion-effects-and-more * author: Soluna
Software * Adaption: turned 180deg to simulate exhaust</div>
<div><span class="credit">ENEMY SPACESHIPS
</span>https://opengameart.org/content/animated-red-ship * author's blog =>
http://millionthvector.blogspot.de * Adaption: recolored, made into a spritesheet</div>
<div><span class="credit">PLAYER SHIELD AURA </span>https://www.pngwing.com/en/free-png-zwjru *
author: unknown * Adaption: none</div>
<div><span class="credit">POWER UPS
</span>https://opengameart.org/content/rotating-gems-for-match3 * author: Bondoki *
Adaption: recolored, made into new spritesheet</div>
<div><span class="credit">USER INTERFACE
</span>https://opengameart.org/content/space-shooter-game-user-interface * author:
CraftPix.net * Adaption: resized elements</div>
<div><span class="credit">FONT #1 </span>https://www.fontspace.com/space-mission-font-f56190 *
author: Maknastudio * Adaption: none</div>
<div><span class="credit">FONT #2 </span>link: https://www.fontspace.com/snes-font-f26537 *
author: Lyric Type * Adaption: none</div>
<div><span class="credit">EXPLOSIONS
</span>https://opengameart.org/content/2d-explosion-animations-frame-by-frame *
https://opengameart.org/content/2d-explosion-animations-2-frame-by-frame * author:
Sinestesia * Adaption: none</div>
<div><span class="credit">RAZOR ANIMATION </span>https://opengameart.org/content/razor * author:
Modanung * Adaption: recolored</div>
<div><span class="credit">PROJECTILES
</span>https://opengameart.org/content/assets-free-laser-bullets-pack-2020 * author:
Wenrexa * Adaption: nothing</div>
<div><span class="credit">MUSIC </span>https://opengameart.org/content/5-chiptunes-action *
author: SubspaceAudio * Adaption: nothing</div>
<div><span class="credit">MENU SOUND
</span>https://opengameart.org/content/menu-selection-click * author: NenadSimic *
Adaption: none</div>
</div>
</div>
<!-- ### Game over screen begins here ### -->
<div id="game-over">
<h1>GAME<br />OVER!</h1>
<button id="try-again" class="menu-button">Try again!</button>
</div>
<!-- ### Set background canvas ### -->
<canvas id="background-canvas" width="500" height="800"></canvas>
<!-- ### Set game canvas ### -->
<canvas id="game-canvas" width="500" height="800"></canvas>
</div>
<!-- ### Load JavaScript files ### -->
<script src="enemies.js"></script>
<script src="projectile.js"></script>
<script src="player.js"></script>
<script src="game.js"></script>
<script src="script.js"></script>
</body>
</html>