Javascript Canvas 拱形跳跃

Question

我在尝试让我们类的平台游戏的主 Angular (目前它只是一个箭头)跳进拱门时遇到了问题。我试图在开关内部创建一个 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 轴，demo 中包含 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) 轮询增量值，它最终会反转该值，结果将是跳跃。

我们检查我们是否在地板上，当我们回到地面时，可以这么说，只需将 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 调整一个更负的跳跃强度，如果你想让 Angular 色更快地下降，只需增加重力值 g。