1
// RequestAnimFrame: a browser API for getting smooth animations
2
window.requestAnimFrame = (function() {
3
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
4
  function(callback) {
5
    window.setTimeout(callback, 1000 / 60);
6
  };
7
})();
8

9
var canvas = document.getElementById('canvas'),
10
  ctx = canvas.getContext('2d');
11

12
var width = 422,
13
  height = 552;
14

15
canvas.width = width;
16
canvas.height = height;
17

18
//Variables for game
19
var platforms = [],
20
  image = document.getElementById("sprite"),
21
  player, platformCount = 10,
22
  position = 0,
23
  gravity = 0.2,
24
  animloop,
25
  flag = 0,
26
  menuloop, broken = 0,
27
  dir, score = 0, firstRun = true;
28

29
//Base object
30
var Base = function() {
31
  this.height = 5;
32
  this.width = width;
33

34
  //Sprite clipping
35
  this.cx = 0;
36
  this.cy = 614;
37
  this.cwidth = 100;
38
  this.cheight = 5;
39

40
  this.moved = 0;
41

42
  this.x = 0;
43
  this.y = height - this.height;
44

45
  this.draw = function() {
46
    try {
47
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
48
    } catch (e) {}
49
  };
50
};
51

52
var base = new Base();
53

54
//Player object
55
var Player = function() {
56
  this.vy = 11;
57
  this.vx = 0;
58

59
  this.isMovingLeft = false;
60
  this.isMovingRight = false;
61
  this.isDead = false;
62

63
  this.width = 55;
64
  this.height = 40;
65

66
  //Sprite clipping
67
  this.cx = 0;
68
  this.cy = 0;
69
  this.cwidth = 110;
70
  this.cheight = 80;
71

72
  this.dir = "left";
73

74
  this.x = width / 2 - this.width / 2;
75
  this.y = height;
76

77
  //Function to draw it
78
  this.draw = function() {
79
    try {
80
      if (this.dir == "right") this.cy = 121;
81
      else if (this.dir == "left") this.cy = 201;
82
      else if (this.dir == "right_land") this.cy = 289;
83
      else if (this.dir == "left_land") this.cy = 371;
84

85
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
86
    } catch (e) {}
87
  };
88

89
  this.jump = function() {
90
    this.vy = -8;
91
  };
92

93
  this.jumpHigh = function() {
94
    this.vy = -16;
95
  };
96

97
};
98

99
player = new Player();
100

101
//Platform class
102

103
function Platform() {
104
  this.width = 70;
105
  this.height = 17;
106

107
  this.x = Math.random() * (width - this.width);
108
  this.y = position;
109

110
  position += (height / platformCount);
111

112
  this.flag = 0;
113
  this.state = 0;
114

115
  //Sprite clipping
116
  this.cx = 0;
117
  this.cy = 0;
118
  this.cwidth = 105;
119
  this.cheight = 31;
120
  
121
  // G-98DP5VKS42
122
  
123
  //Function to draw it
124
  this.draw = function() {
125
    try {
126

127
      if (this.type == 1) this.cy = 0;
128
      else if (this.type == 2) this.cy = 61;
129
      else if (this.type == 3 && this.flag === 0) this.cy = 31;
130
      else if (this.type == 3 && this.flag == 1) this.cy = 1000;
131
      else if (this.type == 4 && this.state === 0) this.cy = 90;
132
      else if (this.type == 4 && this.state == 1) this.cy = 1000;
133

134
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
135
    } catch (e) {}
136
  };
137

138
  //Platform types
139
  //1: Normal
140
  //2: Moving
141
  //3: Breakable (Go through)
142
  //4: Vanishable 
143
  //Setting the probability of which type of platforms should be shown at what score
144
  if (score >= 5000) this.types = [2, 3, 3, 3, 4, 4, 4, 4];
145
  else if (score >= 2000 && score < 5000) this.types = [2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4];
146
  else if (score >= 1000 && score < 2000) this.types = [2, 2, 2, 3, 3, 3, 3, 3];
147
  else if (score >= 500 && score < 1000) this.types = [1, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3];
148
  else if (score >= 100 && score < 500) this.types = [1, 1, 1, 1, 2, 2];
149
  else this.types = [1];
150

151
  this.type = this.types[Math.floor(Math.random() * this.types.length)];
152

153
  //We can't have two consecutive breakable platforms otherwise it will be impossible to reach another platform sometimes!
154
  if (this.type == 3 && broken < 1) {
155
    broken++;
156
  } else if (this.type == 3 && broken >= 1) {
157
    this.type = 1;
158
    broken = 0;
159
  }
160

161
  this.moved = 0;
162
  this.vx = 1;
163
}
164

