停止動畫元素離開畫布

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 。

基本上，它涉及一些計算。 您將必須知道該對象可能與之碰撞的區域的邊界。

您還將確保計算對象的大小。

如果對象的位置及其大小大於邊界的位置，則發生了碰撞。 通常，通過反轉動畫方向來產生“反彈”效果。