I'm using animate to move a div within a grid of divs. As a test I am setting some of the grid divs as obstacles. If the animated div collides with one of the obstacles I want to end the animation. A plug in is fine or a snippet of code. I kind of suspect I am sniffing up the wrong tree with .animate() so any shove in the right direction or improvement on what I am doing is appreciated:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game Test</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- javascript -->
<script src="../js/jquery.js"></script>
<script language="javascript">
//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");
});
});
</script>
<!-- stylesheets -->
<style>
#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;
}
</style>
<!--conditional comments -->
</head>
<body>
<div id="msgBox"></div>
<div id="gameCube"> </div>
<div id="gameBoard">
<?php
$rows = 10;
$cols = 20;
$x=-100;
$y=-100;
$obstacles = array("0" => 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 "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\" >" . $r . "::" . $c . "</div>";
}
} 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 "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\" isObstacle=\"true\" style=\"background-Color: #44ff66; position: relative; top: " . $y. "px; left: " . $x . "px; \">" . $r . "::" . $c . "</div>";
} else {
print "<div id=\"mapGrid_" . $r . "_" . $c . "\" row=\"" . $r . "\" col=\"" . $c . "\" class=\"mapGrid\" isObstacle=\"false\" style=\"position: relative; top: " . $y. "px; left: " . $x . "px; \">" . $r . "::" . $c . "</div>";
}
}
$y=$y-100;
$x=-100;
}
}
?>
</div>
</body>
</html>
Randy Burden
Here's a simple implementation of jQuery animation and collision: http://jsfiddle.net/itechnology/XKJKD/
A similar question is posted here: jQuery collision detection during animation which references a jQuery collision plugin which looks promising: http://sourceforge.net/projects/jquerycollision/
I was faced with the same issue you are having, but I have decided to make my own solution. I wrote a plugin to bind a function call to collisions.
Live Demo: http://jsfiddle.net/lilglower/mptp3/5/
Here is the 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);
}
}
Here is an example of the usage:
$(function(){
$(".left").animate($(".right").position());
$(".left").collide(".right", function($left, $right){
alert('collide!');
})
})
来源：https://stackoverflow.com/questions/6837167/jquery-animate-collision-detection