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 和高度是否相同。