如何在动画期间检测jQuery中的碰撞

时间:2016-05-20 10:10:07

标签: javascript jquery animation

我想在动画中检测碰撞。我试着按下按钮点击碰撞正在进行按钮点击但是当我随机进行动画时碰撞不起作用

这是我的动画功能。我正在获得新职位并置于变量

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

});

在这个动画功能中,还有两个函数正在使用计算速度并创建新位置

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



            }

这是我的检查碰撞功能

html代码如下。

   <div class="block" id="divFirst">A</div>
    <div class="bomb" id="divSecond">B</div>
    <div id="buket" class="buket"></div>

0 个答案:

没有答案