2

我必须使用 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 {

}
4

2 回答 2

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
    }
}
于 2013-04-04T11:46:43.547 回答
0

基本上只是测试看看x + width (optional: + velocity) > canvas.width高度是否相同。

于 2015-10-06T23:24:50.253 回答