Question

我正试图阻止元素离开画布。这是否会重置循环，或者只是阻止它进一步发展 - 我不确定。防止元素离开画布的常用方法是什么？

我有以下代码：

var canvas = document.getElementById('canvas'),
    c = canvas.getContext('2d'),
     x = 10,
        y = 15;
function move() {
   c.clearRect(0, 0, 500, 300);
    c.fillRect(x, y, 5, 5),
    c.fillRect(x, y, 15, 15);
    x++;
    y++;
}

setInterval(move, 300);

Answer 1

您需要使用条件：

function move() {
    c.clearRect(0, 0, 500, 300);
    c.fillRect(x, y, 5, 5),
    c.fillRect(x, y, 15, 15);
    if (x < canvas.width - 10) x++;  /// 10 being an arbitrary value
    if (y < canvas.height - 10) y++;
}

您可以像重置循环一样：

x++;
if (x > canvas.width) x = 0;

示例中的任意值表示实际对象宽度的占位符，您需要根据对象的实际尺寸。

Answer 2

您正在寻找的方法称为“碰撞检测”^wiki。

基本上它涉及一些计算。您将不得不知道可能被对象碰撞的区域边界。

您还要确保计算物体的大小。

如果物体的位置+其大小大于边界的位置，则发生碰撞。通常通过反转动画的方向来处理，产生“反弹”的效果。

停止离开画布的动画元素

2 个答案: