Javascript Canvas Arched Jump

Question

我有一个问题，试图让我们班级的平台主角（现在它只是一个箭头）跳进拱门。我试图在开关内部制作一个if函数，这样如果同时按下右箭头键和跳按钮，播放器将在拱门中向右跳。但是，它只是直线上升。有帮助吗？这是我的代码：

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 );
            };
}
)();

Answer 1

只需使用简单的伪重力因子和delta值即可获得经典的跳跃行为。

Live demo

例如，为运动定义一些变量（仅适用于y轴，包含在演示中的x值）：

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

当启动跳跃时，我们将delta y（dy）设置为等于跳跃强度。您可以根据需要改变力量。这将累积在y值上，但由于重力（g）在delta值上轮询，它最终会反转该值，结果将是跳跃。

我们检查我们是否在地板上，当我们返回地面时，只需将y设置为楼层并清除delta值：

// 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
    }
}

这是一种使用非昂贵的数学运算模拟跳跃的非常有效的方法，这可能是游戏中的关键因素。

您还可以在跳跃中多次单击（或按键）以扩展它，这在旧游戏中非常典型。您当然可以通过单击时检查增量值来防止这种情况，仅在dy === 0

时重置它

使用jump的更多负值调整跳跃强度，如果您想让角色更快下降，只需增加重力值g。