How to detect collision in jQuery during animation

I want to detect collision during animation. I tried a button to click a collision while working on a button click, but when I do the animation randomly, the collision does not work.

This is my animated feature. I get a new position and put in a variable

function animateDiv(){

var newq = makeNewPosition();
var oldq = $('.block').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$('.block').animate({ top: newq[0], left: newq[1] }, speed, function(){

  animateDiv(); 

});

In this animation function, two more functions use the computation speed and make a new position

function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = .8;
var speed = Math.ceil(greatest/speedModifier);
return speed; 
}


function makeNewPosition(){

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() + 500;
var w = $(window).width() +500;

var nh = Math.floor(0 * h);
var nw = Math.floor(50 * w);

return [nh,nw];    

}

function checkCollisions() {
                var box = $(".bomb")[0];

                var pos = getPositions(box);
                var pos2 = getPositions(this);
                var horizontalMatch = comparePositions(pos[0], pos2[0]);
                var verticalMatch = comparePositions(pos[1], pos2[1]);

                var match = horizontalMatch && verticalMatch;

                if (match) { 
                change();
                //animateDiv();
                $("#left,#right,#up,#down").hide();
                $(".block").animate({ "left": "-=500px","top":"+=300px" }, "slow", checkCollisions);
                }



            }

And this is my collision check feature

The html code is below.

   <div class="block" id="divFirst">A</div>
    <div class="bomb" id="divSecond">B</div>
    <div id="buket" class="buket"></div>
+4
source share

All Articles