-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
256 lines (236 loc) · 12.5 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
<!DOCTYPE html/>
<html>
<!-- Project started Decemeber 8, 2014
Last updated December 17, 2014 -->
<head>
<title>Browser Pong</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" type="image/x-icon" href="graphics/bpong.ico"/>
<meta name="language" content="en"/>
<meta name="keywords" content="Open Source, Games, HTML, CSS, JavaScript, Pong"/>
<meta name="description" content="A retro take on browsers."/>
<meta name="author" content="Seth Clydesdale"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="main-info">
<div id="main-title"><img src="graphics/p_default.gif"/><h1>Browser Pong</h1><img src="graphics/p_default.gif"/></div>
<div id="version">Version 1.02</div>
</div>
<div id="UI" style="display:none">
<span id="p1" class="scorep1">0</span><span id="p2" class="scorep2">0</span>
<span class="chains"><span class="label">Chain : </span><span id="chain">0</span><br/><span class="label">Best Chain : </span><span id="bestChain">0</span></span>
<div class="line"></div>
</div>
<!-- START main menu -->
<div class="menu" id="main-menu">
<div class="title">Main menu</div>
<div class="button" onclick="show(getId('difficulty'));getId('modeList').className='mode_0';">One Player</div>
<div class="button" onclick="show(getId('difficulty'));getId('modeList').className='mode_1';">CPU vs CPU</div>
<div class="button" onclick="show(getId('instructions'));">Instructions</div>
<div class="button" onclick="show(getId('customize'));">Customize</div>
<div class="button" onclick="show(getId('about'));">About</div>
<div class="button" onclick="show(getId('notes'));">Patch Notes</div>
<noscript>
<span style="color:#F88">
<div class="title">Error</div>
JavaScript is disabled or not supported. The game engine uses JavaScript, so you wont be able to play without it.</span>
</noscript>
</div>
<!-- END main menu -->
<!-- START pause menu -->
<div id="pause" style="display:none;">
<div class="overlay"></div>
<div class="subMenu">
<div class="title">Paused</div>
<div class="button" onclick="resume();">Resume</div>
<div class="button" onclick="show(getId('instructions'));">Instructions</div>
<div class="button" onclick="show(getId('customize'));">Customize</div>
<div class="button" onclick="show(getId('about'));">About</div>
<div id="quitGame" class="button" onmouseup="domAlert('Quit Game', 'Are you sure you want to quit ?', '<span id=\'confirmQuit\' class=\'button small\'>Yes</span><span class=\'button small\' onclick=\'hide(getId("popup"));\'>No</span>');">Quit Game</div>
</div>
</div>
<!-- END pause menu -->
<!-- START difficulty menu -->
<div class="menu" id="difficulty" style="display:none;">
<div class="title">Choose difficulty</div>
<div class="button back" onclick="hide(this.parentNode);">Back</div>
<div id="modeList" class="mode_0">
<div class="button veryEasy" onclick="startGame(modeType(),0)">Very Easy</div>
<div class="button easy" onclick="startGame(modeType(),1)">Easy</div>
<div class="button normal" onclick="startGame(modeType(),2)">Normal</div>
<div class="button hard" onclick="startGame(modeType(),3)">Hard</div>
<div class="button inhuman" onclick="startGame(modeType(),4)">Inhuman</div>
<!-- START settings -->
<div class="title" style="margin-top:10px;">Settings</div>
<div class="row"><span class="label">Score Cap : </span><input id="cap" class="box" type="number" value="20" min="1" onkeyup="if (Number(this.value) < 1) this.value = 1;" /></div>
<div class="row"><span class="label">Ball Speed : </span><input id="speed" class="box" type="number" value="45" min="1" onkeyup="if (Number(this.value) < 1) this.value = 1;" /></div>
<div class="row"><span class="label">Paddle Sensitivity : </span><input id="sens" class="box" type="number" value="25" min="1" onkeyup="if (Number(this.value) < 1) this.value = 1;" /></div>
<!-- END settings -->
</div>
</div>
<!-- END difficulty menu -->
<!-- START instructions -->
<div class="menu" id="instructions" style="display:none;">
<div class="title">Instructions</div>
<div class="button back" onclick="hide(this.parentNode);">Back</div>
<div class="cell">
<div class="sub title">How to play ?</div>
The game is pretty straight forward. Move your paddle to hit the ball and prevent the CPU from scoring. The first to the set score cap wins. For a list of controls, please see below.
</div>
<div class="cell">
<div class="sub title">Controls</div>
<div class="dashed"><span class="label">Move up</span>Up Arrow / W</div>
<div class="dashed"><span class="label">Move down</span>Down Arrow / S</div>
<div class="dashed"><span class="label">Turbo</span>Shift (Hold)</div>
<div class="dashed last"><span class="label">Pause / Resume</span>P</div>
</div>
<div class="cell">
<div class="sub title">Game Types</div>
There are two Game Types : One Player and CPU vs CPU. In One Player you play against a CPU, in CPU vs CPU you can sit back and watch the computers go at it.
</div>
<div class="cell">
<div class="sub title">Game Modes</div>
After choosing one of the Game Types you will be met with a list of Modes.
<br/><br/>
<ol>
<li class="veryEasy">Very Easy - Slowest CPU</li>
<li class="easy">Easy - Moderately Slow CPU</li>
<li class="normal">Normal - Normal CPU</li>
<li class="hard">Hard - Fast CPU</li>
<li class="inhuman">Inhuman - Extremely Fast CPU</li>
</ol>
<br/>
Below these options are some game settings where you can choose the Score Cap, Ball Speed, and Paddle Sensitivity.
</div>
<div class="cell">
<div class="sub title">Chains and Ball rules</div>
Each time a paddle hits the ball, the Chain increases by 1. The higher the chain, the faster the ball will move. Once someone scores a goal, the chain is reset and the ball returns to its normal speed.
</div>
</div>
<!-- END instructions -->
<!-- START customization -->
<div class="menu" id="customize" style="display:none;">
<div class="title">Customize</div>
<div class="back button" onclick="hide(this.parentNode);">Back</div>
<div id="preview"><div class="line"></div><span class="scorep1">0</span><span class="scorep2">0</span><img id="leftP" class="paddle left" src="graphics/p_default.gif"/><img id="ballP" class="ball" src="graphics/b_default.gif" /><img id="rightP" class="paddle right" src="graphics/p_default.gif"/></div>
<div class="sub title" style="margin-top:10px;">Presets</div>
<div class="overflowable">
<div class="button small" onclick="setPreset('graphics/p_default.gif','graphics/b_default.gif','ball', 'none');">Retro</div>
<div class="button small" onclick="setPreset('graphics/p_wireframe.gif','graphics/b_wireframe.gif','ball', 'none');">Wireframe</div>
<div class="button small" onclick="setPreset('graphics/p_cyber.png','graphics/b_cyber.png','customBall', 'none');">Cyber Ball</div>
<div class="button small" onclick="setPreset('graphics/p_forumactif.png','graphics/b_forumactif.png','customBall', 'none');">Forumotion</div>
<div class="button small" onclick="setPreset('graphics/p_firefox.png','graphics/b_firefox.png','customBall', 'none');">Firefox</div>
<div class="button small" onclick="setPreset('graphics/p_chrome.png','graphics/b_chrome.png','customBall', 'none');">Chrome</div>
<div class="button small" onclick="setPreset('graphics/p_explorer.png','graphics/b_explorer.png','customBall', 'none');">Explorer</div>
<div class="button small" onclick="setPreset('graphics/p_opera.png','graphics/b_opera.png','customBall', 'none');">Opera</div>
<div class="button small" onclick="setPreset('graphics/p_safari.png','graphics/b_safari.png','customBall', 'none');">Safari</div>
</div>
<div class="sub title" style="margin-top:10px;">Custom</div>
<div class="row"><span class="label">Paddle Graphic : </span><input id="p_graphic" class="box" type="text" placeholder="graphics/p_alpha.gif" /></div>
<div class="row"><span class="label">Ball Graphic : </span><input id="b_graphic" class="box" type="text" placeholder="graphics/b_alpha.gif" /></div>
<div class="row"><span class="label">Color : </span><input id="o_color" class="box" type="text" placeholder="#FFFFFF" /></div>
<div class="row"><span class="label">Ball Spin : </span><input id="b_spin" type="checkbox" /></div>
<div class="button small" onclick="setCustom();">Submit</div>
</div>
<!-- END customization -->
<!-- START about -->
<div class="menu" id="about" style="display:none;">
<div class="title">About</div>
<div class="back button" onclick="hide(this.parentNode);">Back</div>
<div class="cell">
<div class="sub title">What is Browser Pong ?</div>
Browser Pong is pong in your browser, it's based off the original game for Atari. It's developed using HTML, CSS, and JavaScript.
</div>
<div class="cell">
<div class="sub title">Compatibility</div>
It is recommended to play this game on a browser that is up to date supporting HTML5, CSS3, and JavaScript. Recommended browsers : Firefox, Google Chrome, Internet Explorer.
</div>
<div class="cell">
<div class="sub title">Can I embed or record Browser Pong ?</div>
Absolutely ! Browser pong is open source and free, so you may embed, record, or adapt the source to your liking. Copy and Paste the following onto your website to embed Browser Pong.
<br/><br/>
<textarea class="copycode" readonly="readonly" onclick="this.select();"><iframe src="http://opensource.olympe.in/browser-pong/" style="height:550px;width:900px;border:none;"></iframe></textarea>
</div>
<div class="cell">
<div class="sub title">Credits</div>
Developer : <a href="http://opensource.olympe.in/about/seth/" target="_blank">Seth Clydesdale</a>
<br/>
Special thanks to my brother for the idea, and player feedback.
</div>
</div>
<!-- END about -->
<!-- START patch notes -->
<div class="menu" id="notes" style="display:none;">
<div class="title">Patch Notes</div>
<div class="back button" onclick="hide(this.parentNode);">Back</div>
<div class="cell">
<div class="title">Version 1.02</div>
<ul>
<li>Audio added for collisions and goals</li>
<li>Ball Speed added to "Settings" under difficulty</li>
<li>Paddle Sensitivity added to "Settings" under difficulty</li>
<li>Removed rule where ball becomes faster based on Score</li>
<li>Updated menus and merged Controls with Instructions</li>
</ul>
</div>
<div class="cell">
<div class="title">Version 1.01</div>
<ul>
<li>Updated ball physics</li>
<li>Added patch notes to main menu</li>
<li>Wireframe added to presets under "Customize"</li>
<li>Fixed a bug where some pause menus would be visible after resuming</li>
<li>Adjusted hitboxes so they run through a single function as arguments</li>
</ul>
</div>
</div>
<!-- END patch notes -->
<!-- START game over -->
<div id="gameOver" style="display:none">
<div class="overlay"></div>
<div class="subMenu">
<div class="title" id="gameWinner"></div>
<div class="cell">
<div class="dashed" id="gameType"></div>
<div class="dashed" id="gameMode"></div>
<div class="dashed" id="gameScore1"></div>
<div class="dashed" id="gameScore2"></div>
<div class="dashed last" id="maxChain"></div>
</div>
<div class="button" onclick="window.location.reload()">Back to main menu</div>
</div>
</div>
<!-- END game over -->
<!-- START popup alert -->
<div id="popup" style="display:none;">
<div class="overlay"></div>
<div class="subMenu alert">
<div id="popupTitle" class="title">Title</div>
<div id="popupContent">This is a custom alert module ;)</div>
<div id="OK" class="button" onclick="hide(getId('popup'));">OK</div>
<div id="customAlert"></div>
</div>
</div>
<!-- END popup alert -->
<!-- START audio -->
<div style="display:none;">
<audio id="hitfx">
<source src="sfx/hit.mp3" type="audio/mpeg"/>
<source src="sfx/hit.wav" type="audio/wav"/>
</audio>
<audio id="collfx">
<source src="sfx/collision.mp3" type="audio/mpeg"/>
<source src="sfx/collision.wav" type="audio/wav"/>
</audio>
<audio id="goalfx">
<source src="sfx/goal.mp3" type="audio/mpeg"/>
<source src="sfx/goal.wav" type="audio/wav"/>
</audio>
</div>
<!-- END audio -->
<script src="engine.js?version=1.023" type="text/javascript"></script>
<script src="autobahn.js"></script>
<script src="wamp_adapter.js"></script>
</body>
</html>