2014-01-18 92 views
0

我嘗試使用HTML5畫布只是爲了好玩,並瞭解更多關於帆布工具,它的動畫做原來的超級馬里奧遊戲的副本里,但我停留在讓馬里奧做它的跳躍這裏我的jsfiddle:http://jsfiddle.net/2tLCk/1/重力HTML5畫布

我應該怎麼解決我的up功能,使馬里奧跳躍和在本網站http://blog.nihilogic.dk/我試圖理解它的代碼回返回地面等,但是我不能?

if (keydown.up) { 

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

     } 
+0

你應該動態地計算跳躍最大高度,然後檢查是否'(character.y> = maxHeight){的setTimeout(函數(){character.y - = someValue中},重力); }'這樣的事情;) – Givi

+0

可以ü發佈的jsfiddle請 – Sora

+0

我不知道這是最好的方法,但它應該工作是這樣的。 [更新的jsfiddle(http://jsfiddle.net/GKDev/2tLCk/3/) – Givi

回答

2

這裏有一個跳躍馬里奧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()。

1

您基本上希望gravitiy始終處於活動狀態,不僅在按下向下鍵時。 當跳躍(鍵入),你必須添加到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/

+0

這是因爲與底層的碰撞檢測的(在「如果(character.y> 184)」)。 Y位置在一幀處大於184,在下一幀處重置爲184。您需要更好的碰撞檢測算法。礦井非常簡單,只考慮地板。它只是防止馬里奧掉出屏幕。 –

+0

@Sora您的評論中的鏈接會立即重定向到廣告頁面。 – Jurik

+0

是的,但你能看到背景嗎?這是超級馬里奧遊戲,你可以讓馬里奧移動和跳躍我想要在我的代碼中實現確切的跳躍效果。如何更新我的代碼以獲得此跳躍效果? – Sora

0

我會做這樣的事情:

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