-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
313 lines (259 loc) · 11.4 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title><!-- title text must match json names attribute of menuNames in menu.js -->
<!--Google Retro Font-->
<link href="https://fonts.googleapis.com/css?family=Atomic+Age&display=swap" rel="stylesheet">
<!--Main style sheet -->
<link href="css/style.css" rel="stylesheet" />
<!--Login style sheet -->
<link href="css/login.css" rel="stylesheet" />
<!--Social Media Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font used in antibody game -->
<link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet" />
<!--Add favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--The footer.js external file uses document.write() to create a footer element that can be included across multiple pages and edited once to update-->
<script language="JavaScript" type="text/javascript" src="scripts/footer.js"></script>
<!--The login script is used to handle user login: https://www.w3schools.com/html/html5_svg.asp-->
<script language="JavaScript" type="text/javascript" src="scripts/login.js"></script>
</head>
<body>
<!--Anchor to return to top of page from bottom-->
<a id="topofpage"></a>
<!--The menu is created in the menu.js JavaScript file, and highlights the current page by comparing the page title to JSON used to create the menu items-->
<div class="menu stretch">
<div id="menu" class="center"></div><!-- menu.js: displays the menu here -->
<!-- External menu script to display top navigation bar-->
<script language="JavaScript" type="text/javascript" src="scripts/menu.js"></script>
</div>
<div class="main">
<div class="heading">
<h1>J.I.M. Games</h1>
</div>
<!--The body-border class creates a black border and a shadow around the main div elements in the body-->
<div class="body-border yellow-section">
<div>
<h1>Welcome to J.I.M Games</h1>
<div id="welcome">
<p> Our goal here at JIM games is to provide you with the best free online games available on the internet right now! By selecting only the highest-quality games we pride ourselves as being the best website for all your online gaming needs. </p>
<p>We always do our best to make sure our website is as fast and reliable as possible however, sometimes issues may arise.
If you happen to come across anything that isn’t working please contact us viva our social media platforms so we can work on fixing this as soon as possible.
Or contact one of our admins by <a href="contact.html#email" title="See List Of Admin Contact Email Addresses">email</a>.
We are located in Ireland, and can be found <a href="contact.html#address" title="See Address On Contacts Page">here</a>.
</p>
</div>
<div>
<h2>Our Games</h2>
<div class="center">
<ol>
<li><a href="#antibody" title="Antibody Information">Antibody JS</a></li>
<li><a href="#flappybird" title="Flappy Bird Information">Flappy Bird JS</a></li>
<li><a href="#spaceinvaders" title="Space Invaders Information">Space Invaders JS</a></li>
</ol>
</div>
</div>
<div>
<h2>Already Registered</h2>
<!--Clicking the Login button reveals the login form: https://www.w3schools.com/html/html5_svg.asp-->
<div class="center">
<button onclick="document.getElementById('loginID').style.display='block'" title="Click To Login">Login</button>
</div>
</div>
</div>
<!--The Login element is activated by pressing the login button-->
<div id="loginID" class="modal">
<!--Animation is used to expand the login form on the screen-->
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('loginID').style.display='none'" class="close"
title="Close Modal">×</span>
<!-- image with alt text, in case the image does not display in a browser-->
<img src="img/alien-purple.svg" alt="Space Invader Image" class="space-invader">
</div>
<!--Login form - Username and Password are required fields-->
<div class="login-container">
<!--Labels are attached to the text input fields-->
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="login-container">
<button type="button" onclick="document.getElementById('loginID').style.display='none'"
class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
</div>
<!--Three sections are added to show screenshots and information about each game-->
<div class="body-border">
<!--Anchor to move from top of page to Antibody info section-->
<a id="antibody"></a>
<div>
<h1>Antibody JS</h1>
<h2>2D Side-Scrolling Shooter Ported From C++</h2>
<!--Photos are formatted to look like polaroid pictures and rotate and change from black and white to colour when the mouse hovers-->
<div class="photos">
<!-- The title property is placed on the div instead of the image, as the div is use to create a polaroid effect-->
<div class="item" title="Antibody Screenshot 1 - Start">
<div class="polaroid">
<!--Three screenshots of each game are presented as inline elements, alternative text is used for accessibility-->
<img src="img/antibody1.jpg" alt="Antibody Image 1 - Start" />
<!--Adds a caption at the bottom of each polaroid image-->
<div class="caption">Antibody</div>
</div>
</div>
<div class="item" title="Antibody Screenshot 2 - Destroy Enemies">
<div class="polaroid">
<img src="img/antibody2.jpg" alt="Antibody Image 2 Destroy Enemies" />
<div class="caption">Antibody: Enemies</div>
</div>
</div>
<div class="item" title="Antibody Screenshot 3 - Collect Power Ups">
<div class="polaroid">
<img src="img/antibody3.jpg" alt="Antibody Image 3 Power Up" />
<div class="caption">Antibody: Power Ups</div>
</div>
</div>
</div>
<!--An unordered list is used to show bullet point information about each game-->
<div>
<h2>Gameplay</h2>
<ul>
<li>Destroy Enemies</li>
<li>Collect Power Ups</li>
<li>Do Not Destroy Blood Cells</li>
</ul>
</div>
<div>
<h2>Play The Game</h2>
<p><a href="antibody.html" title="Go To Antibody Game">Click Here</a> to play Antibody</p>
</div>
</div>
</div>
<div class="body-border yellow-section">
<!--Anchor to move from top of page to flappy bird info section-->
<a id="flappybird"></a>
<div>
<h1>Flappy Bird</h1>
<h2>Simple 2D Side-Scroller In JavaScript</h2>
<div class="photos">
<div class="item" title="Flappy Bird Screenshot 1 - Start Menu">
<div class="polaroid">
<img src="img/flappybird1.jpg" alt="Flappybird Image 1 Start Menu" />
<div class="caption">Flappy Bird</div>
</div>
</div>
<div class="item" title="Flappy Bird Screenshot 2 - Levels Of Difficulty">
<div class="polaroid">
<img src="img/flappybird2.jpg" alt="Flappybird Image 2 - Levels Of Difficulty" />
<div class="caption">Flappy Bird: Difficulty</div>
</div>
</div>
<div class="item" title="Flappy Bird Screenshot 3 - Avoid Pipes">
<div class="polaroid">
<img src="img/flappybird3.jpg" alt="Flappybird Image 3 - Avoid Pipes" />
<div class="caption">Flappy Bird: Avoid Pipes</div>
</div>
</div>
</div>
<div>
<h2>Gameplay</h2>
<ul>
<li>Stay Above Ground</li>
<li>Manoeuvre Between The Pipes</li>
<li>Points Awarded For Passing Each Pipe</li>
<li>Three Levels Of Difficulty Adjust The Space Between Pipes</li>
</ul>
</div>
<div>
<h2>Play The Game</h2>
<p><a href="flappybird.html" title="Go To Flappy Bird Game">Click Here</a> to play Flappy Bird</p>
</div>
</div>
</div>
<div class="body-border footer-spacer">
<!--Anchor to move from top of page to Space Invaders info section-->
<a id="spaceinvaders"></a>
<div>
<h1>Space Invaders</h1>
<h2>Classic Arcade Game Action In JavaScript</h2>
<div class="photos">
<div class="item" title="Space Invaders Screenshot 1 - Start">
<div class="polaroid">
<img src="img/spaceInvaders1.jpg" alt="Space Invaders Image 1 - Start" />
<div class="caption">Space Invaders</div>
</div>
</div>
<div class="item" title="Space Invaders Screenshot 2 - Destroy Aliens">
<div class="polaroid">
<img src="img/spaceInvaders2.jpg" alt="Space Invaders Image 2 - Destroy Aliens" />
<div class="caption">Space Invaders: Kill Aliens</div>
</div>
</div>
<div class="item" title="Space Invaders Screenshot 3 - Mothership Bonus Points">
<div class="polaroid">
<img src="img/spaceInvaders3.jpg" alt="Space Invaders Image 3 - Mothership Bonus Points" />
<div class="caption">Space Invaders: Mothership</div>
</div>
</div>
</div>
<div>
<h2>Gameplay</h2>
<ul>
<li>Destroy The Aliens</li>
<li>Collect Bonus Points For Destroying The Alien Mothership</li>
<li>The More Aliens You Destroy The Faster They Move</li>
<li>Player Shot Accuracy Is Measured To Add Extra Fun</li>
</ul>
</div>
<div>
<h2>Play The Game</h2>
<p><a href="spaceinvaders.html" title="Go To Space Invaders Game">Click Here</a> to play Space Invaders</p>
</div>
</div>
<div class="backtotop">
<!-- link to anchor at top of body on this page -->
<p><a href="#topofpage" title="Scroll back to top of this page">Back To Top</a></p>
</div>
</div>
</div>
<!--The side navigation bar has a list of all the games and links to their individual pages-->
<div class="sidenav leftnav">
<h2>Our Games</h2>
<a href="antibody.html">Antibody</a>
<a href="flappybird.html">Flappy Bird</a>
<a href="spaceinvaders.html">Space Invaders</a>
<a href="register.html">Register</a>
<a href="contact.html">Contact Us</a>
<a href="login.html">Login</a>
</div>
<div class="sidenav rightnav">
<h2>High Scores</h2>
<div class="display-scores">
<a href="antibody.html">Antibody</a>
<span id="antibodyScoreID">0</span><br/>
<a href="flappybird.html">Flappy Bird</a>
<span id="flappyScoreID">0</span><br/>
<a href="spaceinvaders.html">Space Invaders</a>
<span id="spaceScoreID">0</span><br/>
</div>
<!-- Script to display high-scores for each game on right panel -->
<script language="JavaScript" type="text/javascript" src="scripts/high-scores.js"></script>
</div>
<!--The createFooter() function is called from the external footer.js file included in the head tag-->
<!--The createFooter() function takes a class name parameter, the index page footer is fixed, other pages are not and have different formatting-->
<script>createFooter("fixed-footer")</script>
</body>
</html>