if語句返回true，但條件不會觸發

Question

我在代碼中有一個if語句，如下所示。 當我在控制台日志中檢查這兩個元素相互沖突時，if語句變為true，但不會停止我的interval函數。 我想知道是什么原因導致它無法正常工作？

var animationTimer = setInterval(bladAnimation, 30);

document.onkeydown = function(event) {
    if (event.keyCode == 37) {
        // <--
        fx = -15;
        fy = 0;
        froskAnimation()
    }
    if (event.keyCode == 38) {
        // opp
        fy = -15;
        fx = 0;
        froskAnimation()
    }
    if (event.keyCode == 39) {
        // -->
        fx = 15;
        fy = 0;
        froskAnimation()
    }
    if (event.keyCode == 40) {
        // ned
        fy = 15;
        fx = 0;
        froskAnimation()
    }
}

function froskAnimation() {

    Xfrosk = fx + Xfrosk;
    Yfrosk = fy + Yfrosk;

    if ((Yfrosk + 70 > maxY) || (Yfrosk < minY)) {
        Yfrosk = Yfrosk - fy;
    }
    if ((Xfrosk + 70 > maxX) || (Xfrosk < minX)) {
        Xfrosk = Xfrosk - fx;
    }

    frosk.style.left = Xfrosk + "px";
    frosk.style.top = Yfrosk + "px";
    console.log(Xfrosk)
}

function bladAnimation() {
    Yblad = by + Yblad;

    if ((Yblad + 70 > maxY) || (Yblad < minY)) {
        by = by * -1;
    }

    blad.style.top = Yblad + "px";
}

if (blad.x < frosk.x + frosk.width  && blad.x + blad.width  > frosk.x 
        && blad.y < frosk.y + frosk.height && blad.y + blad.height > frosk.y) {
    clearInterval(animationTimer);
}

完整代碼在這里： https : //codepen.io/ctrlvi/pen/jXbJYG

Answer 1

加載JavaScript時，該條件僅執行一次。 那時條件可能是錯誤的。 您應該在bladAnimation的末尾移動它（我想您要做的是在碰到另一個移動塊時停止其移動）。

function bladAnimation() {
    Yblad = by + Yblad;

    if ((Yblad + 70 > maxY) || (Yblad < minY)) {
        by = by * -1;
    }

    blad.style.top = Yblad + "px";

    if (blad.x < frosk.x + frosk.width  && blad.x + blad.width  > frosk.x 
        && blad.y < frosk.y + frosk.height && blad.y + blad.height > frosk.y) {
        clearInterval(animationTimer);
    }

}