165
for (var i = 0; i < platformCount; i++) {
166
  platforms.push(new Platform());
167
}
168

169
//Broken platform object
170
var Platform_broken_substitute = function() {
171
  this.height = 30;
172
  this.width = 70;
173

174
  this.x = 0;
175
  this.y = 0;
176

177
  //Sprite clipping
178
  this.cx = 0;
179
  this.cy = 554;
180
  this.cwidth = 105;
181
  this.cheight = 60;
182

183
  this.appearance = false;
184

185
  this.draw = function() {
186
    try {
187
      if (this.appearance === true) ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
188
      else return;
189
    } catch (e) {}
190
  };
191
};
192

193
var platform_broken_substitute = new Platform_broken_substitute();
194

195
//Spring Class
196
var spring = function() {
197
  this.x = 0;
198
  this.y = 0;
199

200
  this.width = 26;
201
  this.height = 30;
202

203
  //Sprite clipping
204
  this.cx = 0;
205
  this.cy = 0;
206
  this.cwidth = 45;
207
  this.cheight = 53;
208

209
  this.state = 0;
210

211
  this.draw = function() {
212
    try {
213
      if (this.state === 0) this.cy = 445;
214
      else if (this.state == 1) this.cy = 501;
215

216
      ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
217
    } catch (e) {}
218
  };
219
};
220

221
var Spring = new spring();
222

