forked from EdwardDunn/Platform-Game
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (101 loc) · 4.38 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
<!---
Description: Home page for game. Calls startGame() function in JS_Game.js file on page load and
contains code for game over and game complete modals.
Author: Open Source - Contributor list can be seen in GitHub
-->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Jumping Dead</title>
<link rel="stylesheet" type="text/css" href="Style-Sheets/JS_game.css">
<link rel="stylesheet" type="text/css" href="Style-Sheets/InstructionsModal.css">
<link rel="stylesheet" type="text/css" href="Style-Sheets/GameOverModal.css">
<link rel="stylesheet" type="text/css" href="Style-Sheets/GameCompleteModal.css">
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<!--Main game script-->
<script type="text/javascript" src="Game.js"></script>
</head>
<!--On page load call showInstructions method-->
<body onload="showInstructions()" onkeydown="KeyDown(event)" onkeyup="KeyUp(event)" ondragend="onMouseUp()">
<!--Audio elements-->
<audio id="bgm" style="display: none" controls>
<source src="Audio/bgnd_mus.flac" type="audio/flac">
Your browser does not support the audio element.
</audio>
<audio id="jump" style="display: none" controls>
<source src="Audio/jump_04.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<audio id="gameover" style="display: none" controls>
<source src="Audio/gameover.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<audio id="gamewon" style="display: none" controls>
<source src="Audio/win_sound.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<!--Restart button on game page-->
<canvas id="canvas" width=300 height=300></canvas>
<button id="restartButtonNearScore" class="button" onClick="restartGame()">
<img class="buttonImages" src="Pictures/restart.png" alt="RestartButton" />
</button>
<div id="instructionsModal" class="modal">
<div class="modal-content">
<h3>Instructions</h3>
<p>How to play the game:</p>
<ul>
<li>Complete each level by avoiding the enemy characters</li>
<li>You can kill the enemy by jumping on them</li>
<li>Killing an enemy grants you bonus score</li>
<li>Press 'p' to pause game</li>
</ul>
<p>Controllers</p>
<ul>
<li>On screen buttons</li>
<li>Keyboard arrows</li>
<li>Press 'p' to pause game</li>
<li>Press 'm' to toggle music</li>
</ul>
<!--Play button-->
<div class="startButton">
<img class="buttonImages" src="Pictures/play.png" width="100%" onClick="startGame()" alt="PlayButton" />
</div>
</div>
</div>
<div id="gameOverModal" class="modal">
<div class="modal-content">
<img class="gameOverLabel" src="Pictures/game_over.png" alt="GAME OVER">
<p class="gameOverDesc">Press RESTART button or Space to restart the game.</p>
<div class="restartButton">
<img class="buttonImages" src="Pictures/restart.png" width="100%" onClick="startGame()" alt="RestartButton" />
</div>
</div>
</div>
<div id="gameCompleteModal" class="modal">
<div class="modal-content">
<img class="gameOverLabel" src="Pictures/victory.png" alt="VICTORY">
<p class="gameOverDesc">You completed the game! Awesome Work!</p>
<div class="restartButton">
<img src="Pictures/restart.png" width="100%" onClick="startGame()" alt="RestartButton" />
</div>
</div>
</div>
<div id="gamePauseModal" class="modal">
<p class="gamePause">You paused the game!</p>
<p class="gamePlayPause">Press p to play</p>
</div>
<!--Game play buttons-->
<div id="buttonWrapper">
<button class="button" onmousedown="moveLeftMouse()" onmouseup="onMouseUp()" ontouchstart="moveLeftMouse()" ontouchend="onMouseUp()">
<img class="buttonImages" src="Pictures/left.png" alt="LEFT">
</button>
<button class="button" onmousedown="moveUpMouse()" onmouseup="onMouseUp()" ontouchstart="moveUpMouse()" ontouchend="onMouseUp()">
<img class="buttonImages" src="Pictures/jump.png" alt="JUMP">
</button>
<button class="button" onmousedown="moveRightMouse()" onmouseup="onMouseUp()" ontouchstart="moveRightMouse()" ontouchend="onMouseUp()">
<img class="buttonImages" src="Pictures/right.png" alt="RIGHT">
</button>
</div>
</body>
</html>