API tools faq
paste
Advertisement
Guest User

tequilaJumper

a guest
Apr 29th, 2013
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 21.99 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!