CODEWITHSUNDEEP
javascriptanimationhtml5-canvas
Conman247
Conman247

Reputation: 25

Javascript Canvas Arched Jump

I am having an issue trying to make the main character of our class' platformer (for now it is only an arrow) jump in an arch. I've tried to make an if function inside the switch so that if both the right arrow key and if the jump button are pressed, the player will jump to the right in an arch. However, it only jumps up in a straight line. Any help? Here is my code: 

var left = 37;
var up = 38;
var right = 39;
var down = 40;

var rightpress = false;
var jumppress = false;
var leftpress = false;




var CanHeight = 400;
var CanWidth  = 800;
var BackgroundX = 00;
var BackgroundY = 00;
var ArrowMove = 0;
  PreGame();


  function preLoadImage( url )
{
  image = new Image();
  image.src = url;
  image.onload = function( )
    {
      return;           // return image - image was empty made global
    };
}


  function PreGame( )                 
    {
      preLoadImage ( "pics/arrowright.png" );
      ArrowRightImg = image;

      preLoadImage ( "pics/Background1.png" );
      FirstBackgroundImg = image;

    }




  function InitGame( )
{
  SetCanvas( 'classified' );

  DrawScene();

  //canvas.addEventListener("mousedown", doMouseDown, false);
  //window.addEventListener("rightarrow", onrightarrow, false);

  // Use the code below for perhaps a custom mouse cursor

  //canvas.addEventListener("mouseover", doMouseOver, false);

  Loop();
}  

function SetCanvas( id )
{
  canvas      = document.createElement( 'canvas' );
  var div     = document.getElementById( id );

  canvas.width          = CanWidth;
  canvas.height         = CanHeight;
  canvas.style.position = "absolute";
  canvas.style.border   = "#222222 5px solid";

  div.appendChild(canvas);

  Context  = canvas.getContext("2d");
}




  function DrawScene()
   {
        Context.fillStyle = 'green'; 
     if ( ArrowMove == 0 )
     {
       Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );
     }

      Context.drawImage( ArrowRightImg, 400, 325 );


   }


/*function doMouseDown(event)
{
  canvas_x = event.pageX;
  canvas_y = event.pageY; 

}*/

var PlayerJump = 0;
var counter = 0;
var PJ = false;

  function jump()
    {
     --counter; 
      console.log("You Jump: " + PlayerJump);

        if ( PJ == true )
        {
          ++PlayerJump;

            if( PlayerJump <= 12 )
            {
                OldBackgroundY = BackgroundY;
                BackgroundY = BackgroundY + 5;
                Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );

            }


                 if ( PlayerJump >= 13 && PlayerJump <= 24 )
                  {
                    BackgroundY = BackgroundY - 5;
                    Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );

                  }




                Context.drawImage( ArrowRightImg, 400, 325 );// left

      if ( PlayerJump >= 25 )
              {
               PlayerJump = 0; 
               PJ = false;
              }
         DrawScene();
    }
    }


document.onkeydown = function(e) 
{
    e = e || window.event;
    switch(e.which || e.keyCode) 
    {
      case 37:
      Context.fillStyle = 'green'; 
     console.log("You move left");
     OldBackgroundX = BackgroundX;
     BackgroundX = BackgroundX + 20;
     Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );
     Context.drawImage( ArrowRightImg, 400, 325 );// left
     Context.fillText( "You move left.", 200, 100 );
        break;



document.onkeypress = function(event) 
{
    event = event || window.event;
    switch(event.which || event.keyCode) 
    {
     case 38: 
         jumppress = true;

            if ( jumppress == true )
            {
               PJ = true;
            }
     if ( PlayerJump >= 1 && PlayerJump < 24 )
      {
       rightpress = false; 
      }


                  // up/jump
     break; 


     case 39:

     rightpress = true;
     if ( rightpress == true )
      {
     console.log("You move right");
         Context.fillStyle = 'green'; 
     OldBackgroundX = BackgroundX;
     BackgroundX = BackgroundX - 20;
     Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );
     Context.drawImage( ArrowRightImg, 400, 325 );// right
         Context.fillText( "You move right.", 200, 100 );
        rightpress = false;
      }


     break;





    }

   if ( rightpress == true && jumppress == true )
     {
      //case 39: 
     console.log("You jump right");
         Context.fillStyle = 'green'; 
     OldBackgroundX = BackgroundX;
     BackgroundX = BackgroundX - 20;
     PJ = true;
     Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 );
     Context.drawImage( ArrowRightImg, 400, 200 );// right
         //Context.fillText( "You move right.", 200, 100 );
        //break;
        //case 38: 
      if ( PlayerJump <= 24 )
      {
       PJ = false;
       jumppress = false;
       rightpress = false;
      }

     }

}

 function UpDate()
{
  if ( PJ == true )
       {
         jump();
       }
  //--counter;
  //console.log("Updated");
  //DrawScene();*/
}



var lastTime = 0;
var ticks    = 0;

function Loop()
{
  var now = Date.now();
  dt = ( now - lastTime ) / 1000.0; 

  //console.log("fired rocket");
  UpDate(); // UPDATE ALL THE GAME MOVES

  //EnemyUpDate();

  lastTime = now;
  requestAnimFrame( Loop );  // LOOP CALLBACK
};

var requestAnimFrame =
(
function( )
{
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback )
            {
              window.setTimeout( callback, 1000 / 60 );
            };
}
)();

Upvotes: 2

Views: 129

Answers (1)

user1693593
user1693593

Reputation:

Just use a simple pseudo gravity factor together with a delta value to get the classic jump behavior.

Live demo

For example, define a few variables for the movement (only for y axis, values for x included in demo):

var floor = h - img.height + 16,  // fixed floor position (here based on image)
    y     = floor,                // set initial y position = floor
    dy    = 0,                    // current delta (=0 no movement on y axis)
    jump  = -5,                   // jump strength
    g     = 0.5;                  // "gravity" strength

When a jump is initiated we set delta y (dy) equal to the jump strength. You can variate strength as you need. This will accumulate on the y value, but since the gravity (g) is polling on the delta value it will eventually reverse the value and result will be a jump.

We check that we are on the floor and when we returned to ground so-to-speak just set y to floor and clear the delta value:

// we got a jump or are in a jump
if (dy !== 0 || y !== floor) {
    y += dy;                      // add delta
    dy += g;                      // affect delta with gravity
    if (y > floor) {              // on ground?
        y = floor;                // reset y position
        dy = 0;                   // and clear delta
    }
}

This is a very efficient way of emulating a jump with non-expensive math operations, which can be a critical factor in a game.

You can also click (or hit a key) several times while in a jump to extend it as was very typical in the old games. You can of course prevent this simply by checking the delta value when clicking and only reset it if dy === 0

Adjust jump strength with a more negative value for jump and if you want the character faster down simply increase the gravity value g.

JumpRob

Upvotes: 1

Related Questions