· 6 years ago · Feb 01, 2020, 03:10 AM
1 var ua = navigator.userAgent;
2 var isIE = ua.match("MSIE");
3 var bTouch = (ua.indexOf("(iP")==-1 && ua.indexOf("Android")==-1 && ua.indexOf("BlackBerry")==-1 && ua.indexOf("HTC")==-1 && ua.indexOf("PlayBook")==-1 && ua.indexOf("webOS")==-1 && ua.indexOf("IEMobile")==-1 && ua.indexOf("Silk")==-1)?false:true;
4 var bT = 0; // emulate keys pressed
5 var bTlast = 0;
6 var Dir = "left";
7 var paused = false;
8 function getHighscores() {
9 var xmlhttp;
10
11 if (window.XMLHttpRequest) {
12 // code for IE7+, Firefox, Chrome, Opera, Safari
13 xmlhttp = new XMLHttpRequest();
14 } else {
15 // code for IE6, IE5
16 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
17 }
18
19 xmlhttp.onreadystatechange = function() {
20 if (xmlhttp.readyState == 4 ) {
21 if(xmlhttp.status == 200){
22 document.getElementById("mainToplist").innerHTML = xmlhttp.responseText;
23 }
24 }
25 }
26
27 xmlhttp.open("POST","imagician.php",true);
28 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
29 xmlhttp.send("action=getHighscores");
30 }
31
32 function updateScore(score) {
33 var xmlhttp;
34
35 if (window.XMLHttpRequest) {
36 // code for IE7+, Firefox, Chrome, Opera, Safari
37 xmlhttp = new XMLHttpRequest();
38 } else {
39 // code for IE6, IE5
40 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
41 }
42
43 xmlhttp.onreadystatechange = function() {
44 if (xmlhttp.readyState == 4 ) {
45 if(xmlhttp.status == 200){
46 document.getElementById("toplist").innerHTML = xmlhttp.responseText;
47 }
48 }
49 }
50
51 xmlhttp.open("POST","imagician.php",true);
52 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
53 xmlhttp.send("action=updateScore&score=" + score);
54 }
55
56 function mobile(id){ // TODO: pass keys as arrays (as could change)
57 var o = document.getElementById(id);
58 if(o){
59 if(bTouch){
60 o.innerHTML="<p><div style='border:1px solid red;width:60px;float:left;margin-left:60px;font-size:xx-large;-webkit-user-select:none;' ontouchend='Dir = \"left\";player.isMovingLeft = false;' ontouchstart='Dir = \"left\";player.isMovingLeft = true;' >←</div> <div style='border:1px solid red;width:60px;float:right;margin-right:60px;font-size:xx-large;-webkit-user-select:none;' ontouchend='Dir = \"right\";player.isMovingRight = false;' ontouchstart='Dir = \"right\";player.isMovingRight = true;' >→</div></p>";
61
62 document.body.addEventListener('touchmove',function(event){event.preventDefault();});
63 setTimeout(function(){window.scrollTo(0, 1);}, 1);
64 }
65 }
66 }
67
68 if ( !Array.prototype.forEach ) {
69 Array.prototype.forEach = function(fn, scope) {
70 for(var i = 0, len = this.length; i < len; ++i) {
71 fn.call(scope, this[i], i, this);
72 }
73 }
74 }
75
76 // RequestAnimFrame: a browser API for getting smooth animations
77 window.requestAnimFrame = (function() {
78 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
79 function(callback) {
80 window.setTimeout(callback, 1000 / 60);
81 };
82 })();
83
84 var canvas = document.getElementById('canvas');
85 if(navigator.userAgent.match("MSIE"))G_vmlCanvasManager.initElement(canvas);
86 ctx = canvas.getContext('2d');
87
88 var width = 422,
89 height = 552;
90
91 canvas.width = width;
92 canvas.height = height;
93
94 //Variables for game
95 var platforms = [],
96 image = document.getElementById("sprite"),
97 player, platformCount = 10,
98 position = 0,
99 gravity = 0.2,
100 animloop,
101 flag = 0,
102 menuloop, broken = 0,
103 dir, score = 0, firstRun = true;
104
105 //Base object
106 var Base = function() {
107 this.height = 5;
108 this.width = width;
109
110 //Sprite clipping
111 this.cx = 0;
112 this.cy = 614;
113 this.cwidth = 100;
114 this.cheight = 5;
115
116 this.moved = 0;
117
118 this.x = 0;
119 this.y = height - this.height;
120
121 this.draw = function() {
122 try {
123 ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
124 } catch (e) {}
125 };
126 };
127
128 var base = new Base();
129
130 //Player object
131 var Player = function() {
132 this.vy = 11;
133 this.vx = 0;
134
135 this.isMovingLeft = false;
136 this.isMovingRight = false;
137 this.isDead = false;
138
139 this.width = 40;
140 this.height = 90;
141
142 //Sprite clipping
143 this.cx = 36;
144 this.cy = 0;
145 this.cwidth = 35;
146 this.cheight = 84;
147
148 this.dir = "left";
149
150 this.x = width / 2 - this.width / 2;
151 this.y = height;
152
153 //Function to draw it
154 this.draw = function() {
155 try {
156 if (this.dir == "right" || this.dir == "right_land") this.cy = 125;
157 else if (this.dir == "left" || this.dir == "left_land") this.cy = 214;
158
159 ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
160 } catch (e) {}
161 };
162
163 this.jump = function() {
164 this.vy = -8;
165 };
166
167 this.jumpHigh = function() {
168 this.vy = -16;
169 };
170
171 };
172
173 player = new Player();
174
175 //Platform class
176
177 function Platform() {
178 this.width = 70;
179 this.height = 17;
180
181 this.x = Math.random() * (width - this.width);
182 this.y = position;
183
184 position += (height / platformCount);
185
186 this.flag = 0;
187 this.state = 0;
188
189 //Sprite clipping
190 this.cx = 0;
191 this.cy = 0;
192 this.cwidth = 105;
193 this.cheight = 31;
194
195 //Function to draw it
196 this.draw = function() {
197 try {
198
199 if (this.type == 1) this.cy = 0;
200 else if (this.type == 2) this.cy = 61;
201 else if (this.type == 3 && this.flag === 0) this.cy = 31;
202 else if (this.type == 3 && this.flag == 1) this.cy = 1000;
203 else if (this.type == 4 && this.state === 0) this.cy = 90;
204 else if (this.type == 4 && this.state == 1) this.cy = 1000;
205
206 ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
207 } catch (e) {}
208 };
209
210 //Platform types
211 //1: Normal
212 //2: Moving
213 //3: Breakable (Go through)
214 //4: Vanishable
215 //Setting the probability of which type of platforms should be shown at what score
216 if (score >= 5000) this.types = [1, 1, 1, 1, 1, 1, 1, 1];
217 else if (score >= 2000 && score < 5000) this.types = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
218 else if (score >= 1000 && score < 2000) this.types = [1, 1, 1, 1, 1, 1, 1, 1];
219 else if (score >= 500 && score < 1000) this.types = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
220 else if (score >= 100 && score < 500) this.types = [1, 1, 1, 1, 1, 1];
221 else this.types = [1];
222
223 this.type = this.types[Math.floor(Math.random() * this.types.length)];
224
225 //We can't have two consecutive breakable platforms otherwise it will be impossible to reach another platform sometimes!
226 if (this.type == 3 && broken < 1) {
227 broken++;
228 } else if (this.type == 3 && broken >= 1) {
229 this.type = 1;
230 broken = 0;
231 }
232
233 this.moved = 0;
234 this.vx = 1;
235 }
236
237 for (var i = 0; i < platformCount; i++) {
238 platforms.push(new Platform());
239 }
240
241 //Broken platform object
242 var Platform_broken_substitute = function() {
243 this.height = 30;
244 this.width = 70;
245
246 this.x = 0;
247 this.y = 0;
248
249 //Sprite clipping
250 this.cx = 0;
251 this.cy = 554;
252 this.cwidth = 105;
253 this.cheight = 60;
254
255 this.appearance = false;
256
257 this.draw = function() {
258 try {
259 if (this.appearance === true) ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
260 else return;
261 } catch (e) {}
262 };
263 };
264
265 var platform_broken_substitute = new Platform_broken_substitute();
266
267 //Spring Class
268 var spring = function() {
269 this.x = 0;
270 this.y = 0;
271
272 this.width = 26;
273 this.height = 30;
274
275 //Sprite clipping
276 this.cx = 0;
277 this.cy = 0;
278 this.cwidth = 47;
279 this.cheight = 53;
280
281 this.state = 0;
282
283 this.draw = function() {
284 try {
285 if (this.state === 0) this.cy = 445;
286 else if (this.state == 1) this.cy = 501;
287
288 ctx.drawImage(image, this.cx, this.cy, this.cwidth, this.cheight, this.x, this.y, this.width, this.height);
289 } catch (e) {}
290 };
291 };
292
293 var Spring = new spring();
294 var initialized = false;
295
296 function init() {
297 if (initialized) {
298 return false;
299 }
300 initialized = true;
301
302 //Variables for the game
303 var dir = "left",
304 jumpCount = 0;
305
306 firstRun = false;
307
308 //Function for clearing canvas in each consecutive frame
309
310 function paintCanvas() {
311 ctx.clearRect(0, 0, width, height);
312 }
313
314 //Player related calculations and functions
315
316 function playerCalc() {
317
318 if(bTouch)dir = Dir;
319
320 if (dir == "left") {
321 player.dir = "left";
322 if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
323 } else if (dir == "right") {
324 player.dir = "right";
325 if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
326 }
327
328 //Adding keyboard controls
329 document.onkeydown = function(e) {
330 var key = (isIE)?event.keyCode:e.keyCode;
331
332 //console.log("LOL: " + key);
333
334 if (key == 80) {
335 paused = !paused;
336 console.log("PAUSE: " + paused);
337 }
338
339 if (key == 37) {
340 dir = "left";
341 player.isMovingLeft = true;
342 } else if (key == 39) {
343 dir = "right";
344 player.isMovingRight = true;
345 }
346
347 if(key == 32) {
348 if(firstRun === true) {
349 initialized = false;
350 init();
351 } else {
352 reset();
353 }
354 }
355 };
356
357 document.onkeyup = function(e) {
358 var key = (isIE)?event.keyCode:e.keyCode;
359
360 if (key == 37) {
361 dir = "left";
362 player.isMovingLeft = false;
363 } else if (key == 39) {
364 dir = "right";
365 player.isMovingRight = false;
366 }
367 };
368
369 //Accelerations produces when the user hold the keys
370 if (player.isMovingLeft === true) {
371 player.x += player.vx;
372 player.vx -= 0.15;
373 } else {
374 player.x += player.vx;
375 if (player.vx < 0) player.vx += 0.1;
376 }
377
378 if (player.isMovingRight === true) {
379 player.x += player.vx;
380 player.vx += 0.15;
381 } else {
382 player.x += player.vx;
383 if (player.vx > 0) player.vx -= 0.1;
384 }
385
386 // Speed limits!
387 if(player.vx > 8)
388 player.vx = 8;
389 else if(player.vx < -8)
390 player.vx = -8;
391
392 //console.log(player.vx);
393
394 //Jump the player when it hits the base
395 if ((player.y + player.height) > base.y && base.y < height) player.jump();
396
397 //Gameover if it hits the bottom
398 if (base.y > height && (player.y + player.height) > height && player.isDead != "lol") player.isDead = true;
399
400 //Make the player move through walls
401 if (player.x > width) player.x = 0 - player.width;
402 else if (player.x < 0 - player.width) player.x = width;
403
404 //Movement of player affected by gravity
405 if (player.y >= (height / 2) - (player.height / 2)) {
406 player.y += player.vy;
407 player.vy += gravity;
408 }
409
410 //When the player reaches half height, move the platforms to create the illusion of scrolling and recreate the platforms that are out of viewport...
411 else {
412 platforms.forEach(function(p, i) {
413
414 if (player.vy < 0) {
415 p.y -= player.vy;
416 }
417
418 if (p.y > height) {
419 platforms[i] = new Platform();
420 platforms[i].y = p.y - height;
421 }
422
423 });
424
425 base.y -= player.vy;
426 player.vy += gravity;
427
428 if (player.vy >= 0) {
429 player.y += player.vy;
430 player.vy += gravity;
431 }
432
433 score++;
434 }
435
436 //Make the player jump when it collides with platforms
437 collides();
438
439 if (player.isDead === true) gameOver();
440 }
441
442 //Spring algorithms
443
444 function springCalc() {
445 var s = Spring;
446 var p = platforms[0];
447
448 if (p.type == 1 || p.type == 2) {
449 s.x = p.x + p.width / 2 - s.width / 2;
450 s.y = p.y - p.height - 10;
451
452 if (s.y > height / 1.1) s.state = 0;
453
454 s.draw();
455 } else {
456 s.x = 0 - s.width;
457 s.y = 0 - s.height;
458 }
459 }
460
461 //Platform's horizontal movement (and falling) algo
462
463 function platformCalc() {
464 var subs = platform_broken_substitute;
465
466 platforms.forEach(function(p, i) {
467 if (p.type == 2) {
468 if (p.x < 0 || p.x + p.width > width) p.vx *= -1;
469
470 p.x += p.vx;
471 }
472
473 if (p.flag == 1 && subs.appearance === false && jumpCount === 0) {
474 subs.x = p.x;
475 subs.y = p.y;
476 subs.appearance = true;
477
478 jumpCount++;
479 }
480
481 p.draw();
482 });
483
484 if (subs.appearance === true) {
485 subs.draw();
486 subs.y += 8;
487 }
488
489 if (subs.y > height) subs.appearance = false;
490 }
491
492 function collides() {
493 //Platforms
494 platforms.forEach(function(p, i) {
495 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)) {
496
497 if (p.type == 3 && p.flag === 0) {
498 p.flag = 1;
499 jumpCount = 0;
500 return;
501 } else if (p.type == 4 && p.state === 0) {
502 player.jump();
503 p.state = 1;
504 } else if (p.flag == 1) return;
505 else {
506 player.jump();
507 }
508 }
509 });
510
511 //Springs
512 var s = Spring;
513 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)) {
514 s.state = 1;
515 player.jumpHigh();
516 }
517
518 }
519
520 function updateScore() {
521 var scoreText = document.getElementById("score");
522 scoreText.innerHTML = score;
523 }
524
525 function gameOver() {
526 platforms.forEach(function(p, i) {
527 p.y -= 12;
528 });
529
530 if(player.y > height/2 && flag === 0) {
531 player.y -= 8;
532 player.vy = 0;
533 }
534 else if(player.y < height / 2) flag = 1;
535 else if(player.y + player.height > height) {
536 showGoMenu();
537 hideScore();
538 player.isDead = "lol";
539
540 // pf end of game here...
541
542 }
543 }
544
545 //Function to update everything
546
547 function update() {
548 paintCanvas();
549 platformCalc();
550
551 springCalc();
552
553 playerCalc();
554 player.draw();
555
556 base.draw();
557
558 updateScore();
559 }
560
561 menuLoop = function(){return;};
562 animloop = function() {
563 if (!paused) {
564 update();
565 }
566 requestAnimFrame(animloop);
567 };
568
569 animloop();
570
571 hideMenu();
572 showScore();
573 }
574
575 function reset() {
576 hideGoMenu();
577 showScore();
578 player.isDead = false;
579
580 flag = 0;
581 position = 0;
582 paused = false;
583 score = 700000;
584
585
586 base = new Base();
587 player = new Player();
588 Spring = new spring();
589 platform_broken_substitute = new Platform_broken_substitute();
590
591 platforms = [];
592 for (var i = 0; i < platformCount; i++) {
593 platforms.push(new Platform());
594 }
595 }
596
597 //Hides the menu
598 function hideMenu() {
599 var menu = document.getElementById("mainMenu");
600 menu.style.zIndex = -1;
601 if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1 && navigator.userAgent.toLowerCase().indexOf("android") != -1)menu.style.display="none";// *ff
602 }
603
604 //Shows the game over menu
605 function showGoMenu() {
606 var menu = document.getElementById("gameOverMenu");
607 menu.style.zIndex = 1;
608 menu.style.visibility = "visible";
609 if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1 && navigator.userAgent.toLowerCase().indexOf("android") != -1)menu.style.display="block";// *ff
610 var scoreText = document.getElementById("go_score");
611 scoreText.innerHTML = "Ganze " + score + " Punkte!<br>LiveJump-Exploit von crinx";
612 updateScore(score);
613 }
614 //Hides the game over menu
615 function hideGoMenu() {
616 var menu = document.getElementById("gameOverMenu");
617 menu.style.zIndex = -1;
618 menu.style.visibility = "hidden";
619 if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1 && navigator.userAgent.toLowerCase().indexOf("android") != -1)menu.style.display="none";// *ff
620 }
621
622 //Show ScoreBoard
623 function showScore() {
624 var menu = document.getElementById("scoreBoard");
625 menu.style.zIndex = 1;
626 if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1 && navigator.userAgent.toLowerCase().indexOf("android") != -1)menu.style.display="block";// *ff
627 }
628
629 //Hide ScoreBoard
630 function hideScore() {
631 var menu = document.getElementById("scoreBoard");
632 menu.style.zIndex = -1;
633 if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1 && navigator.userAgent.toLowerCase().indexOf("android") != -1)menu.style.display="none";// *ff
634 }
635
636
637 function playerJump() {
638
639 if(bTouch)dir = Dir;
640
641 player.y += player.vy;
642 player.vy += gravity;
643
644 if (player.vy > 0 &&
645 (player.x + 15 < 260) &&
646 (player.x + player.width - 15 > 155) &&
647 (player.y + player.height > 475) &&
648 (player.y + player.height < 500))
649 player.jump();
650
651 if (dir == "left") {
652 player.dir = "left";
653 if (player.vy < -7 && player.vy > -15) player.dir = "left_land";
654 } else if (dir == "right") {
655 player.dir = "right";
656 if (player.vy < -7 && player.vy > -15) player.dir = "right_land";
657 }
658
659 //Adding keyboard controls
660 document.onkeydown = function(e) {
661 var key = (isIE)?event.keyCode:e.keyCode;
662
663
664 if (key == 37) {
665 dir = "left";
666 player.isMovingLeft = true;
667 } else if (key == 39) {
668 dir = "right";
669 player.isMovingRight = true;
670 }
671
672 if(key == 32) {
673 if(firstRun === true) {
674 initialized = false;
675 init();
676 firstRun = false;
677 }
678 else
679 reset();
680 }
681 };
682
683 document.onkeyup = function(e) {
684 var key = (isIE)?event.keyCode:e.keyCode;
685
686 if (key == 37) {
687 dir = "left";
688 player.isMovingLeft = false;
689 } else if (key == 39) {
690 dir = "right";
691 player.isMovingRight = false;
692 }
693 };
694
695 //Accelerations produces when the user hold the keys
696 if (player.isMovingLeft === true) {
697 player.x += player.vx;
698 player.vx -= 0.15;
699 } else {
700 player.x += player.vx;
701 if (player.vx < 0) player.vx += 0.1;
702 }
703
704 if (player.isMovingRight === true) {
705 player.x += player.vx;
706 player.vx += 0.15;
707 } else {
708 player.x += player.vx;
709 if (player.vx > 0) player.vx -= 0.1;
710 }
711
712 //Jump the player when it hits the base
713 if ((player.y + player.height) > base.y && base.y < height) player.jump();
714
715 //Make the player move through walls
716 if (player.x > width) player.x = 0 - player.width;
717 else if (player.x < 0 - player.width) player.x = width;
718
719 player.draw();
720 }
721
722 function update() {
723 ctx.clearRect(0, 0, width, height);
724 playerJump();
725 }
726
727 menuLoop = function() {
728 if (!paused) {
729 update();
730 }
731 requestAnimFrame(menuLoop);
732 };
733
734 mobile('keys');
735 getHighscores();
736 //menuLoop();