Platform-Game/index.html at master · Smithface/Platform-Game · 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
<!---
Description: Home page for game. Calls initialize_game() 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>
                <li>Press Space bar to restart the game</li>
			</ul>

			<!--Play button-->
			<div class="startButton">
				<img class="buttonImages" src="Pictures/play.png" width="100%" onClick="initialize_game()" 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="initialize_game()" 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="initialize_game()" 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 class="resumeButton">
			<img class="button" src="Pictures/resume.png" width="100%" onClick="pauseGame()" alt="ResumeGame" />
		</div>
	</div>

	<!--Game play buttons-->
	<div id="buttonWrapper">
		<div id="buttonController">
		<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="moveUp()" ontouchstart="moveUp()">
			<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>
		<div id="buttonPauseAudio">
		<button class="button" id="buttonAudio" onClick="muteMusic()" >
			<img class="buttonImages" id="audioButton" src="Pictures/audioOn.png" alt="MuteMusic">
		</button>
		<button class="button" id="buttonPause" onClick="pauseGame()">
			<img class="buttonImages" src="Pictures/pause.png" alt="PauseGame">
		</button>
		</div>
	</div>

</body>

</html>