223
function init() {
224
  //Variables for the game
225
  var dir = "left",
226
    jumpCount = 0;
227
  
228
  firstRun = false;
229

230
  //Function for clearing canvas in each consecutive frame
231

232
  function paintCanvas() {
233
    ctx.clearRect(0, 0, width, height);
234
  }
235

236
  //Player related calculations and functions
237

238
  function playerCalc() {
239
    if (dir == "left") {
240
      player.dir = "left";
241
      if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
242
    } else if (dir == "right") {
243
      player.dir = "right";
244
      if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
245
    }
246

247
    //Adding keyboard controls
248
    document.onkeydown = function(e) {
249
      var key = e.keyCode;
250
      
251
      if (key == 37) {
252
        dir = "left";
253
        player.isMovingLeft = true;
254
      } else if (key == 39) {
255
        dir = "right";
256
        player.isMovingRight = true;
257
      }
258
      
259
      if(key == 32) {
260
        if(firstRun === true)
261
          init();
262
        else 
263
          reset();
264
      }
265
    };
266

267
    document.onkeyup = function(e) {
268
      var key = e.keyCode;
269
    
270
      if (key == 37) {
271
        dir = "left";
272
        player.isMovingLeft = false;
273
      } else if (key == 39) {
274
        dir = "right";
275
        player.isMovingRight = false;
276
      }
277
    };
278

279
    //Accelerations produces when the user hold the keys
280
    if (player.isMovingLeft === true) {
281
      player.x += player.vx;
282
      player.vx -= 0.15;
283
    } else {
284
      player.x += player.vx;
285
      if (player.vx < 0) player.vx += 0.1;
286
    }
287

288
    if (player.isMovingRight === true) {
289
      player.x += player.vx;
290
      player.vx += 0.15;
291
    } else {
292
      player.x += player.vx;
293
      if (player.vx > 0) player.vx -= 0.1;
294
    }
295

296
    // Speed limits!
297
    if(player.vx > 8)
298
      player.vx = 8;
299
    else if(player.vx < -8)
300
      player.vx = -8;
301

302
    //console.log(player.vx);
303
    
304
    //Jump the player when it hits the base
305
    if ((player.y + player.height) > base.y && base.y < height) player.jump();
306

307
    //Gameover if it hits the bottom 
308
    if (base.y > height && (player.y + player.height) > height && player.isDead != "lol") player.isDead = true;
309

310
    //Make the player move through walls
311
    if (player.x > width) player.x = 0 - player.width;
312
    else if (player.x < 0 - player.width) player.x = width;
313

314
    //Movement of player affected by gravity
315
    if (player.y >= (height / 2) - (player.height / 2)) {
316
      player.y += player.vy;
317
      player.vy += gravity;
318
    }
319

320
    //When the player reaches half height, move the platforms to create the illusion of scrolling and recreate the platforms that are out of viewport...
321
    else {
322
      platforms.forEach(function(p, i) {
323

324
        if (player.vy < 0) {
325
          p.y -= player.vy;
326
        }
327

328
        if (p.y > height) {
329
          platforms[i] = new Platform();
330
          platforms[i].y = p.y - height;
331
        }
332

333
      });
334

335
      base.y -= player.vy;
336
      player.vy += gravity;
337

338
      if (player.vy >= 0) {
339
        player.y += player.vy;
340
        player.vy += gravity;
341
      }
342

343
      score++;
344
    }
345

346
    //Make the player jump when it collides with platforms
347
    collides();
348

349
    if (player.isDead === true) gameOver();
350
  }
351

352
  //Spring algorithms
353

354
  function springCalc() {
355
    var s = Spring;
356
    var p = platforms[0];
357

358
    if (p.type == 1 || p.type == 2) {
359
      s.x = p.x + p.width / 2 - s.width / 2;
360
      s.y = p.y - p.height - 10;
361

362
      if (s.y > height / 1.1) s.state = 0;
363

364
      s.draw();
365
    } else {
366
      s.x = 0 - s.width;
367
      s.y = 0 - s.height;
368
    }
369
  }
370

371
  //Platform's horizontal movement (and falling) algo
372

373
  function platformCalc() {
374
    var subs = platform_broken_substitute;
375

376
    platforms.forEach(function(p, i) {
377
      if (p.type == 2) {
378
        if (p.x < 0 || p.x + p.width > width) p.vx *= -1;
379

380
        p.x += p.vx;
381
      }
382

383
      if (p.flag == 1 && subs.appearance === false && jumpCount === 0) {
384
        subs.x = p.x;
385
        subs.y = p.y;
386
        subs.appearance = true;
387

388
        jumpCount++;
389
      }
390

391
      p.draw();
392
    });
393

394
    if (subs.appearance === true) {
395
      subs.draw();
396
      subs.y += 8;
397
    }
398

399
    if (subs.y > height) subs.appearance = false;
400
  }
401

402
  function collides() {
403
    //Platforms
404
    platforms.forEach(function(p, i) {
405
      if (player.vy > 0 && p.state === 0 && (player.x + 15 < p.x + p.width) && (player.x + player.width - 15 > p.x) && (player.y + player.height > p.y) && (player.y + player.height < p.y + p.height)) {
406

407
        if (p.type == 3 && p.flag === 0) {
408
          p.flag = 1;
409
          jumpCount = 0;
410
          return;
411
        } else if (p.type == 4 && p.state === 0) {
412
          player.jump();
413
          p.state = 1;
414
        } else if (p.flag == 1) return;
415
        else {
416
          player.jump();
417
        }
418
      }
419
    });
420

421
    //Springs
422
    var s = Spring;
423
    if (player.vy > 0 && (s.state === 0) && (player.x + 15 < s.x + s.width) && (player.x + player.width - 15 > s.x) && (player.y + player.height > s.y) && (player.y + player.height < s.y + s.height)) {
424
      s.state = 1;
425
      player.jumpHigh();
426
    }
427

428
  }
429

430
  function updateScore() {
431
    var scoreText = document.getElementById("score");
432
    scoreText.innerHTML = score;
433
  }
434

435
  function gameOver() {
436
    platforms.forEach(function(p, i) {
437
      p.y -= 12;
438
    });
439

440
    if(player.y > height/2 && flag === 0) {
441
      player.y -= 8;
442
      player.vy = 0;
443
    } 
444
    else if(player.y < height / 2) flag = 1;
445
    else if(player.y + player.height > height) {
446
      showGoMenu();
447
      hideScore();
448
      player.isDead = "lol";
449

450
    }
451
  }
452

453
  //Function to update everything
454

455
  function update() {
456
    paintCanvas();
457
    platformCalc();
458

459
    springCalc();
460

461
    playerCalc();
462
    player.draw();
463

464
    base.draw();
465

466
    updateScore();
467
  }
468

469
  menuLoop = function(){return;};
470
  animloop = function() {
471
    update();
472
    requestAnimFrame(animloop);
473
  };
474

475
  animloop();
476

477
  hideMenu();
478
  showScore();
479
}
480

