Question

我在画布上有一艘太空船。它具有速度ship.vx和ship.vy。当它离画布边界30px时，我设置了ship.vx＆amp; ship.vy到0并在船的相反方向移动背景物体。此时船只停在了一个点上。这一切都很好。现在，如果我尝试左右移动（stuck at top/bottom）或自上而下（stuck at left/right），则不会因为它卡在vx＆amp; 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

根据物体在屏幕上的位置来操纵物体的速度以供显示目的绝不是最好的选择。通常使用基于父的系统，因此您有一个主容器，所有对象（包括船）都是该容器的子容器并相对移动到主容器。现在，如果船舶的全球位置在30px波段内，您可以更新集装箱的位置，使其“锁定”在屏幕边缘。

Answer 2

哈哈，简单来说，只需将船的位置从边界设置为31px，

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

它的作用是，当船只从左侧30px时，它会将ship.x设置为31，所以它永远不会被卡住，只是前后摆动1px。我不确定它是否是一个完美的解决方案，但它不会将船拉回5秒钟。

对于越界物体，帆布的移动

2 个答案: