SHARE
TWEET

tequilaJumper

a guest Apr 29th, 2013 51 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <script type="text/javascript">
  6.         //global variables
  7.         var gameArea;
  8.         var gameCtx;
  9.         var playerX;
  10.         var playerY;
  11.         var playerHeight;
  12.         var playerWidth;
  13.         var playerSpeed;
  14.         var playerVelocityX;
  15.         var playerVelocityY;
  16.         var playerInAir;
  17.         var keyboardMap = new Array();
  18.         var cameraY;
  19.         var updateLoop;
  20.         var running;
  21.         var FPS;
  22.         var lastLoop;
  23.         var currentFPS;
  24.         var FPScounter;
  25.                 var newestPlatformNumber;
  26.                 var genPrevX;
  27.                 var genPrevY;
  28.         var accelerationX;
  29.         var accelerationY;
  30.         var accelerationZ;
  31.         var dead;
  32.        
  33.         //platform variables for all platforms
  34.         var platformHeight = new Array();
  35.         var platformWidth = new Array();
  36.         var platformType = new Array();
  37.                 var platformColor = new Array();
  38.        
  39.         //platform variables for type="normal" platforms
  40.         var platformX = new Array();
  41.         var platformY = new Array();
  42.        
  43.         //used for type="moving" platforms
  44.         var platformStartX = new Array();
  45.         var platformStartY = new Array();
  46.         var platformEndX = new Array();
  47.         var platformEndY = new Array();
  48.         var platformTime = new Array();
  49.        
  50.         //system platform arrays
  51.         var platformMovementInvertedX = new Array();
  52.         var platformMovementInvertedY = new Array();
  53.         var platformMovementPerFrameX = new Array();
  54.         var platformMovementPerFrameY = new Array();
  55.        
  56.         var amountOfPlatforms;
  57.        
  58.         //keys
  59.         var key_up=87;
  60.         var key_left=65;
  61.         var key_down=83;
  62.         var key_up=87;
  63.         var key_right=68;
  64.         var key_jump=32;
  65.         var key_pause=80;
  66.         var key_restart=82;
  67.        
  68.                 //random number in range
  69.                 function random (min, max)
  70.         {
  71.                         return Math.random() * (max - min) + min;
  72.                 }
  73.                
  74.                 //Make static platform code, for world gen
  75.                 function newPlatformStatic(x, y, width)
  76.                 {
  77.                         platformType[amountOfPlatforms] = "normal";
  78.                         platformX[amountOfPlatforms] = x;
  79.                         platformY[amountOfPlatforms] = y;
  80.                         platformWidth[amountOfPlatforms] = width;
  81.                        
  82.                         platformHeight[amountOfPlatforms] = 10;
  83.                         platformColor[amountOfPlatforms] = "rgba(0, 0, 0, 1)";
  84.                         console.log("new static at "+x+" "+y+" "+width);
  85.                 }
  86.                
  87.                 //Make moving platform code, for world gen
  88.                 function newPlatformMoving(startX, startY, endX, endY, time, width)
  89.                 {
  90.                         platformType[amountOfPlatforms] = "moving";
  91.                         platformStartX[amountOfPlatforms] = startX;
  92.                         platformStartY[amountOfPlatforms] = startY;
  93.                         platformEndX[amountOfPlatforms] = endX;
  94.                         platformEndY[amountOfPlatforms] = endY;
  95.                         platformTime[amountOfPlatforms] = time;
  96.                         platformWidth[amountOfPlatforms] = width;
  97.                        
  98.                         platformHeight[amountOfPlatforms] = 10;
  99.                         platformColor[amountOfPlatforms] = "rgba(0, 0, 0, 1)";
  100.                         console.log("new moving at "+startX+" "+startY+" "+width+", with ends at "+endX+" "+endY+" over "+time+" frames.");
  101.                 }
  102.                
  103.                 //World generator
  104.                 function generate(num)
  105.                 {
  106.                         //make [num] new platforms
  107.                         for (var i=1; i<=num; i++)
  108.                         {
  109.                                 if (amountOfPlatforms == 0)
  110.                                 {
  111.                                         newPlatformStatic(0, 10, gameArea.height);
  112.                                         amountOfPlatforms++;
  113.                                 }
  114.                                 //Decide what type should be generated
  115.                                 var type = Math.floor(Math.random()*4)
  116.                                
  117.                                 //make random X, Y and width
  118.                                 var width = random(50, gameArea.width/6);
  119.                 width -= Math.floor(-cameraY/300);
  120.                 if (width < 5)
  121.                 {
  122.                     width = 5;
  123.                     width += random(1, 6);
  124.                 }
  125.                                 var x = random(genPrevX-200, genPrevX+200);
  126.                 //make sure X is not out of the map
  127.                 if (x < 0)
  128.                 {
  129.                     x = 0;
  130.                 } else if (x > gameArea.width-width)
  131.                 {
  132.                     x = gameArea.width-width;
  133.                 }
  134.                                 var y = random(genPrevY+50, genPrevY+80)
  135.                                
  136.                                 switch (type)
  137.                                 {
  138.                                         case 0: //regular platform
  139.                                         newPlatformStatic(x, y, width);
  140.                                         break;
  141.                                        
  142.                                         case 1: //large platform
  143.                                         width *= 1.3
  144.                                         newPlatformStatic(x, y, width);
  145.                                         break;
  146.                                        
  147.                                         case 2: //platforms moving along the X axis
  148.                                         width *= 1.4
  149.                                         var xEnd = random(width, gameArea.width-width);
  150.                                         var speed = Math.abs(x-xEnd)*random(0.2, 1.3);
  151.                                         newPlatformMoving(x, y, xEnd, y+0.1, speed, width);
  152.                                         x = xEnd;
  153.                                         break;
  154.                                        
  155.                                         case 3: //platforms moving along the Y axis
  156.                                         var yEnd = random(genPrevY+80, genPrevY+300);
  157.                                         var speed = Math.abs(y-yEnd)*random(0.2, 1);
  158.                                         newPlatformMoving(x, y, x, yEnd, speed, width);
  159.                                         y = yEnd;
  160.                                         break;
  161.                                 }
  162.                                 amountOfPlatforms++;
  163.                                 genPrevX = x;
  164.                                 genPrevY = y;
  165.                         }
  166.                 }
  167.                
  168.         //modifying the Y coordinate to fit Canvas' coordinate grid
  169.         function drawYModifier(Y, height)
  170.         {
  171.             return gameArea.height-Y-height-cameraY;
  172.         }
  173.        
  174.         //Most drawing happens here.
  175.         function draw()
  176.         {
  177.             //clear
  178.             gameArea.height = window.innerHeight-50;
  179.            
  180.             //draw lines for moving platforms
  181.             for (var i=0; i<=amountOfPlatforms; i++)
  182.             {
  183.                 if (platformY[i] == undefined || platformY[i]+platformHeight[i] > -cameraY)
  184.                 {
  185.                     gameCtx.fillStyle = "rgba(0, 0, 0, 0.5";
  186.                     gameCtx.beginPath();
  187.                     gameCtx.moveTo(platformStartX[i]+platformWidth[i]/2, drawYModifier(platformStartY[i]+platformHeight[i]/2, 0));
  188.                     gameCtx.lineTo(platformEndX[i]+platformWidth[i]/2, drawYModifier(platformEndY[i]+platformHeight[i]/2, 0));
  189.                     gameCtx.stroke();
  190.                 }
  191.             }
  192.            
  193.             //draw player
  194.             gameCtx.fillStyle = "rgba(0,200,0,1)";
  195.             gameCtx.fillRect (playerX-playerWidth/2, drawYModifier(playerY, playerHeight), playerWidth, playerHeight);
  196.            
  197.             //draw platforms
  198.             for (var i=0; i<=amountOfPlatforms; i++)
  199.             {
  200.                 if (platformY[i] == undefined || platformY[i]+platformHeight[i] > -cameraY)
  201.                 {
  202.                     if (platformType[i] == "normal") //if type=="normal"
  203.                     {
  204.                         gameCtx.fillStyle = platformColor[i];
  205.                         gameCtx.fillRect (platformX[i], drawYModifier(platformY[i], platformHeight[i]), platformWidth[i], platformHeight[i]);
  206.                     } else if (platformType[i] == "moving") //if type=="moving"
  207.                     {
  208.                         gameCtx.fillStyle = platformColor[i];
  209.                         if (platformX[i] == undefined || platformY[i] == undefined)
  210.                         {
  211.                             platformX[i] = platformStartX[i];
  212.                             platformY[i] = platformStartY[i];
  213.                             //get amount of pixels to move per frame
  214.                             platformMovementPerFrameX[i] = Math.abs(platformStartX[i]-platformEndX[i])/platformTime[i];
  215.                             platformMovementPerFrameY[i] = Math.abs(platformStartY[i]-platformEndY[i])/platformTime[i];
  216.                             //set inverted to false
  217.                             platformMovementInvertedX[i] = false;
  218.                             platformMovementInvertedY[i] = false;true
  219.                         }
  220.                         platformX[i] = movingPlatformHandler(platformStartX[i], platformEndX[i], platformX[i], platformTime[i], i, "x");
  221.                         platformY[i] = movingPlatformHandler(platformStartY[i], platformEndY[i], platformY[i], platformTime[i], i, "y");
  222.                    
  223.                         gameCtx.fillStyle = platformColor[i];
  224.                         gameCtx.fillRect (platformX[i], drawYModifier(platformY[i], platformHeight[i]), platformWidth[i], platformHeight[i]);
  225.                     }
  226.                 }
  227.             }
  228.             //draw FPS
  229.             gameCtx.fillStyle = "rgba(0, 0, 0, 1";
  230.             gameCtx.font = 20 + 'px Arial';
  231.             gameCtx.fillText("Score: "+-cameraY, 2, 20);
  232.            
  233.         }
  234.        
  235.         //Handle moving platforms.
  236.         function movingPlatformHandler(start, end, curr, time, i, coord)
  237.         {
  238.             //decide if movement should be inverted or not
  239.             if (coord == "x")
  240.             {
  241.                 var invert = platformMovementInvertedX[i];
  242.             } else if (coord == "y")
  243.             {
  244.                 var invert = platformMovementInvertedY[i];
  245.             }
  246.             if (end > start)
  247.             {
  248.                 if (curr > end)
  249.                 {
  250.                     invert = true;
  251.                 } else if (curr < start)
  252.                 {
  253.                     invert = false;
  254.                 }
  255.             } else if (end < start)
  256.             {
  257.                 if (curr < end)
  258.                 {
  259.                     invert = true;
  260.                 } else if (curr > start)
  261.                 {
  262.                     invert = false;
  263.                 }
  264.             }
  265.            
  266.             //set pixelsPerFrame and platformMovementInverted properly
  267.             if (coord == "x")
  268.             {
  269.                 var pixelsPerFrame = platformMovementPerFrameX[i];
  270.                 platformMovementInvertedX[i] = invert;
  271.             } else if (coord == "y")
  272.             {
  273.                 var pixelsPerFrame = platformMovementPerFrameY[i];
  274.                 platformMovementInvertedY[i] = invert;
  275.             }
  276.            
  277.             //HAAAAAACK!
  278.             platformMovementInvertedX[i] = platformMovementInvertedY[i];
  279.            
  280.             //calculate new position
  281.             var result;
  282.             if (platformMovementInvertedX[i] && platformMovementInvertedY[i])
  283.             {
  284.                 if (start<end)
  285.                 {
  286.                     result = curr-pixelsPerFrame;
  287.                 } else
  288.                 {
  289.                     result = curr+pixelsPerFrame;
  290.                 }
  291.             } else
  292.             {
  293.                 if (start<end)
  294.                 {
  295.                     result = curr+pixelsPerFrame;
  296.                 } else
  297.                 {
  298.                     result = curr-pixelsPerFrame;
  299.                 }
  300.             }
  301.             return result;
  302.         }
  303.        
  304.         //Key press handler.
  305.         onkeydown=onkeyup=function(e)
  306.         {
  307.             e=e||event//to deal with IE
  308.             keyboardMap[e.keyCode]=e.type=='keydown'?true:false
  309.            
  310.             if (keyboardMap[key_pause] && dead == false)//pause and resume
  311.             {
  312.                 if (running==true)
  313.                 {
  314.                     gameCtx.font = 40 + 'px Arial';
  315.                     gameCtx.textAlign = "center";
  316.                     gameCtx.fillText("Game paused",gameArea.width/2,gameArea.height/2);
  317.                     gameCtx.font = 20 + 'px Arial';
  318.                     gameCtx.fillText("Press P to unpause",gameArea.width/2,gameArea.height/2+40);
  319.                     window.clearInterval(updateLoop);
  320.                     running=false;
  321.                 } else
  322.                 {
  323.                     updateLoop = window.setInterval(update, FPS);
  324.                     running=true;
  325.                 }
  326.             }
  327.             if (keyboardMap[key_restart] && dead)
  328.             {
  329.                 init();
  330.             }
  331.         }
  332.        
  333.         //tilt handler
  334.         window.ondevicemotion = function(event)
  335.         {
  336.             accelerationX = event.accelerationIncludingGravity.x;
  337.             accelerationY = event.accelerationIncludingGravity.y;
  338.             accelerationZ = event.accelerationIncludingGravity.z;
  339.         }
  340.        
  341.         //Camera movement.
  342.         function cameraMovement()
  343.         {
  344.             if (playerY+cameraY < -5)
  345.             {
  346.                 die();
  347.             } else if (playerY+cameraY > gameArea.height/1.2)
  348.             {
  349.                 cameraY -= 3;
  350.             } else if (playerY+cameraY > gameArea.height/1.4)
  351.             {
  352.                 cameraY -= 2;
  353.             } else if (playerY+cameraY > gameArea.height/1.6)
  354.             {
  355.                 cameraY -= 1;
  356.             }
  357.         }
  358.        
  359.         //Player movement and reacting to keyboard input.
  360.         function playerPhysics()
  361.         {
  362.             if (keyboardMap[key_left]) //left
  363.             {
  364.                 if (playerVelocityX > playerSpeed*-1)
  365.                 {
  366.                     if (playerInAir)
  367.                     {
  368.                         playerVelocityX -= 0.2;
  369.                     } else
  370.                     {
  371.                         playerVelocityX -= 1;
  372.                     }
  373.                 }
  374.             }
  375.             if (keyboardMap[key_right])//right
  376.             {
  377.                 if (playerVelocityX < playerSpeed)
  378.                 {
  379.                     if (playerInAir)
  380.                     {
  381.                         playerVelocityX += 0.2;
  382.                     } else
  383.                     {
  384.                         playerVelocityX += 1;
  385.                     }
  386.                 }
  387.             }
  388.             if (keyboardMap[key_jump] || keyboardMap[key_up])//jump
  389.             {
  390.                 if (playerInAir == false)
  391.                 {
  392.                     playerY += 1
  393.                     playerVelocityY = 5;
  394.                     playerInAir = true;
  395.                 }
  396.             }
  397.             if (keyboardMap[key_down])
  398.             {
  399.                 playerVelocityY -= 0.1;
  400.             }
  401.            
  402.             //collision detection
  403.             var colliding = false;
  404.             for (var i=0; i<=amountOfPlatforms; i++)
  405.             {
  406.                 var collidingX = false;
  407.                 var collidingY = false;
  408.                 //checking X
  409.                 if (playerX > platformX[i]-playerWidth/2 && playerX < platformX[i]+platformWidth[i]+playerWidth/2)
  410.                 {
  411.                     collidingX = true;
  412.                 }
  413.                 //checking Y
  414.                 if (playerY > platformY[i] && playerY < platformY[i]+platformHeight[i])
  415.                 {
  416.                     collidingY = true;
  417.                     if (collidingX)
  418.                     {
  419.                         playerY = platformY[i]+platformHeight[i]-1
  420.                     }
  421.                 }
  422.                 //code to run if colliding, with access to current stuffs
  423.                 if (collidingX  && collidingY)
  424.                 {
  425.                     if (playerVelocityY < 0)
  426.                     {
  427.                         playerVelocityY = 0;
  428.                     }
  429.                    
  430.                     //stuff to be done if platform is moving
  431.                     if (platformType[i] == "moving")
  432.                     {
  433.                         //stick to the platform X
  434.                         if (platformMovementInvertedX[i])
  435.                         {
  436.                             if (platformStartX[i] < platformEndX[i])
  437.                             {
  438.                                 playerX -= platformMovementPerFrameX[i];
  439.                             } else
  440.                             {
  441.                                 playerX += platformMovementPerFrameX[i];
  442.                             }
  443.                         } else
  444.                         {
  445.                             if (platformStartX[i] < platformEndX[i])
  446.                             {
  447.                                 playerX += platformMovementPerFrameX[i];
  448.                             } else
  449.                             {
  450.                                 playerX -= platformMovementPerFrameX[i];
  451.                             }
  452.                         }
  453.                        
  454.                         //stick to the platform Y
  455.                         if (platformMovementInvertedY[i] && platformStartY[i] < platformEndY[i])
  456.                         {
  457.                             playerY -= platformMovementPerFrameY[i];
  458.                         } else if (platformMovementInvertedY[i] == false && platformStartY[i] > platformEndY[i])
  459.                         {
  460.                             playerY -= platformMovementPerFrameY[i];
  461.                         }
  462.                     }
  463.                    
  464.                     colliding = true;
  465.                 }
  466.             }
  467.             if (colliding)
  468.             {
  469.                 playerInAir = false;
  470.             } else
  471.             {
  472.                 playerInAir = true;
  473.             }
  474.            
  475.             //accerelometer controls? yeah!
  476.             if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))
  477.             {
  478.                 if (Math.abs(accelerationX) < 10)
  479.                 {
  480.                     playerVelocityX = accelerationX*2;
  481.                 }
  482.                
  483.                 if (playerInAir == false)
  484.                 {
  485.                     playerY += 1
  486.                     playerVelocityY = 5;
  487.                     playerInAir = true;
  488.                 }
  489.             }
  490.            
  491.             //bouncy on screen walls (or just stop for phones)
  492.             if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))
  493.             {
  494.                 if (playerX < playerWidth/2)
  495.                 {
  496.                     playerVelocityX = 0;
  497.                     playerX = (playerWidth/2)+0.1;
  498.                 } else if (playerX > gameArea.width-playerWidth/2)
  499.                 {
  500.                     playerVelocityX = 0;
  501.                     playerX = (gameArea.width-playerWidth/2)-0.1
  502.                 }
  503.             } else if (playerX < playerWidth/2 && playerInAir || playerX > gameArea.width-playerWidth/2 && playerInAir)
  504.             {
  505.                 {
  506.                     playerVelocityX = -1*playerVelocityX;
  507.                 }
  508.             } else if (playerX < playerWidth/2)
  509.             {
  510.                 playerVelocityX = 0;
  511.                 playerX = (playerWidth/2)+0.1;
  512.             } else if (playerX > gameArea.width-playerWidth/2)
  513.             {
  514.                 playerVelocityX = 0;
  515.                 playerX = (gameArea.width-playerWidth/2)-0.1
  516.             }
  517.                
  518.             //actual modification of player coords
  519.             playerX += playerVelocityX;
  520.             playerY += playerVelocityY;
  521.            
  522.             //over time set velocity back to 0
  523.             if (playerVelocityX > 0.11)
  524.             {
  525.                 if (playerInAir)
  526.                 {
  527.                     playerVelocityX +=0.49;
  528.                 }
  529.                 playerVelocityX -= 0.50;
  530.             } else if (playerVelocityX < -0.11)
  531.             {
  532.                 if (playerInAir)
  533.                 {
  534.                     playerVelocityX -= 0.49;
  535.                 }
  536.                 playerVelocityX += 0.50;
  537.             } else
  538.             {
  539.                 if (playerInAir == false)
  540.                 {
  541.                     playerVelocityX = 0;
  542.                 }
  543.             }
  544.            
  545.             if (playerInAir)
  546.             {
  547.                 playerVelocityY -= 0.1;
  548.             }
  549.         }
  550.        
  551.         //Main loop which is run at 60 FPS.
  552.         function update()
  553.         {
  554.             draw();
  555.             playerPhysics();
  556.             cameraMovement();
  557.             if (genPrevY < (-1*cameraY)+gameArea.height)
  558.             {
  559.                 generate(5);
  560.             }
  561.         }
  562.        
  563.         //How to die.
  564.         function die()
  565.         {
  566.             dead = true;
  567.             gameArea.height = window.innerHeight-50;
  568.             gameCtx.font = 40 + 'px Arial';
  569.             gameCtx.textAlign = "center";
  570.             gameCtx.fillText("You died!",gameArea.width/2,gameArea.height/2);
  571.             gameCtx.font = 20 + 'px Arial';
  572.             gameCtx.fillText("Your score is "+-cameraY,gameArea.width/2,gameArea.height/2+40);
  573.             if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))
  574.             {
  575.                 gameCtx.fillText("Reload the page to retry.",gameArea.width/2,gameArea.height/2+65);
  576.             } else
  577.             {
  578.                 gameCtx.fillText("Press R to retry.",gameArea.width/2,gameArea.height/2+65);
  579.             }
  580.             window.clearInterval(updateLoop);
  581.         }
  582.        
  583.                 //Initiating variables and loops.
  584.         function init()
  585.         {
  586.             //canvasInit
  587.             gameArea = document.getElementById("gameArea");
  588.             gameCtx = gameArea.getContext("2d");
  589.            
  590.             //player variables
  591.             playerX=gameArea.width/2;
  592.             playerY=30;
  593.             playerHeight=22;
  594.             playerWidth=22;
  595.             playerSpeed=3;
  596.             playerVelocityX=0;
  597.             playerVelocityY=0;
  598.             playerInAir=false;
  599.            
  600.             //global variables
  601.             cameraY=0;
  602.             FPS=1000/60;
  603.                         amountOfPlatforms=0;
  604.                         genPrevX=gameArea.width/2;
  605.                         genPrevY=0;
  606.             dead=false;
  607.            
  608.             //platform stuff
  609.             platformStartX.length = 0;
  610.             platformStartY.length = 0;
  611.             platformTime.length = 0;
  612.             platformType.length = 0;
  613.             platformWidth.length = 0;
  614.             platformX.length = 0;
  615.             platformY.length = 0;
  616.             platformColor.length = 0;
  617.             platformEndX.length = 0;
  618.             platformEndY.length = 0;
  619.             platformHeight.length = 0;
  620.             platformMovementInvertedX.length = 0;
  621.             platformMovementInvertedY.length = 0;
  622.             platformMovementPerFrameX.length = 0;
  623.             platformMovementPerFrameY.length = 0;
  624.            
  625.             //repeat stuffs
  626.             running = true;
  627.             lastLoop = new Date();
  628.             updateLoop = setInterval(update, FPS);
  629.                        
  630.                         //functions
  631.                         generate(10);
  632.         }
  633.     </script>
  634. </head>
  635. <STYLE TYPE="text/css">
  636.     body {
  637.         text-align: center;
  638.         overflow-y: hidden;
  639.     }
  640.     canvas {
  641.         border-style: solid;
  642.                 border-color: rgba(100, 100, 100, 1)
  643.         border-width: 5px;
  644.     }
  645. </STYLE>
  646. <body onload="init()">
  647.     <canvas id="gameArea" width="600" height="800" ></canvas>
  648. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top