-
Notifications
You must be signed in to change notification settings - Fork 4
/
pong.html
277 lines (235 loc) · 7.98 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
<html>
<head>
<title>
DIGI NINJA DEV
</title>
</head>
<style type="text/css">
#playingField {
position: relative;
top: 0;
left: 0;
}
#ball {
position: absolute;
}
#paddle {
position: absolute;
background-color: #aaa;
}
#instructions {
display : block;
position: relative;
top: 40%;
margin-left: auto;
margin-right: auto;
padding : 10px;
background-color: white;
border : 2px solid red;
border-radius: 5px;
width: 15%;
}
</style>
<html>
<div id='playingField'>
<div id='output'></div>
<div id='ball'></div>
<div id='paddle'></div>
<div id='instructions' style="cursor: pointer;" onclick="startGame()">Click To Start</div>
</div>
<script type="text/javascript">
// Pong game
// Bouncing ball and user-controlled paddle
// Game configuration
// Change these values to customize your game
var fieldWidth = 1350; // how wide is the playing field
var fieldHeight = 650; // how tall is the playing field
var fieldColor = 0x337733; // what color is the playing field
var paddleWidth = 10; // how wide is the paddle
var paddleHeight = 650; // how tall is the paddle
var paddleColor = 0xAAAAAA;// what color is the paddle
var paddleSpeed = 40; // how fast will the paddle move
var paddleXPos = fieldWidth - Math.floor(fieldWidth / 10); // 10% from right
var paddleYPos = Math.floor((fieldHeight - paddleHeight)/2); // middle
var ballSize = 10; // how big is the ball
var ballXPos = Math.floor(fieldWidth / 10); // start 10% from left
var ballYPos = Math.floor((fieldHeight - ballSize) / 2); // middle
var ballXSpeed = Math.floor(Math.random() * 5) + 2; // what is the initial velocity of the ball
var ballYSpeed = 2;
var ballColor = 0xffffff; // what color is the ball
var keyState = 0; // current state of arrow keys
var intTimeHandle =0; // pointer to the interval timer
// Debug output
// you can send debug print message to the screen using this function
// this is helpful if you are not getting the results that you expect
function output(message) {
document.getElementById("output").innerHTML += message + "<br/>\n";
}
function setPosition(x,y) {
this.xpos = x;
this.ypos = y;
this.obj.style.top = y.toString() + "px";
this.obj.style.left = x.toString() + "px";
}
function setColor(newColor) {
newColor = "000000" + newColor.toString(16);
this.obj.style.backgroundColor = "#" + newColor.substr(newColor.length - 6);
}
// Playing field object
function PlayingField(width, height, color) {
this.width = width;
this.height = height;
this.obj = document.getElementById("playingField");
this.obj.style.width = width.toString() + "px";
this.obj.style.height = height.toString() + "px";
this.setColor = setColor;
this.setColor(color);
this.obj.onclick = function() {
// start the game when the field is clicked
// setup the timer tick event handler
document.getElementById('instructions').style.display = 'none';
if (intTimeHandle === 0) {
intTimeHandle = setInterval(function(){timerTick();},40);
}
};
}
// Paddle object
function Paddle(width, height, color, speed, xpos, ypos) {
this.width = width;
this.height = height;
this.speed = speed;
this.obj = document.getElementById("paddle");
this.obj.style.width = width.toString() + "px";
this.obj.style.height = height.toString() + "px";
// you can use this method to change the color of the paddle
this.setColor = setColor;
this.setColor(color);
// you can use this method to change the location of the paddle
this.setPosition = setPosition;
this.setPosition(xpos,ypos);
}
// Ball object
function Ball(size, xpos, ypos, xspeed, yspeed, color) {
this.xspeed = xspeed;
this.yspeed = yspeed;
this.obj = document.getElementById("ball");
// you can use this method to update the ball's location
this.setPosition = setPosition;
// you can use this method to change the size of the ball
this.setSize = setSize;
function setSize(size) {
this.size = size;
this.obj.style.width = this.size.toString() + "px";
this.obj.style.height = this.size.toString() + "px";
var radius = Math.floor(size / 2);
this.obj.style.borderRadius = radius.toString() + "px";
this.obj.style.MozBorderRadius = radius.toString() + "px";
this.obj.style.WebKitBorderRadius = radius.toString() + "px";
}
this.setPosition(xpos,ypos);
this.setSize(size);
this.setColor = setColor;
this.setColor(color);
}
// instantiate a field object - this is the background object
var field = new PlayingField(fieldWidth, fieldHeight, fieldColor);
// instantiate a paddle object - this is what the player controls
var paddle = new Paddle(paddleWidth, paddleHeight, paddleColor, paddleSpeed, paddleXPos, paddleYPos);
// instantiate a ball object - the bouncing ball
var ball = new Ball(ballSize, ballXPos, ballYPos, ballXSpeed, ballYSpeed, ballColor);
// The following functions track the arrow keys when they are pressed
// pressing the up arrow key will cause keyState to be -1
// (negative is the up direction)
// pressing the down arrow key will cause keyState to be 1
// (positive is the down direction)
// releasing either key will cause keyState to be 0
// (no direction - stop the motion of the paddle)
document.onkeydown = function (e) {
var evt = e || window.event;
if (evt.keyCode == 38) {
// up arrow
keyState = -1;
} else if (evt.keyCode == 40) {
// down arrow
keyState = 1;
}
return false;
};
document.onkeyup = function (e) {
var evt = e || window.event;
if (evt.keyCode == 38 || evt.keyCode == 40) {
keyState = 0;
}
return false;
};
// This function should be called when the ball contacts the right wall
// of the field. This should only happen when the player fails to contact
// the ball with the paddle.
function gameOver() {
clearInterval(intTimeHandle);
document.getElementById('instructions').innerHTML = "Game Over";
document.getElementById('instructions').style.display = "block";
field.setColor(0x033003);
}
// create a timer call back function
// this is a list of things that need to be done every time the timer ticks
function timerTick() {
// ******************** put your code here ***************************
// Adjust the ball position
var currx = ball.xpos;
var curry = ball.ypos;
var prevx = ball.xpos;
currx += ball.xspeed;
curry += ball.yspeed;
// Check for ball leaving field
// look for hit on left wall
if (currx < 0) {
currx = 0;
ball.xspeed *= -1;
if(ball.xspeed > 10)
{
ball.xspeed = 9;
}
}
// look for hit on top wall
if (curry < 0) {
curry = 0;
ball.yspeed *= -1;
if(ball.yspeed > 1)
{
ball.yspeed = 1;
}
}
// look for hit on right wall
if (currx > (field.width - ball.size)) {
currx = (field.width - ball.size);
//ball.xspeed *= -1;
gameOver();
}
// look for hit on bottom wall
if (curry > (field.height - ball.size)) {
curry = (field.height - ball.size);
ball.yspeed *= -1;
}
// check for ball contacting paddle
if ((currx > (paddle.xpos - ball.size)) && (currx < (paddle.xpos))) {
if ((curry > (paddle.ypos - Math.floor(ball.size/2))) && (curry < paddle.ypos + paddle.height - Math.floor(ball.size/2))) {
ball.xspeed *= -1.5;
}
}
ball.setPosition(currx,curry);
// Adjust the paddle position
var pady = paddle.ypos;
pady = pady + (paddle.speed * keyState);
if (pady < 0) {
pady = 0;
keyState = 0;
}
if (pady > (field.height - paddle.height)) {
pady = field.height - paddle.height;
keyState = 0;
}
paddle.setPosition(paddle.xpos, pady);
}
</script>
</html>