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
|
<html>
<head>
<title>Rebound: an example game</title>
<style>
#playingArea_element{
position: relative;
/* top: 240; */
/* left: 100; */
margin: 1em auto;
border: 1px solid black;
width: 500;
height: 500;
background-color: rgb(0,0,0);
}
#paddle_element{
position: absolute;
top: 470;
left: 258;
width: 64;
height: 16;
}
#ball_element{
position: absolute;
top: 4;
left: 200;
width: 16;
height: 16;
}
#score_element{
position: absolute;
top: 486;
left: 0;
width: 500;
height: 14;
font-size: 10pt;
color: white;
background-color: rgb(32,128,64);
}
#paddle_bounce1{
position: absolute;
top: 340;
left: 258;
width: 64;
height: 16;
}
#paddle_bounce2{
position: absolute;
top: 300;
left: 150;
width: 64;
height: 16;
}
#paddle_bounce3{
position: absolute;
top: 300;
left: 350;
width: 64;
height: 16;
}
#paddle_bounce4{
position: absolute;
top: 150;
left: 200;
width: 64;
height: 16;
}
#paddle_bounce5{
position: absolute;
top: 150;
left: 300;
width: 64;
height: 16;
}
</style>
<script language="JavaScript">
var ball;
var paddle;
var score;
var bounce1;
var bounce2;
var bounce3;
var bounce4;
var bounce5;
var dp = 0; // velocity of the paddle
var dx = 6; // initial speed of ball along x-axis (delta-x, aka dx)
var dy = 6; // initial speed of ball along y-axis (delta-y, aka dy)
var currentScore = 0;
var bp1 = 0;
var bp2 = 0;
var bp3 = 0;
var bp4 = 0;
var bp5 = 0;
// ``timeout id'' that we're waiting for next (never actually used,
// but a future extension might need to invoke clearTimeout on this)
var timer;
// initial conditions for ball and paddle.
var paddleLeft = 258;
var ballLeft = 200;
var ballTop = 4;
var bounce1 = 200;
var bounce2 = 200;
var bounce3 = 200;
var bounce4 = 200;
var bounce5 = 200;
// This is a FUNCTION definition in JavaScript.
// This function takes no arguments; it will be used to
// set up initial state when the page loads
// (see the onLoad attribute in the <body> tag below)
// Felix does not know much more about how to use
// document.getElementById; he's just following the
// example code in the devx.com article.
function init() {
// set up objects corresponding to HTML elements
ball = document.getElementById('ball_element');
paddle = document.getElementById('paddle_element');
score = document.getElementById('score_element');
bounce1 = document.getElementById('paddle_bounce1');
// setup key event listener (see below)
document.onkeydown = keyDownListener;
document.onkeyup = keyUpListener;
// start the game loop
start();
// OOH reflection!
// alert(allprops("window", window));
// alert(allprops("document", document));
}
function allprops(name, obj) {
property_list = "The properties of " + name + " are:\n{ ";
for (prop in obj)
property_list += prop + " ";
property_list += "}";
return property_list;
}
// Here's another JavaScript function definition.
// This one takes a single argument, the key stroke
// event, which the browser passes to the listener.
// (Although apparently Microsoft Internet Explorer's
// behavior is different from Mozilla's, so one needs
// to compensate for that.)
function keyDownListener( key_event ) {
if (! key_event ) { // if key_event wasn't passed to us
// then we must be in Internet Explorer, and need
// to pull the event explicitly out of browser window.
key_event = window.event;
}
// keyCode 37 is left arrow
if (key_event.keyCode == 37) {
dp = -4;
}
// keyCode 39 is right arrow
if (key_event.keyCode == 39) {
dp = +4;
}
// FYI - keyCode 38 is up arrow, 40 is down arrow.
}
function keyUpListener(e) {
dp = 0;
}
function start(){
// game loop
detectCollisions();
render();
difficulty();
// end conditions
if (ballTop < 470) {
// still in play - keep the loop going
timer = setTimeout('start()',50);
}
else {
gameOver();
}
}
function detectCollisions(){
// just reflect the ball on a collision
// a more robust engine could change trajectory of
// the ball based on where the ball hits the paddle
if (collisionX())
dx = dx * -1;
if (collisionY())
dy = dy * -1;
}
// The command ``return E'' means that the whole function
// invocation should evaluate to the value of E
function collisionX(){
// check left and right boundaries
if (ballLeft < 4 || ballLeft > 480)
return true;
return false;
}
function collisionY(){
// check if at top of playing area
if (ballTop < 4)
return true;
// check to see if ball collided with paddle
if (ballTop > 450){
if (ballLeft > paddleLeft &&
ballLeft < paddleLeft + 64)
return true;
}
return false;
}
function render(){
moveBall();
movePaddle();
updateScore();
}
function moveBall(){
ballLeft += dx;
ballTop += dy;
ball.style.left = ballLeft;
ball.style.top = ballTop;
}
function movePaddle() {
if (paddleLeft > 0 && paddleLeft < 436) { // XXX magic nums?
paddleLeft = paddleLeft + dp;
// 'px' is the unit of measure (pixels)
paddle.style.left = paddleLeft + 'px';
}
}
function updateScore(){
currentScore += 5;
score.innerHTML = 'Score: ' + currentScore;
}
function difficulty(){
// as the game progresses, increase magnitude of the
// vertical speed
if(currentScore % 1000 == 0){
if(dy > 0)
dy += 1;
else
dy -= 1;
}
}
function gameOver(){
// end the game by clearing the timer and modifying
// the score label
clearTimeout(timer);
score.innerHTML += " Game Over";
score.style.backgroundColor = 'rgb(128,0,0)';
}
</script>
</head>
<body onLoad="init()">
<h1>Rebound: an example game</h1>
<div id="playingArea_element">
<div id="paddle_element">
<img src="http://s23.postimg.org/8dvn9u54n/paddle.gif" />
</div>
<div id="ball_element">
<img src="http://s22.postimg.org/homglchv1/ball.gif" />
</div>
<div id="paddle_bounce1">
<img src="http://s15.postimg.org/spjrsb45j/bounce.gif" />
</div>
<div id="paddle_bounce2">
<img src="http://s15.postimg.org/spjrsb45j/bounce.gif" />
</div>
<div id="paddle_bounce3">
<img src="http://s15.postimg.org/spjrsb45j/bounce.gif" />
</div>
<div id="paddle_bounce4">
<img src="http://s15.postimg.org/spjrsb45j/bounce.gif" />
</div>
<div id="paddle_bounce5">
<img src="http://s15.postimg.org/spjrsb45j/bounce.gif" />
</div>
<div id="score_element">Score: 0</div>
</div>
</body>
</html>
|
