-
Notifications
You must be signed in to change notification settings - Fork 9
/
pong.html
600 lines (533 loc) · 22.2 KB
/
pong.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
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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
<!DOCTYPE html> <!-- this !DOCTYPE declaration identifies this file as an HTML5 file.
It's not strictly necessary in most cases, but it does keep IE from pooping the bed. -->
<!-- every HTML document starts with the HTML tag -->
<html>
<!-- the HEAD is where we put everything that is NOT actual, visible content. -->
<head>
<!-- this META tag is used by the browser to know how to translate the raw byte data
of the file into character data that it can interpret. This isn't strictly necessary,
but it's nice to include. -->
<meta charset="UTF-8">
<!-- the following META tags define some features for iPhone and iPad -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- this META tag is used by mobile browsers to figure out how to display
the page. We do this because we don't want people to resize it. -->
<meta name="viewport" content="user-scalable=no, width=800">
<!-- this will show up in the browser window's title bar -->
<title>Ping Pong</title>
<!-- normally, one would put the STYLE declaration into a separate file, but
in this case, it's convenient to keep everything in the same file. Cascading
Style Sheets (CSS) are used to setup the shape and colors of things. -->
<style type="text/css">
/* different browsers vary in how much margin or
padding they apply to the root level document,
so we force everyone to have the same amount. */
body
{
background-color: #000000;
margin: 0;
padding: 0;
}
/* It's not typical to include a rule for DIV tags.
In this case, we have a very limited example, so
specifying a rule for the DIV tag is expedient. */
div
{
position: absolute;
margin: 0;
padding: 0;
background-color: #00ff00;
}
/* There are two different score indicators, so the
rule that affects their font appearance will be
applied as a class. */
.score
{
top: 30px;
color: #00ff00;
background-color: transparent;
font-family: fixedsys, Courier, "Courier New" , fixed;
font-weight: bold;
font-size: 36pt;
}
/* and then the individual score counters are positioned
seperately */
#score1
{
left: 325px;
}
#score2
{
left: 445px;
}
/* This is kind of the "background" of the game, as well
as a container that can be used to reposition it
essentially anywhere. */
#board
{
top: 0px;
left: 0px;
width: 800px;
height: 400px;
border-top: solid 10px #00ff00;
border-bottom: solid 10px #00ff00;
background-color: #000000;
}
/* This is just a visual reference. It doesn't actually
affect the game play at all. */
#divider
{
top: 0px;
left: 395px;
width: 10px;
height: 400px;
}
/* This is kind of cheap, but sometimes you just want something
done. This is all that suffices for a "title" screen in the
game. It gives the user a chance to acclimate to the layout
and start on their own time. */
button#start
{
position: absolute;
top: 175px;
left: 300px;
width: 200px;
height: 50px;
}
/* Never forget that you need to give quite a bit of feedback
to the user. This setups the block of text that will tell
the user what is going on. */
#status
{
top: 170px;
left: 95px;
width: 600px;
padding: 10px;
text-align: center;
background-color: black;
display: none;
}
</style>
<!-- again, the SCRIPT declaration would typically appear in its own file,
but it is more convenient today to keep them in one. -->
<script type="text/javascript">
/* JavaScript is an functional and object oriented language. To
define "classes", you define a function that saves attributes
to itself. */
/* by making these specific values variables, we can make the game
more customizable. */
var PLAY_WIDTH = 800;
var PLAY_HEIGHT = 400;
var LINE_WIDTH = 10;
var PADDLE_LENGTH = 100;
/* This is a convenience function to cover a fairly common task.
Basically, this is just creating the same <DIV> tag that are
declared below in the HTML, but doing it through JavaScript. */
function makeRect(x, y, width, height, bgcolor)
{
/* This is a function provided by the browser to create HTML elements on-the-fly.
The element is not automatically added to the page. */
var elem = document.createElement("div");
/* These are all CSS attributes for the element that we are setting
through JavaScript. */
var s = elem.style;
s.position = "absolute";
s.padding = "0";
s.backgroundColor = bgcolor;
s.top = y + "px";
s.left = x + "px";
s.width = width + "px";
s.height = height + "px";
/* This makeRect() function does not do anything to the page itself,
it merely creates the rectangle and gives it back to whomever
called it. */
return elem;
}
/* a little something for IE <= 8's benefit */
if (!document.addEventListener)
{
document.addEventListener = function (eventName, func)
{
eventName = "on" + eventName;
if (this[eventName])
{
var temp = this[eventName];
this[eventName] = function ()
{
console.log(event);
temp(event);
func(event);
};
}
else
{
this[eventName] = function () { func(event) };
}
};
}
/* This class represents the player's paddle and score. */
function Player(scoreDisplay, x, y, width, height)
{
this.x = x;
this.y = y;
this.startY = y;
this.width = width;
this.height = height;
this.score = 0;
this.scoreDisplay = scoreDisplay;
this.elem = makeRect(this.x, this.y, this.width, this.height, "#00ff00");
document.getElementById("board").appendChild(this.elem);
}
/* the following functions are called methods. Methods are functions that
apply to classes. Because we have to set them as properties of the class,
we have to use an alternative form of the function declaration.*/
/* The reset() method is used after a Game Over to put everything back to its
starting position */
Player.prototype.reset = function ()
{
this.moveTo(this.startY);
this.score = 0;
this.scoreDisplay.innerHTML = this.score;
};
/* The moveTo() method is used to move the paddle, check to make it stay inside
the bounds of play, and update the display of the paddle on the screen */
Player.prototype.moveTo = function (y)
{
this.y = y;
if (this.y > PLAY_HEIGHT - PADDLE_LENGTH)
{
this.y = PLAY_HEIGHT - PADDLE_LENGTH;
}
else if (this.y < 0)
{
this.y = 0;
}
this.elem.style.top = Math.floor(this.y) + "px";
};
/* The scored() method is used to increase a player's score and update the
display of the score. */
Player.prototype.scored = function ()
{
this.score++;
this.scoreDisplay.innerHTML = this.score;
};
/* The AI() method is the Artificial Intelligience for paddles. This implementation
is pretty stupid and easy to beat, but offers a fairly reasonable behavior that is
nice to play against for such a simple game. */
Player.prototype.AI = function (ball)
{
/* the AI player is only going to play when the ball is moving towards it.
This means that the AI is specifically only coded for the paddle on the right
side of the play area */
if (ball.dx > 0)
{
if (ball.y > this.y + this.height - LINE_WIDTH)
{
// the ball has moved past the bottom of the paddle
this.moveTo(this.y + 1);
}
else if (ball.y < this.y)
{
// the ball has moved past the top of the paddle
this.moveTo(this.y - 1);
}
}
};
/* The intersect() method checks to see if the rectangle for the ball
overlaps the rectangle for the paddle in any way. It returns a TRUE/FALSE
value that can be used to direct the calling function. */
Player.prototype.intersect = function (ball)
{
return ball.x + ball.width >= this.x
&& ball.x <= this.x + this.width
&& ball.y + ball.height >= this.y
&& ball.y < this.y + this.height;
};
/* The bounce() methods checks to see if the ball hit the paddle (using
the intersect() method), then reflects the ball away, adding some english
to the ball for strategic players to exploit. */
Player.prototype.bounce = function (ball)
{
if (this.intersect(ball))
{
/* Increase the speed of the ball slightly */
ball.dx *= -1.1;
/* determine how far the middle of the ball is from the middle
of the paddle. */
var dy = (this.y + this.height / 2) - (ball.y + ball.height / 2);
/* add some english to the ball as it bounces away, proportional
to how far from the center of the paddle the ball is. The value
of 333 has no inherent meaning. I picked it because it seemed to
work well. This is what is usually called a "fudge factor". */
ball.dy -= dy / 333;
/* tell the calling function a collision occured */
return true;
}
/* or, tell the calling function that no collision occured */
return false;
}
/* This class represents the ball's position. */
function Ball(width, height)
{
//this keeps the ball off the screen so it doesn't appear in a weird place.
this.x = -1000;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.width = width;
this.height = height;
this.elem = makeRect(this.x, this.y, this.width, this.height, "#00ff00");
document.getElementById("board").appendChild(this.elem);
}
/* The drop() function puts the ball "in play". It takes a direction and a
max-speed for the ball, then figures out a semi-random direction in which to
launch the ball. Initially, the ball is setup way off-screen so it doesn't appear
before the game has started. */
Ball.prototype.drop = function (direction, speed)
{
//get the ball out of view before the start of play
this.x = -100;
this.y = 0;
this.display();
//Putting the ball in the center of the play area
this.x = (PLAY_WIDTH - LINE_WIDTH) / 2;
this.y = (PLAY_HEIGHT - LINE_WIDTH) / 2;
/* Another "fudge factor" for speed. Ensures a minimum speed (0.2 pixels
per millisecond) as well as a maximum speed (0.2 + 0.3 = 0.5 pixels per
millisecond). The speed is based on the current combined score of the
two players, and as the game is to 5, the highest score before a game-over
is 4 to 4, so the highest speed is 8. */
var vel = 0.2 + 0.3 * speed / 8;
/* Using a random number generator, picks an angle at which to launch the
ball. It's will be any angle in a 90 degree wedge pointed in the direction
of one of the paddles. */
var angle = (Math.random() * 2 - 1) * Math.PI / 4;
/* sets the initial velocity of the ball */
this.dx = direction * Math.cos(angle) * vel;
this.dy = Math.sin(angle) * vel;
};
/* The display() method puts the ball's representing DIV tag where it should
be on the display area. This is done separately because we may need to update
the location of the ball many times before showing its location on screen. */
Ball.prototype.display = function ()
{
this.elem.style.top = Math.floor(this.y) + "px";
this.elem.style.left = Math.floor(this.x) + "px";
};
/* The advance() method moves the ball forward by its velocity */
Ball.prototype.advance = function ()
{
this.x += this.dx;
this.y += this.dy;
};
/* The bounced() method checks to see if the ball has bounced off of anything,
either the top/bottom walls of the play field or one of the players' paddles. */
Ball.prototype.bounced = function (p1, p2, maxY)
{
// check to see if the ball hit the top wall
if (this.y < 0 || this.y >= maxY)
{
this.dy *= -1;
}
// check to see if the ball hit either of the paddles.
return p1.bounce(this) || p2.bounce(this);
};
/* These variables are used to keep track of things that we
need to play the game. */
var p1, p2, ball, timer, lastFrame, startButton, statusBox, state;
window.onload = function ()
{
// need to be able to show/hide the start button
startButton = document.getElementById("start");
// need to be able to show/hide the status display
statusBox = document.getElementById("status");
// This should be pretty self-explanatory
ball = new Ball(LINE_WIDTH, LINE_WIDTH);
// making the paddles for each of the players
p1 = new Player(
document.getElementById("score1"), // this player's score box
LINE_WIDTH, // the location of the paddle is spaced enough to give a full ball-width behind it
(PLAY_HEIGHT - PADDLE_LENGTH) / 2, // vertically center the paddle on the play area
LINE_WIDTH, // the paddle's width is the same size as all of the other lines
PADDLE_LENGTH); // standardized height
// exactly the same as the other paddle, except on the opposite side of the screen.
p2 = new Player(
document.getElementById("score2"),
PLAY_WIDTH - LINE_WIDTH * 2, // the left edge of the paddle is a ball's width and a paddle's width away from the right edge of the board
(PLAY_HEIGHT - PADDLE_LENGTH) / 2,
LINE_WIDTH,
PADDLE_LENGTH);
};
/* This is an "event". It occurs when something happens. In this case, when the
user moves their mouse. We use it to move the user's paddle. */
function movePlayer1(y)
{
p1.moveTo(y - PADDLE_LENGTH / 2);
}
if(navigator.userAgent.indexOf("iPad") != -1
|| navigator.userAgent.indexOf("iPod") != -1
|| navigator.userAgent.indexOf("iPhone") != -1
|| navigator.userAgent.indexOf("Android") != -1)
{
console.log("Is Mobile OS");
document.addEventListener("touchmove", function (evt)
{
if (evt.touches.length > 0)
{
movePlayer1(evt.touches[0].pageY);
}
evt.preventDefault();
});
}
else
{
console.log("Is Desktop OS");
document.addEventListener("mousemove", function (evt)
{
movePlayer1(evt.clientY);
});
}
/* the following functions are all game-state management functions.
The game goes through multiple states: title screen, play, between-points,
and game-over. These functions handle one of each. */
/* we're doing literally nothing for the title screen. A separate button
on the page controls this */
function titleScreen(delta)
{
//not going to do anything right now
}
/* The time before the ball goes live is used to prepare the user.
The delta parameter to the function tells the function how long it
has been since the last major update. */
function prePlay(delta)
{
if (delta < 1000) // Displayed during the first second
statusBox.innerHTML = "Ready...";
else if (delta < 2000) // Displayed during the second second
statusBox.innerHTML = "Set...";
else if (delta < 3000) // Displayed during the third second
statusBox.innerHTML = "GO!";
else
{
statusBox.style.display = "none"; // hide the status box we were just using
state = updateGame; // change the state of the game to live-action
return true; // tell the calling function that this function says its okay to update the timer
}
return false;
}
/* This is "The Game". This is were all of the logic for the game is managed. */
function updateGame(delta)
{
/* to update the location of the game, we're going to simulate it's position at
every millisecond since the last update. */
for (var i = 0; i < delta && state == updateGame; ++i)
{
// move the ball
ball.advance();
// check to see what happened to the ball
if (!ball.bounced(p1, p2, PLAY_HEIGHT - LINE_WIDTH))
{
var scoringPlayer = null;
/* if the ball didn't hit anything, did it go past
any of the paddles? */
if (ball.x < p1.x)
{
// slipping past paddle 1 means player 2 scored
scoringPlayer = p2;
}
else if (ball.x > p2.x)
{
// slipping past paddle 1 means player 2 scored
scoringPlayer = p1;
}
// if one of the players scored
if(scoringPlayer != null)
{
// increase their score
scoringPlayer.scored();
//redrop the ball
ball.drop(scoringPlayer == p1 ? 1 : -1, p1.score + p2.score);
//show the status box for the next game state
statusBox.style.display = "block";
if (scoringPlayer.score < 5)
{
/* we're still playing if the person who just scored hasn't hit
the max score. */
state = prePlay;
}
else
{
state = gameOver;
}
}
}
}
if (state == updateGame)
{
/* If we're still playing and haven't gone to the game-over or inter-point state,
then we'll run the P2 AI based on the ball's new location */
for (var i = 0; i < delta; i += AI_STEP)
{
p2.AI(ball);
}
ball.display();
}
return true;
}
var AI_STEP = 5;
/* This is really simple, mostly just spends a few of seconds displaying the Game Over
text before resetting the game to the title screen */
function gameOver(delta)
{
if (delta < 3000)
{
statusBox.innerHTML = "Game Over";
}
else
{
clearInterval(timer);
statusBox.style.display = "none";
startButton.style.display = "block";
p1.reset();
p2.reset();
state = titleScreen;
return true;
}
return false;
}
/* this function is the "time keeper" of the game. We have to know how much time
it took to update the screen each time we've shown something, so we know how far
to move the ball next time. */
function timerTick()
{
var currentFrame = new Date().getTime();
var delta = currentFrame - lastFrame;
if (state(delta))
{
lastFrame = currentFrame;
}
}
/* this function is called when the start button is clicked. It initializes the game
and starts the timer working. */
function start()
{
startButton.style.display = "none";
statusBox.style.display = "block";
lastFrame = new Date().getTime();
ball.drop(1, 0);
state = prePlay;
timer = setInterval(timerTick, 33); //roughly 30 FPS (1000 / 30) = 33
}
</script>
</head>
<body>
<div id="board">
<div id="divider"></div>
<div id="score1" class="score">0</div>
<div id="score2" class="score">0</div>
<div id="status" class="score">Ready</div>
<button onclick="start()" id="start">Start</button>
</div>
</body>
</html>