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(){
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();
$("#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>
ammad source
share