-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (153 loc) · 5.57 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<audio id="collision">
<source src="audio/paddlehit.mp3" type="audio/mp3">
</audio>
<audio id="wall-collision">
<source src="audio/hit.mp3" type="audio/mp3">
</audio>
<div id="waitScreen">
<img src="images/logo.png" />
<div id="createShadow">
<button id ="startGame" onclick="startGame()">Play Game</button>
<a href="#scoreModal"><button id = "id-high-scores">High Scores</button></a>
<a href="#helpModal"><button id = "id-help">Help</button></a>
<a href="#aboutModal"><button id = "id-about">About</button></a>
<a href="#creditsModal"><button id = "id-credit">Credits</button></a>
</div>
</div>
<div id="game">
<div id="left-div">
<div>
<button onClick="mute();">
<img id="mute_unmute" src="images/unmute.png" />
</button>
</div>
<br />
<div>
<button onClick="pauseGame();">
Pause
</button>
</div>
</div>
<div id="canvas-div">
<canvas id="canvas" width="800" height="650">
</canvas>
<canvas id="counterCanvas" width="800" height="650">
</canvas>
</div>
<div id="right-div">
<div>
<p>
Use LEFT and RIGHT arrow keys or MOUSE to move the paddle.
</p>
<p>
Press ESC to toggle menu.
</p>
</div>
<div style="background: white; border: 4px inset burlywood;opacity: 0.8; font-weight: bolder;">
<h1 style="text-align: center;font-weight: bold;text-decoration: underline;">HighScores</h1>
<p id="scoreTable">
</p>
</div>
<div>
<button onclick="reset()">Reset scores</button>
</div>
</div>
<div class="clear-both">
</div>
</div>
<div id="menu">
<div>
<p>
GAME PAUSED! <br /> Press ESC to continue.
</p>
<ul class = "menu">
<li><a href=""><button onclick="newGame()">New Game</button></a></li>
<li><a href="#scoreModal"><button id = "id-high-scores">High Scores</button></a></li>
<li><a href="#helpModal"><button id = "id-help">Help</button></a></li>
<li><a href="#aboutModal"><button id = "id-about">About</button></a></li>
<li><a href="#creditsModal"><button id = "id-credit">Credits</button></a></li>
</ul>
</div>
</div>
<div id="helpModal" class="modalDialog">
<div>
<h2>Help</h2>
<p>
Use LEFT and RIGHT arrow keys or MOUSE to move the paddle.
</p>
<p>
Press ESC to toggle menu.
</p>
<a href="#close" title="Close" class="close">X<a>
</div>
</div>
<div id="aboutModal" class="modalDialog">
<div>
<h2>About</h2>
<p>Breakout is an arcade game developed and published by Atari, Inc.[2] It was conceptualized by Nolan Bushnell and
Steve Bristow, influenced by the 1972 Atari arcade game Pong, and built by Steve Wozniak aided by Steve Jobs.
</p>
<p>The game was ported to multiple platforms and upgraded to video games such as Super Breakout.
In addition, Breakout was the basis and inspiration for certain aspects of the Apple II personal computer.
</p>
<p>
For more info vist:
<a href="https://en.wikipedia.org/wiki/Breakout_(video_game)" target="_blank">https://en.wikipedia.org/wiki/Breakout_(video_game)</a>
</p>
<a href="#close" title="Close" class="close">X<a>
</div>
</div>
<div id="creditsModal" class="modalDialog">
<div>
<h2>Credits</h2>
<p>
Created by Aditya Mehra.
</p>
<p>
Brick and paddle images taken from:
<a href="http://unluckystudio.com/game-art-giveaway-6-breakout-sprites-pack/" target="_blank">Unlucky Studio</a>
</p>
<p>
Game code inspired from:
<a href="https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript" target="_blank">Mozilla Developer Network</a>
</p>
<p>
Audio from:
<a href="http://www.soundboard.com/sb/sound/346449" target="_blank">Ping Pong Ball Hits</a>
</p>
<p>
Breakout logo from:
<a href="http://cooltext.com" target="_blank"><img src="http://cooltext.com/images/ct_pixel.gif" width="80" height="15" alt="Cool Text: Logo and Graphics Generator" border="0" /></a>
</p>
<a href="#close" title="Close" class="close">X</a>
</div>
</div>
<div id="scoreModal" class="modalDialog">
<div>
<h1 style="text-align: center;font-weight: bold;text-decoration: underline;">HighScores</h1>
<p id="scoreTable2">
</p>
<a href="#close" title="Close" class="close">X</a>
<button onclick="reset()">Reset scores</button>
</div>
</div>
<script src="js/ParticleSystem.js"></script>
<script src="js/random.js"></script>
<script src="js/control.js"></script>
<script src="js/ball.js"></script>
<script src="js/paddle.js"></script>
<script src="js/brickField.js"></script>
<script src="js/gameLoop.js"></script>
<script src="js/highScores.js"></script>
<script>
gameHighScores.persistence.report();
</script>
</body>
</html>