-
Notifications
You must be signed in to change notification settings - Fork 0
/
JSPong.html
415 lines (382 loc) · 12.7 KB
/
JSPong.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
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>JSPong</title>
<link rel="icon" href="images/mgf-favicon.png">
<!--Import W3css and the Google Material Icons to have some nice Graphics-->
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
.w3-navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
</style>
</head>
<!--Create the Body and a div, where everything is drawn to-->
<body class="w3-white">
<div class="w3-center w3-white" style="width: 95%; margin: 0 auto;">
<h1>Pong</h1>
<!--This canvas will be used to draw the Pong Field-->
<canvas class="w3-center" id="PongCanvas" width="1280" height="720" style="heigth:100%"></canvas>
<!--Create the settings tab, where the players can select if they want to play against each one another or against the PC-->
<div class="w3-modal" id="setup">
<div class="w3-card-8 w3-modal-content w3-white">
<div class="w3-container w3-cyan">
<h3 class="w3-cyan w3-white-text">Settings:</h3>
</div>
<div class="w3-container w3-white">
<div class="w3-container w3-half w3-white">
<h4>Left Player</h4><p>Keys:<br /> W and S</p>
<label>controlled by computer </label><input id="kil" class="w3-check" type="checkbox" checked="checked" /><br /><br />
<label>Name:</label><input id="namel" value="Player 1" class="w3-input w3-border w3-padding-4" type="text"><br />
</div>
<div class="w3-container w3-half w3-white">
<h4>Right Player </h4><p>Keys:<br />Arrow Up and Arrow Down</p>
<label>controlled by computer </label><input id="kir" class="w3-check" type="checkbox"><br /><br />
<label>Name:</label><input id="namer" value="Player 2" class="w3-input w3-border w3-padding-4" type="text" /><br />
</div>
</div>
<button onClick="start()" class="w3-btn-block w3-cyan">Start Game!</button>
</div>
</div>
<!--Create the dialog, that is displayed, if the left player scored-->
<div class="w3-modal" id="pointleft">
<div class="w3-card-8 w3-modal-content">
<h3 id="pflt" class="w3-center">Point for</h3>
<button onClick="continue_game()" class="w3-btn-block w3-cyan">Continue Game</button>
</div>
</div>
<!--Create the dialog, that will be displayed, when the game is over and the left player wins-->
<div class="w3-modal" id="winleft">
<div class="w3-card-8 w3-modal-content">
<h3 id="grl" class="w3-center">won the game!</h3>
<button onClick="new_game()" class="w3-btn-block w3-cyan">New Game</button>
</div>
</div>
<!--Create the dialog, that is displayed, if the right player scored-->
<div class="w3-modal" id="pointright">
<div class="w3-card-8 w3-modal-content">
<h3 id="pfrt" class="w3-center">Punkt fuer</h3>
<button onClick="continue_game()" class="w3-btn-block w3-cyan">Continue Game</button>
</div>
</div>
<!--Create the dialog, that will be displayed, when the game is over and the right player wins-->
<div class="w3-modal" id="winright">
<div class="w3-card-8 w3-modal-content">
<h3 id="grt" class="w3-center">won the game!</h3>
<button onClick="new_game()" class="w3-btn-block w3-cyan">New Game</button>
</div>
</div>
<!--Load in the images, that will be used, to draw the pong field, ball and players-->
<div style="display: none;">
<img src="background.jpg" id="background" />
<img src="ball.png" id="ballimg" />
<img src="leftpaddle.png" id="leftpaddle" />
</div>
<!--The actual Javascript code, that makes the game happen!-->
<script>
var leftrand=0; //Random offset, that the computer player uses to bounce the ball on a random position on the paddle
var rightrand=0; //Random offset, that the computer player uses to bounce the ball on a random position on the paddle
var pl=0; //Points of the left player
var pr=0; //Points of the right player
var on=false; //Is the game running? true == running, false ==paused
var leftpos = 310; //vertical position of left paddle
var rightpos =310; //vertical position of right paddle
var speed = 500; //speed of the ball
var balldx=5; //Distance, the ball moves in x (horizontal) axis during one frame (30ms)
var balldy=0; //Distance, the ball moves in y (vertical) axis during one frame (30ms)
var ballx=615; //Ball Position x (horizontal)
var bally=335; //Ball Position y (vertical)
var up=false; //Is the key pressed, so that the right paddle moves up?
var down=false; //Is the key pressed, so that the right paddle moves down?
var leftup=false; //Is the key pressed, so that the left paddle moves up?
var leftdown=false; //Is the key pressed, so that the left paddle moves down?
var rightplayer=false; //Is the right player controlled by software? Standard = human player
var leftplayer=true; //Is the right player controlled by software? Standard = software player
//Get the canvas, the Pong game is drawn to
var canvas = document.getElementById("PongCanvas");
var ctx = canvas.getContext("2d");
render();
//Set an intervall of 33ms (= 30FSP) to update the fame
setInterval(loop, 33);
//Display the setup dialog, so that the player can set the game up
document.getElementById('setup').style.display='block'
//This function starts the game
function start()
{
pl=0;
pr=0;
on=true;
leftpos=310;
rightpos=310;
speed=500;
ballx=615;
bally=335;
balldx=5;
balldy=0;
rightplayer = document.getElementById("kir").checked;
leftplayer = document.getElementById("kil").checked;
document.getElementById('setup').style.display='none';
document.getElementById('grt').innerHTML=document.getElementById("namer").value+" won the game!";
document.getElementById('grl').innerHTML=document.getElementById("namel").value+" won the game!";
document.getElementById('pflt').innerHTML="Point for "+document.getElementById("namel").value;
document.getElementById('pfrt').innerHTML="Point for "+document.getElementById("namer").value;
}
//This function displays the new game dialog
function new_game()
{
document.getElementById('setup').style.display='block';
document.getElementById('winleft').style.display='none';
document.getElementById('winright').style.display='none';
}
//The loop function for the game
function loop()
{
//Check, if the game is on (= has started) only then, the game actions will be executed
if(on==true)
{
//If the right player is played by the gamer, then evaluate, if the keyboard key is pressed and move the paddle accordingly
if(rightplayer==false)
{
if(up==true)
{
rightpos-=5;
}
else if(down==true)
{
rightpos+=5;
}
}
else //If it is controlled by the computer, then move it according to the ball position
{
if(bally<(rightpos+25+rightrand))
{
rightpos-=5
}
if(bally>(rightpos+25+rightrand))
{
rightpos+=5
}
}
//Limit the paddle position, so that it cannot go out of the game aerea
if(rightpos<20)
{
rightpos=20;
}
else if(rightpos>600)
{
rightpos=600;
}
//If the right player is played by the gamer, then evaluate, if the keyboard key is pressed and move the paddle accordingly
if(leftplayer==false)
{
if(leftup==true)
{
leftpos-=5;
}
else if(leftdown==true)
{
leftpos+=5;
}
}
else //If it is controlled by the computer, then move it according to the ball position
{
if(bally<(leftpos+25+leftrand))
{
leftpos-=5
}
if(bally>(leftpos+25+leftrand))
{
leftpos+=5
}
}
//Limit the paddle position, so that it cannot go out of the game aerea
if(leftpos<20)
{
leftpos=20;
}
else if(leftpos>600)
{
leftpos=600;
}
// Move ball
ballx+=balldx;
bally+=balldy;
// Check collision with right paddle
if(checkcollission(1230,rightpos,20,100,ballx,bally,50,50)==true)
{
//balldx and balldy are the distances the ball moves in one frame (30ms)
balldy=-(rightpos-bally+25)*0.13; //Set the y direction speed, according to where the ball hit on the paddle
balldx=-Math.sqrt(Math.abs(speed^2-balldy^2)); //Set the x-direction according to the vector speed of the ball and the y direction speed
//Leftrand and Rightrand are the values, the left paddle and right paddle is offset, if controlled by the computer. This results in the ball leaving the paddle at different angles, as the computer tries to center the ball to the paddle and offsets if from the center by this ammount
leftrand=(Math.random() * (50 - (-50))) - 50;
rightrand=(Math.random() * (50 - (-50))) - 50;
}
// Check collision with left paddle
if(checkcollission(30,leftpos,20,100,ballx,bally,50,50)==true)
{
//balldx and balldy are the distances the ball moves in one frame (30ms)
balldy=-(leftpos-bally+25)*0.13; //Set the y direction speed, according to where the ball hit on the paddle
balldx=Math.sqrt(Math.abs(speed^2-balldy^2)); //Set the x-direction according to the vector speed of the ball and the y direction speed
//Leftrand and Rightrand are the values, the left paddle and right paddle is offset, if controlled by the computer. This results in the ball leaving the paddle at different angles, as the computer tries to center the ball to the paddle and offsets if from the center by this ammount
leftrand=(Math.random() * (50 - (-50))) - 50;
rightrand=(Math.random() * (50 - (-50))) - 50;
}
//Cehck, if the ball touched one of the upper or lower field boundarys. In case it did, bounce it back, by inverting the y-dy
if(((bally<=20)&&(balldy<0))||((bally>=650)&&(balldy>0)))
{
balldy=balldy*-1;
}
//If the ball went out of the field to the right, the left player scored a point! So display the corresponding dialog
if(ballx>1260)
{
on=false;
pl++;
//If the left player has 5 points, they win!
if(pl<5)
{
document.getElementById('pointleft').style.display='block';
}
else{document.getElementById('winleft').style.display='block';
}
}
//If the ball went out of the field to the left, the right player scored a point! So display the corresponding dialog
if(ballx<-50)
{
on=false;
pr++;
//If the right player has 5 points, they win!
if(pr<5)
{
document.getElementById('pointright').style.display='block';
}
else{document.getElementById('winright').style.display='block';
}
}
}
}
//This fucntion renders the canvas
function render()
{
//Draw everything
ctx.drawImage(document.getElementById("background"),0,0);
ctx.drawImage(document.getElementById("ballimg"),ballx,bally);
ctx.drawImage(document.getElementById("leftpaddle"), 30,leftpos);
ctx.drawImage(document.getElementById("leftpaddle"), 1230,rightpos);
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.fillText(pl, 40, 50);
ctx.fillText(pr, 1240, 50);
requestAnimationFrame(render);
}
//This function is used to continue the game, after it was paused
function continue_game()
{
ballx=615;
bally=335;
balldy=0;
balldx=5;
leftpos=310;
rightpos=310;
on=true;
down=false;
up=false;
leftup=false;
rightup=false;
document.getElementById('pointleft').style.display='none';
document.getElementById('pointright').style.display='none';
}
//This function checks, if two sprites are overlapping. And returns true, if they do. This is used, to chec for colissions between the ball and the paddles
function checkcollission(x1,y1,b1,h1,x2,y2,b2,h2)
{
if((x2>x1)&&(x2<(x1+b1))&&(y2>y1)&&(y2<(y1+h1)))
{
return true;
}
else if(((x2+b2)>x1)&&((x2+b2)<(x1+b1))&&(y2>y1)&&(y2<(y1+h1)))
{
return true;
}
else if((x2>x1)&&(x2<(x1+b1))&&((y2+h2)>y1)&&((y2+h2)<(y1+h1)))
{
return true;
}
else if(((x2+b2)>x1)&&((x2+b2)<(x1+b1))&&((y2+h2)>y1)&&((y2+h2)<(y1+h1)))
{
return true;
}
else
{
return false;
}
}
//Add an event listener to the document. This is called, any time a keyboard key is released
document.addEventListener('keydown', function(event) {
if(on==true)
{
//event.defaultPrevented = true;
switch(event.keyCode) {
case 38:
case 75:
up = true;
event.cancelBubble = true;
event.returnValue = false;
break;
case 40:
case 77:
down = true;
event.cancelBubble = true;
event.returnValue = false;
break;
case 87:
leftup=true;
event.cancelBubble = true;
event.returnValue = false;
break;
case 83:
leftdown=true;
event.cancelBubble = true;
event.returnValue = false;
break;
}
}
}, true);
//Add an event listener to the document. This is called, any time a keyboard key is pressed
document.addEventListener('keyup', function(event)
{
if(on==true)
{
switch(event.keyCode) {
case 38:
case 75:
up = false;
event.cancelBubble = true;
event.returnValue = false;
break;
case 40:
case 77:
down = false;
event.cancelBubble = true;
event.returnValue = false;
break;
case 87:
leftup=false;
event.cancelBubble = true;
event.returnValue = false;
break;
case 83:
leftdown=false;
event.cancelBubble = true;
event.returnValue = false;
break;
}
}
}, true);
</script>
</div>
</body>
</html>