停止动画元素离开画布

Question

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

我有以下代码：

http://jsfiddle.net/tmyie/R5wx8/2/

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 。

基本上，它涉及一些计算。 您将必须知道该对象可能与之碰撞的区域的边界。

您还将确保计算对象的大小。

如果对象的位置及其大小大于边界的位置，则发生了碰撞。 通常，通过反转动画方向来产生“反弹”效果。