html5畫布內的重力

Question

我正在嘗試使用html5 canvas制作原始超級馬里奧游戲的副本，只是為了好玩，並進一步了解畫布工具和它的動畫，但是我堅持讓Mario來做，這是我的jsfiddle： http：// jsfiddle.net/2tLCk/1/

我應該如何修復up功能以使mario跳回地面，就像在此網站http://blog.nihilogic.dk/一樣，我試圖理解它的代碼，但我做不到？

if (keydown.up) {

            vy += gravity;
            character.CurentPos = 11;
            character.x += character.speed;
            character.y += vy;

        }

Answer 1

這是一個跳躍的馬里奧http://jsfiddle.net/2tLCk/22/ 。

如果跳躍為1-則上升。 如果跳躍為2-則下降。

if(jumping){
     if(jumping == 1) {
          if(character.y > 140) character.y -= gravity;
          else jumping = 2;
     } else if(jumping == 2) {
          if(character.y < 184) character.y += gravity;
          else{
               character.y = 184;
               jumping = false;
               character.CurentPos = 6;
          }
     }
}else if(keydown.up) {
    jumping = 1;
    character.CurentPos = 11;
}

您可能要使用此https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame而不是setInterval（）。

Answer 2

您基本上希望重力始終保持活動狀態，而不僅僅是按下向下鍵。 跳躍（向上鍵）時，您必須添加到vy。 像這樣：

    if(keydown.up) {
         vy += -2;   
    }
    vy += gravity;
    if(character.y > 184) { // simple collision detection for ground floor
        vy = 0;
        character.y = 184;
    }
    //character.CurentPos = 11;
    //character.x += character.speed;
    character.y += vy;

參見http://jsfiddle.net/pjQb3/

Answer 3

我會做這樣的事情：

// Global forces
character.vy += gravity;

// User input
if (keydown.up) {
  character.vy += -2;
}

// Final location
if (character.y + character.vy >= 184) {
  // Update player location.
  character.y += character.vy;
} else {
  // Player was about to move past ground so place player directly on ground
  // and reset velocity.
  character.y = 184;
  character.vy = 0;
}