jquery .animate() collision detection

问题

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">&nbsp;</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>

回答1:

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/

回答2:

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

标签

jquery

jquery-animate

collision-detection

collision