超出边界对象的移动，canvas

Question

我在画布上画了一艘宇宙飞船。它的速度是ship.vx和ship.vy。当它距离画布边界30px时，我设置ship.vx &将ship.vy移至0，使背景物体向船的相反方向移动。此时船被卡在一个点上。这都很好。现在如果我试着左右移动它(stuck at top/bottom)或自上而下移动它(stuck at left/right)它不会因为它被卡在vx &vy设置为0。

如果我向它的相反方向加速，大约需要5秒来选择它的速度(大约2)，所以它基本上在同一点停留了5秒。

当离开x轴时，我试图不将vy设置为0，反之亦然，但船在另一个轴上一直缓慢移动。

所以我想要实现的是船会卡住当它离边界30像素，但如果我试图移动或加速在其他3个方向，它会假装如果它没有卡住。

你们有人知道任何机制吗?
谢谢。

function stuckShip(){
    if(
                (ship.x - ship.width < 0)  || 
                (ship.x + ship.width > w)  ||
                (ship.y + ship.height > h) ||
                (ship.y - ship.height < 0))
              {
        ship.vx = 0;
        ship.vy = 0;
     }
}

function againAndAgain(){
    var angle = ship.rotation;
    var x = Math.cos(angle);
    var y = Math.sin(angle);        
    var ax = x*thrust,
        ay = y*thrust;
    ship.vx += ax;
    ship.vy += ay;
            stuckShip();
            ship.draw(context);
}
document.addEventListener('keydown', function(e){
    switch(e.keyCode){
        case 38:
            thrust = 0.35;
        break;
        case 37:
            ship.rotation -= 3;
        break;
        case 39:
            ship.rotation += 3;
        break;

    }
}

Answer 1

为了显示目的而根据物体在屏幕上的位置来操纵它的速度从来都不是一个好主意。通常你使用基于parent的系统，所以你有一个主容器，所有对象(包括船)都是该容器的子对象，并且相对于主容器移动。现在你可以更新集装箱的位置，如果船的全局位置在那个30px波段，使它"锁定"在屏幕的边缘。

Answer 2

哈哈，很简单，只要把船的位置设置为距边框31px，

if(ship.x <= 30){
   ship.x = 30 + 1;
}

它的作用是，当船离左边30px时，它会将ship.x设置为31，所以它永远不会被卡住，只是来回摆动1px。我不确定这是不是一个完美的解决方案，但它不会在5秒内把船拉回来。