оператор if возвращает true, но условие не сработает

Question

В моем коде есть оператор if, как вы можете видеть ниже.Когда я проверяю в журнале консоли, когда эти два элемента сталкиваются друг с другом, оператор if становится истинным, но он не останавливает мою функцию интервала.Интересно, что могло бы заставить его работать не так, как надо?

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);
    }

}