Javascript帆布拱形跳躍

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 

當一個跳轉被啓動我們設置增量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 
    } 
} 

這是仿效的一個非常有效的方式用非昂貴的數學操作跳轉，這可能是遊戲中的關鍵因素。

您也可以在跳躍中點擊（或點擊一個鍵）幾次，以便在舊遊戲中非常典型地進行擴展。當然你也可以防止這種情況只需單擊檢查時delta值和僅重置，如果dy === 0

調整以更加負值跳躍強度jump如果你想要的字符快下來只需增加重力值g。