JavaScript中的帆布遊戲的邊界

Question

我必須用html5 canvas Javascript製作一款適合學校的遊戲。 我是新來的JavaScript和仍在學習，但我真的需要一些幫助，我有這個問題，並希望如果有人能幫我。我嘗試了幾件事情，但似乎沒有任何工作，我很茫然。

所以這是玩家對象的代碼。它可以從左到右移動。 現在的問題是它離開畫布。我希望它留在x軸上的畫布上。

// Things to do when keys are down 
function onKeyDown(event) { 

    // prevent arrow keys from scrolling the page 
    if (event.keyCode >= 37 && event.keyCode <= 39) event.preventDefault(); 

    switch (event.keyCode) { 
     case 37: 
      player.vx = -1; 
      player.image = player.imgLeft; 
      break; // left key 
    // case 38: player.vy = -1; break; // up key 
     case 39: 
      player.vx = 1; 
      player.image = player.imgRight; 
      break; // right key 
    } 
} 

// Things to do when keys are up 
function onKeyUp(event) { 
    switch (event.keyCode) { 
     case 37: 
     case 39: 
      player.vx = 0; 
      player.image = player.original; 
      break; // left or right key released 
    // case 38: player.vy = 0; break; // up or down key released 
    } 
} 

這是我走到這一步....

if ((player.x >= 800) && (player.x <= 0)) { 

} else { 

} 

Answer 1

你可以考慮增加兩個功能來檢查你範圍之內。 （基本上是一樣的代碼，雖然與我的真實病情恢復，這將是你的else語句。）

// returns true if param is in range [0..799] 
function isInXrange(intPos) 
{ 
    if ((intPos>=0) && (intPos<800)) 
    return true; 
    else 
    return false; 
} 
// returns true if param is in range [0..599] 
function isInYrange(intPos) 
{ 
    if ((intPos>=0) && (intPos<600)) 
    return true; 
    else 
    return false; 
} 

然後，您可以添加一個函數來移動播放器和其他處理與壁碰撞/流浪出界

function movePlayer() 
{ 
    if (isInXRange(player.x)) 
     player.x += player.vx; 
    if (isInXRange(player.y)) 
     player.y += player.vy; 
} 

function handleOutOfBounds() 
{ 
    if (isInXRange(player.x) == false) 
    { 
     // do something; 
    } 

    if (isInYRange(player.y) == false) 
    { 
     // do something else 
    } 
} 

Answer 2

的基本上只是測試，看看x + width (optional: + velocity) > canvas.width和相同的高度。