jquery .animate() Kollisionserkennung

Question

jquery .animate() Kollisionserkennung

Gefragt el 27 de Juli, 2011: Wann wurde die Frage gestellt
6567 Ansichten: Anzahl der Besuche der Frage
2 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich verwende Animate, um ein Div innerhalb eines Rasters von Divs zu verschieben. Als Test setze ich einige der Gitter-Divs als Hindernisse. Wenn das animierte Div mit einem der Hindernisse kollidiert, möchte ich die Animation beenden. Ein Plug-in oder ein Codeschnipsel ist in Ordnung. Ich habe den Verdacht, dass ich den falschen Baum mit .animate() erschnüffle, so dass jeder Schubs in die richtige Richtung oder Verbesserung dessen, was ich tue, zu schätzen weiß:

<!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>

Gefragt el 27 de Juli, 2011 von PruitIgoe

1 Stimmen

Bitte posten Sie einige gerenderte html, damit wir damit spielen können.. am besten, um ein jsfiddle. zu erstellen.

Kommentiert el 27 de Juli, 2011 von Gabriele Petrioli

0 Stimmen

Danke, ich konnte mich nicht an den Namen der Website erinnern.

Kommentiert el 27 de Juli, 2011 von PruitIgoe

Answer 1

2 Antworten

Answer 2

1voto

Randy Burden Punkte 2491

Hier ist eine einfache Implementierung von jQuery Animation und Kollision: http://jsfiddle.net/itechnology/XKJKD/

Eine ähnliche Frage wird hier gestellt: jQuery Kollisionserkennung während der Animation die auf ein vielversprechendes jQuery-Kollisions-Plugin verweist: http://sourceforge.net/projects/jquerycollision/

Beantwortet el 21 de Oktober, 2011 von Randy Burden (2491 Punkte )

Answer 3

1voto

Adam F Punkte 1742

Ich stand vor demselben Problem wie Sie, aber ich habe beschlossen, meine eigene Lösung zu finden. Ich habe ein Plugin geschrieben, um einen Funktionsaufruf an Kollisionen zu binden.

Live-Demo: http://jsfiddle.net/lilglower/mptp3/5/

Hier ist die Funktion:

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

Hier ist ein Beispiel für die Verwendung:

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

})

Beantwortet el 3 de April, 2013 von Adam F (1742 Punkte )

jquery .animate() Kollisionserkennung

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

jquery .animate() Kollisionserkennung

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: