Javascript Canvas 拱形跳跃

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

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

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。