jquery .animate（）碰撞检测

我正在使用animate在div网格中移动div。 作为测试，我将一些网格div设置为障碍。 如果动画div与我想要结束动画的其中一个障碍相撞。 插件很好或代码片段。 我有点怀疑我用.animate（）嗅探错误的树，所以任何正确方向的推动或我正在做的改进都会受到赞赏：

           //set up a var for the cube to check to see if it is moving var move = true; //set up gameBoard parameters var minX = 100; var maxX = 1000; var minY = 200; var maxY = 500; $(document).ready(function(){ $(".mapGrid").click(function() { //get the locations of all the obstacles var obstacles = new Array(); var mapGrid = $(".mapGrid").each(function() { if($(this).attr("isObstacle") == "true") { obstacles.push($(this)); } }); //get position of div clicked var divPos = $(this).position(); //get cube location var cubePos = $("#gameCube").position(); var cubeLeft = cubePos.left - 101; var cubeTop = cubePos.top - 101; var animateX = (divPos.left - cubeLeft); var animateY = (divPos.top - cubeTop); $("#gameCube").animate({"left": "+=" + animateX + "px"}, "slow"); $("#gameCube").animate({"top" : "+=" + animateY + "px"}, "slow"); }); });    #gameCube { position: absolute; top: 101px; left:101px; background-color: #ff0044; width: 40px; height: 40px; z-index: 1; } #gameBoard { position: absolute; top: 100px; left:100px; border: 1px solid black; width: 1000px; height: 500px; z-index: 0; } #gameBoard div.mapGrid { background-color: #cccccc; float: left; height: 50px; width: 50px; } #gameBoard div.mapGrid img { float: left; }     
 
 
 
  array("1", "5"), "1" => array("4", "10"), "2" => array("6", "18"), "3" => array("7", "2"), "4" => array("8", "11")); //loop through the columns for($r=0; $r<$rows; $r++) { //loop through the rows if ($r == 0) { //loop through the columns for($c=0; $c<$cols; $c++) { print "
" . $r . "::" . $c . "
"; } } else { $x=$x+100; $y=$y+100; for($c=0; $c<$cols; $c++) { $isObstacle = false; //loop through the obstacles for($o=0; $o<count($obstacles); $o++) { $thisObsArray = $obstacles[$o]; $thisObsRow = $thisObsArray[0]; $thisObsCol = $thisObsArray[1]; if ($thisObsRow == $r) { if ($thisObsCol == $c) { $isObstacle = true; } } } if($isObstacle == true) { print "
" . $r . "::" . $c . "
"; } else { print "
" . $r . "::" . $c . "
"; } } $y=$y-100; $x=-100; } } ?> 
   

Answer 1

这是jQuery动画和碰撞的简单实现： http ： //jsfiddle.net/itechnology/XKJKD/

这里发布了一个类似的问题： 动画期间的jQuery碰撞检测引用了一个看起来很有希望的jQuery碰撞插件： http ： //sourceforge.net/projects/jquerycollision/

Answer 2

我遇到了你遇到的同样问题，但我决定自己做出解决方案。 我写了一个插件来将函数调用绑定到碰撞。

现场演示： http ： //jsfiddle.net/lilglower/mptp3/5/

这是function：

 $.fn.collide = function($selector, $callback){ exists = 'collide' in $; if(!exists) $.collide = []; $.collide.push({ s1 : $(this), s2 : $($selector), callback : $callback }); if(!$.collideStarted){ $.collideStarted = true; setInterval(function(){ $.each($.collide, function(id, data){ data.s1.each(function(){ $s1 = $(this); data.s2.each(function(){ $s2 = $(this); position1 = $s1.position(); position2 = $s2.position(); size1 = {width : $s1.width(), height : $s1.height()}; size2 = {width : $s2.width(), height : $s2.height()}; if (((position1.left + size1.width) > position2.left) && ((position1.top + size1.height) > position2.top) && ((position2.left + size2.width) > position1.left) && ((position2.top + size2.height) > position1.top)) { data.callback($s1, $s2); } }) }) }) }, 50); } } 

以下是用法示例：

 $(function(){ $(".left").animate($(".right").position()); $(".left").collide(".right", function($left, $right){ alert('collide!'); }) })