-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
495 lines (418 loc) · 15.8 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
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
<!DOCTYPE html>
<html manifest="site.appcache">
<head>
<title>HTML5 Jump Game</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
//global variables
var context;
var width = 400;
var height = 410;
var plusSizeWidth = 10;
var plusSizeHeight = 10;
var barSizeWidth = 200;
var barSizeHeight = 10;
var bars = new Array();
var plus = new Array();
var gravity = 0.5;
var jumpVel = 9;
var horizontalVel = 3;
var normalSpeed = 2;
var ball = {"x":width/2,"y":height-barSizeHeight,"dx":0,"dy":normalSpeed,"acc":0,"radius":10}
var step = 40;
var collidedBar = null;
var ballMove = false;
var scoreDiv;
var score = 0;
var highscore = 0;
var colors = new Array();
var stop = true;
var frameSpeed = 25;
var gamePause = false;
var isGameOver = false;
/*******************Initialization Functions*****************************************/
//this function is called first when whole page gets loaded
function init() {
context = document.getElementById("canvas").getContext("2d");
drawRect();
//add the colors into a global array, so that bars can be colored
colors.push("#eee614");
colors.push("#ad0505");
colors.push("#1f9f3d");
colors.push("#174b8b");
colors.push("#761884");
colors.push("#00895a");
colors.push("#9f521f");
//initializes the first set of bars
initBars();
initPlus();
initBall();
//assigns a function to be called repeatedly
//setTimeout(gameProcess,1000/frameSpeed);
timerFunction();
scoreDiv = document.getElementById("score");
//bind keyUp and keyDown events
window.onkeydown = keydown;
window.onkeyup = keyup;
}
//initializes the ball
function initBall() {
//this in effect puts the ball on the fifth bar
var mid_indx = Math.floor(bars.length/2);
ball.x = bars[mid_indx].x+barSizeWidth/2;
ball.y = bars[mid_indx].y-ball.radius;
collidedBar = bars[mid_indx];
}
//initializes the bars for the first time
function initBars() {
var y_bar = height-barSizeHeight;
var noOfBars = y_bar/step;
for(var v=0;v<noOfBars;v++) {
//randomly assign x coordinate of bar
var j = (width-barSizeWidth)*Math.random();
//randomly assign color of bar
bars.push({"x":Math.floor(j),"y":y_bar,"color":colors[Math.floor(6*Math.random())]});
//y coordinate for next bar
y_bar-=step;
}
}
//initializes the plus bars for the first time
function initPlus() {
var y1 = height-plusSizeHeight;
var noOfPlus = y1/step;
for(var v1=0;v1<noOfPlus;v1++) {
//randomly assign x coordinate of bar
var j1 = (width-plusSizeWidth)*Math.random();
//randomly assign color of bar
plus.push({"x":j1,"y":y1+20,"color":colors[Math.floor(6*Math.random())]});
//y coordinate for next bar
y1-=step;
}
}
/*******************Event Functions*****************************************/
//called whenever a key is pressed
function keydown(e) {
//space bar keya
if(e.keyCode==38) {
if(stop) {
//the space bar key responds only when the ball is on a bar
if(ball.x>collidedBar.x-ball.radius&&ball.x<collidedBar.x+barSizeWidth+ball.radius)
{
//gives the upward velocity
ball.dy = -jumpVel;
//gives downward acceleration
ball.acc = gravity;
stop = false;
}
}
}
//left arrow key
else if(e.keyCode==37) {
if(ball.x-ball.radius!=0) ball.dx = -horizontalVel;
}
//right arrow key
else if(e.keyCode==39) {
if(ball.x+ball.radius-width!=0) ball.dx = horizontalVel;
}
// 'P' key on the keyboard
else if(e.keyCode==80) {
gamePause = !gamePause;
timerFunction();
}
}
//called whenever a key which was earlier pressed, is released
function keyup(e) {
if(e.keyCode ==37) {
(ball.dx = ball.dx+1)
} else if(e.keyCode ==39) {
(ball.dx = ball.dx-1)
}
}
/*******************Process Functions*****************************************/
//this function is called repeatedly and handles the whole game
function gameProcess() {
//clears the canvas
clear();
//draws boundary rectangle
drawRect();
//increments the pixels coordinates of bars
moveBars();
//increments the pixels coordinates of plus bars
movePlus();
//draws plus bars at the new location
drawPlus();
//checks for the collision between bars and ball
checkPoint();
//checks if ball is to be moved or not
ball = moveBall(ball);
var res = checkBarCollision();
//checks whether the ball has collided with a bar or not
if(res.bool) {
//if the ball has collided with the bar then the ball velocity matches the bar velocity and acceleration
ball.dy = normalSpeed;
ball.acc = 0;
collidedBar = res.bar;
stop = true;
}
//draws the ball at new location
drawBall(ball.x,ball.y,ball.radius);
//draws bars at the new location
drawBars();
//checks for the collision between bars and ball
if(checkFloorCollision()) {
ball.dy = 0;
ball.dx = 0;
ball.acc = 0;
stop = true;
}
makeDifficult();
//if the game is not paused and it not over, then only the game is continued further
if(!gamePause&&!isGameOver)
timerFunction();
}
function checkPoint() {
//checks for the collision between ball and bar
for(var i=0;i<plus.length;i++) {
if((ball.y-ball.radius<=plus[i].y+plusSizeHeight&&ball.y+ball.radius>=plus[i].y)&&(ball.x+ball.radius>=plus[i].x&&ball.x-ball.radius<=plus[i].x+plusSizeWidth))
{
score+=200;
plus.splice(i,1);
//adds a new bar for every bar pushed out
var j = (width-plusSizeWidth)*Math.random();
plus.push({"x":j,"y":-plusSizeHeight,"color":colors[Math.floor(6*Math.random())]});
}
}
}
function timerFunction() {
setTimeout(gameProcess,1000/frameSpeed);
}
//this function increases the difficulty of the game based on the score till now
function makeDifficult() {
if(score>1000&&score<3000) {
frameSpeed = 30;
document.getElementById("level").innerHTML = "Level: 2";
barSizeWidth = 180;
}
else if(score>3000&&score<5000) {
frameSpeed = 35;
document.getElementById("level").innerHTML = "Level: 3";
barSizeWidth = 150;
}
else if(score>5000&&score<8000) {
frameSpeed = 40;
document.getElementById("level").innerHTML = "Level: 4";
barSizeWidth = 120;
}
else if(score>8000&&score<12000) {
frameSpeed = 45;
document.getElementById("level").innerHTML = "Level: 5";
barSizeWidth = 100;
}
else if(score>12000&&score<16000) {
frameSpeed = 50;
document.getElementById("level").innerHTML = "Level: 6";
barSizeWidth = 80;
}
else if(score>16000&&score<20000) {
frameSpeed = 60;
document.getElementById("level").innerHTML = "Level: 7";
barSizeWidth = 80;
}
else if(score>20000) {
frameSpeed = 80;
document.getElementById("level").innerHTML = "Level: 8";
barSizeWidth = 80;
}
}
//this function is called when the ball touches the ground
function gameOver() {
// WIDS Workshop: high score is updated here. Use IndexedDB or localStorage to save it to local disk
if (highscore < score) {
highscore = score;
document.getElementById("highscore").innerHTML = 'High Score: ' + highscore;
}
isGameOver = true;
document.getElementById("status").innerHTML = "<p style=\"font-size:20px; color:#333; font-family:Arial;\">Game Over. Press F5 to restart.</p>";
}
var strt = 0;
function starte() {
if(!strt){
init();
strt+=1;
document.getElementById("starte").value = "RELOAD";
}
else{
location.reload(true);
}
}
/*******************Collision Detection Functions*****************************************/
function checkBarCollision() {
//coords of bottom point
var response = {"bar":null,"bool":false};
var temp_y = ball.y+ball.radius;
for(var i = 0; i<bars.length;i++) {
var mod = Math.floor(bars[i].y-temp_y);
var b = mod>-5 && mod<5;
var b1 = mod>-barSizeHeight && mod<barSizeHeight;
//going down
if(b1&&(ball.x>=bars[i].x&&ball.x<=bars[i].x+barSizeWidth)&&ball.dy>0) {
ball.y = bars[i].y-ball.radius;
response.bool = true;
response.bar = bars[i];
}
//going up
if(b&&(ball.x>=bars[i].x&&ball.x<=bars[i].x+barSizeWidth)&&ball.dy<=0) {
ball.y = bars[i].y-ball.radius;
response.bool = true;
response.bar = bars[i];
}
}
return response;
}
function checkFloorCollision() {
//checks for the collision between ball and bar
if(height-(ball.y+ball.radius)<01) {
ball.dy = 0;ball.dx=0;ball.acc=0;
gameOver();
}
var right_wall = ball.x+ball.radius-width;
var left_wall = ball.x-ball.radius;
var bol1 = right_wall<3&&right_wall>-3;
var bol2 = left_wall<3&&left_wall>-3;
if(bol1||bol2) {
ball.dx = 0;
}
if(ball.x>collidedBar.x||ball.x<collidedBar.x+barSizeWidth) {
ball.acc = gravity;
}
return false;
}
/*******************Movement Functions*****************************************/
function movePlus() {
//checks if the bar is about to move out from the canvas
if(bars.length>0&&bars[0].y==height-2) {
//removes the bottom-most bar
plus.shift();
//adds a new bar for every bar pushed out
var j = (width-plusSizeWidth)*Math.random();
plus.push({"x":j,"y":-3*plusSizeHeight,"color":colors[Math.floor(6*Math.random())]});
}
//increments the y-coordinate of all the bars
for(var i=0;i<plus.length;i++) {
plus[i].y += 2;
}
}
function moveBall(inpBall) {
//checks if the ball is at right or left end. If not then increments the ball coordinates
inpBall.x += Math.floor(inpBall.dx);
inpBall.dy += inpBall.acc;
inpBall.y += Math.floor(inpBall.dy + inpBall.acc/2);
return inpBall;
}
function moveBars() {
//checks if the bar is about to move out from the canvas
if(bars.length>0&&bars[0].y==height-normalSpeed) {
//removes the bottom-most bar
bars.shift();
//increments the score by 20 for every removed bar
score+=20;
scoreDiv.innerHTML = "Score : "+score;
//adds a new bar for every bar pushed out
var j = (width-barSizeWidth)*Math.random();
bars.push({"x":j,"y":-barSizeHeight,"color":colors[Math.floor(6*Math.random())]});
}
//increments the y-coordinate of all the bars
for(var i=0;i<bars.length;i++) {
bars[i].y += normalSpeed;
}
}
/*******************Drawing Functions*****************************************/
//draws all the bars, by taking their references from a global array
function drawPlus() {
for(var i=0;i<plus.length;i++) {
drawPlus1(plus[i].x,plus[i].y,plus[i].color);
}
}
function drawPlus1(x,y,color) {
context.fillStyle = color;
context.beginPath();
context.fillRect(x,y,plusSizeWidth,plusSizeHeight);
context.closePath();
context.fill();
}
//draws all the bars, by taking their references from a global array
function drawBars() {
for(var i=0;i<bars.length;i++) {
drawBar(bars[i].x,bars[i].y,bars[i].color);
}
}
//draws black ball at specified location
function drawBall(x,y,r) {
context.fillStyle = "#2f2f2f";
context.beginPath();
context.arc(x,y,r,0,2*Math.PI,true);
context.closePath();
context.fill();
}
//draws rectangle at the canvas boundary
function drawRect() {
context.beginPath();
context.strokeRect(0,0,width,height);
context.closePath();
context.fill();
context.fillStyle = "rgba(255, 245, 187, 0.4)";
context.fillRect(0,0,400,410);
}
//draws a bar at specified location, and of specified color
function drawBar(x,y,color) {
context.fillStyle = color;
context.beginPath();
context.fillRect(x,y,barSizeWidth,barSizeHeight);
context.closePath();
context.fill();
}
//clears the whole canvas
function clear() {
context.clearRect(0,0,width,height);
}
function starter() {
context = document.getElementById("canvas").getContext("2d");
context.font = "40px Arial";
context.textAlign = "center";
context.fillText("Click Start", 200, 160);
context.fillText("Collect as many dots", 200, 215);
context.fillText("as you can!!", 200, 255);
drawRect();
// WIDS Workshop: this is the window.onload function.
// Init IndexedDB here and read the save highscore value here.
}
//calls init function whenever the page gets fully loaded
window.addEventListener("load",starter,true);
// WIDS Workshop: Add Offline AppCache "updateready" event listener here
window.applicationCache.addEventListener('updateready',
function(e) {
var reload = window.confirm("We have an update for this game, do you want to update now?");
if (reload)
window.location.reload();
},
false );
</script>
</head>
<body style="background-color:#f1eeee;">
<div align="center">
<div id="highscore" style="font-size:40px; color:#0c0; font-family:Arial;">High Score : 0</div>
<div id="score" style="font-size:40px; color:#c00; font-family:Arial;">Score : 0</div>
<div id="level" style="font-size:40px; color:#00a; font-family:Arial;">Level : 1</div>
<canvas width="400" height="410" id="canvas" style="background-image:url(HTML5_Logo_512.png); background-repeat:no-repeat; background-position:center;"></canvas>
<div id="status"></div>
<p style="font-size:16px; color:#333; font-family:Arial;">Keep the ball afloat in air</p>
<p style="font-size:16px; color:#333; font-family:Arial;">Use left and right arrow key to move, Up arrow to jump, P button to pause</p>
<input type="button" id="starte" onClick="javascript: starte();" value="START" /> <br /><br />
<audio preload="auto" controls="controls" autoplay="autoplay">
<source src="1.ogg" type="audio/ogg" />
<source src="1.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>