481
function reset() {
482
  hideGoMenu();
483
  showScore();
484
  player.isDead = false;
485
  
486
  flag = 0;
487
  position = 0;
488
  score = 0;
489

490
  base = new Base();
491
  player = new Player();
492
  Spring = new spring();
493
  platform_broken_substitute = new Platform_broken_substitute();
494

495
  platforms = [];
496
  for (var i = 0; i < platformCount; i++) {
497
    platforms.push(new Platform());
498
  }
499
}
500

501
//Hides the menu
502
function hideMenu() {
503
  var menu = document.getElementById("mainMenu");
504
  menu.style.zIndex = -1;
505
}
506

507
//Shows the game over menu
508
function showGoMenu() {
509
  var menu = document.getElementById("gameOverMenu");
510
  menu.style.zIndex = 1;
511
  menu.style.visibility = "visible";
512

513
  var scoreText = document.getElementById("go_score");
514
  scoreText.innerHTML = "You scored " + score + " points!";
515
}
516

517
//Hides the game over menu
518
function hideGoMenu() {
519
  var menu = document.getElementById("gameOverMenu");
520
  menu.style.zIndex = -1;
521
  menu.style.visibility = "hidden";
522
}
523

524
//Show ScoreBoard
525
function showScore() {
526
  var menu = document.getElementById("scoreBoard");
527
  menu.style.zIndex = 1;
528
}
529

530
//Hide ScoreBoard
531
function hideScore() {
532
  var menu = document.getElementById("scoreBoard");
533
  menu.style.zIndex = -1;
534
}
535

536
function playerJump() {
537
  player.y += player.vy;
538
  player.vy += gravity;
539

540
  if (player.vy > 0 && 
541
    (player.x + 15 < 260) && 
542
    (player.x + player.width - 15 > 155) && 
543
    (player.y + player.height > 475) && 
544
    (player.y + player.height < 500))
545
    player.jump();
546

547
  if (dir == "left") {
548
    player.dir = "left";
549
    if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
550
  } else if (dir == "right") {
551
    player.dir = "right";
552
    if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
553
  }
554

555
  //Adding keyboard controls
556
  document.onkeydown = function(e) {
557
    var key = e.keyCode;
558

559
    if (key == 37) {
560
      dir = "left";
561
      player.isMovingLeft = true;
562
    } else if (key == 39) {
563
      dir = "right";
564
      player.isMovingRight = true;
565
    }
566
  
567
    if(key == 32) {
568
      if(firstRun === true) {
569
        init();
570
        firstRun = false;
571
      }
572
      else 
573
        reset();
574
    }
575
  };
576

577
  document.onkeyup = function(e) {
578
    var key = e.keyCode;
579

580
    if (key == 37) {
581
      dir = "left";
582
      player.isMovingLeft = false;
583
    } else if (key == 39) {
584
      dir = "right";
585
      player.isMovingRight = false;
586
    }
587
  };
588

589
  //Accelerations produces when the user hold the keys
590
  if (player.isMovingLeft === true) {
591
    player.x += player.vx;
592
    player.vx -= 0.15;
593
  } else {
594
    player.x += player.vx;
595
    if (player.vx < 0) player.vx += 0.1;
596
  }
597

598
  if (player.isMovingRight === true) {
599
    player.x += player.vx;
600
    player.vx += 0.15;
601
  } else {
602
    player.x += player.vx;
603
    if (player.vx > 0) player.vx -= 0.1;
604
  }
605

606
  //Jump the player when it hits the base
607
  if ((player.y + player.height) > base.y && base.y < height) player.jump();
608

609
  //Make the player move through walls
610
  if (player.x > width) player.x = 0 - player.width;
611
  else if (player.x < 0 - player.width) player.x = width;
612

613
  player.draw();
614
}
615

616
function update() {
617
  ctx.clearRect(0, 0, width, height);
618
  playerJump();
619
}   
620

621
menuLoop = function() {
622
  update();
623
  requestAnimFrame(menuLoop);
624
};
625

626
menuLoop();
627