jquery – 检测div碰撞？

这就是我现在正在做的事情：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <Meta name="generator" content="TextMate http://macromates.com/">
    <style type="text/css" media="screen">
 
        body { font-family:"HelveticaNeue-Light"; margin: 0px; }
        input { width: 75%; }
    #wrap { background: #f1f1f1; border: 1px solid #d9d9d9;  padding: 0px; }
 
/*    #sprite { position: relative; background: #909090; width: 20px; height: 20px; padding: 20px; }*/
        #spriteChatBubble { position: relative; background: #fff; border: 1px solid #000; font-size: 10px; max-width: 200px; }
 
        #controlArea { margin-top: 50px; }
 
        .button { background: #fff; color: #0080ff; padding: 5px; border: 1px solid #0050ff; text-decoration: none; }
        .button:active { background: #0080ff; color: #fff; }
 
    </style>
 
    <script type="text/javascript" charset="utf-8">
 
        $(document).ready(function() {
 
            // on load
            updatePos();
 
            // get it ready
 
            $("#sprite").css("background-image","url(left100by100.png)");
 
 
 
            // our main block
 
            function detectCollision() {
 
 
        var spritePos = $("#sprite").position();
        var spritePosLeft = spritePos.left;
        var spritePosTop = spritePos.top;
 
        var chunkPos = $("#chunk").position();
        var chunkPosLeft = chunkPos.left;
        var chunkPosTop = chunkPos.top;
 
 
        // show the chunk's position values (test)
        $("#posLeftChunk").text(posLeftChunk);
 
              if (spritePosLeft == chunkPosLeft || spritePosTop == chunkPosTop) {
 
 
          // make it go somewhere random! :D
 
                var randomLeft = Math.floor(Math.random() * 100);
                var randomTop = Math.floor(Math.random() * -100);
 
          // $("#chunk").hide();
 
                $("#chunk").css("top",randomTop + "px");
                $("#chunk").css("left",randomLeft + "px");
 
 
          // $("#spriteChatBubble").animate({"top": "-=" + randomTop},"fast");
 
              }
 
            }
 
            setInterval(detectCollision,500);
 
 
            function insertValues(name){
 
              var name = "foop";
              var spritePosition = $("#sprite").position();
              var leftVal = spritePosition.left;
              var topVal = spritePosition.top;
 
            }
 
            insertValues("");
 
 
            function showMessage(message) {
 
              $("#spriteChatBubble").show('slow');
              $("#messageText").text(message);
              $("#spriteChatBubble").delay(5000).hide('slow');
 
            }
 
            function updatePos() {
 
              var position = $("#sprite").position();
              $("#posLeft").text(position.left);
              $("#posTop").text(position.top);
              // updatePos();
 
              // insert the values into a database
              insertValues("");
 
            }
 
 
 
            $(document).keydown(function(ee) {
 
              $("#spriteChatBubble").hide();  // no need to show this!
 
              // if ($("#sprite").position.left < 0) {
              //           alert();
              //         }                           // fail
 
              if (ee.keyCode == 37) {
 
                // going left!
 
          $("#sprite").css("background-image","url(left100by100.png)");
          // alert("going left!");
 
          $("#sprite").animate({"left": "-=50px"},"fast");
          $("#spriteChatBubble").animate({"left": "-=50px"},"fast");
          updatePos();
              } 
 
              if(ee.keyCode == 39) {
 
                // going right!
 
          $("#sprite").css("background-image","url(right100by100.png)");
          // alert("going right!");
 
                $("#sprite").animate({"left": "+=50px"},"fast");
                $("#spriteChatBubble").animate({"left": "+=50px"},"fast");
          updatePos();
              }
 
              if(ee.keyCode == 38) {
                $("#sprite").animate({"top": "-=50px"},"fast");
                $("#spriteChatBubble").animate({"top": "-=50px"},"fast");
          updatePos();
              }
 
              if(ee.keyCode == 40) {
                $("#sprite").animate({"top": "+=50px"},"fast");
                $("#spriteChatBubble").animate({"top": "+=50px"},"fast");
          updatePos();
              }
 
 
 
            });
 
            $("#left").click(function() {
              $("#sprite").animate({"left": "-=50px"},"fast");
         updatePos();
            });
 
            $("#right").click(function() {
              $("#sprite").animate({"left": "+=50px"},"fast");
         updatePos();
            });
 
            $("#talkButton").click(function() {
              showMessage($("#speakField").val());
              $("#speakField").val("") ;
            });
 
        });
 
 
 
 
    </script>
    <!-- Date: 2011-05-23 -->
</head>
<body>
 
  <!-- <div id="spriteChatBubble">
      <a class="mt" id="messageText">message</a>
    </div> -->
 
  <!-- avatar (you,the player) -->
 
    <div id="sprite" style="position: relative; background: url('right100by100.png'); width: 100px; height: 100px;">
 
    </div>
 
 
  <!-- chunks -->
 
    <div id="chunk" style="position: relative; background: #909090; width: 20px; height: 5px; top: 100px; left: 80px;"></div>
 
    <div id="controlArea">
 
      position.left: <a id="posLeft">0</a><br>
    position.top: <a id="posTop">0</a><br>
    <br><br>
    position.left (chunk): <a id="posLeftChunk">0</a><br>
    position.top (chunk): <a id="posTopChunk">0</a><br>
 
      <!-- <input type="text" id="speakField" onchange="javascript:void(0);">
         <a href="javascript:void(0);" class="button" id="talkButton">talk!</a>
         <a href="javascript:void(0);" onclick="showMessage('foo');" class="button" id="">test it</a>
 
         <br><br>
 
        <a href="javascript:void(0);" class="button" id="left">(</a>
        <a href="javascript:void(0);" class="button" id="right">)</a>
         -->
    </div>
 
 
</body>
</html>

在所需的方向上移动50个像素,然后检测div碰撞(精灵击中“块”)然后需要重新定位.你知道更好的方法来检测div碰撞吗？谢谢.

解决方法

我会给你一个理论上的答案：

你想要计算你的div的界限 – 得到你的x,y角值,看看是否有任何其他div的边界与你的其他div的值相交.如果有一个坐标交叉点,那么你自己就会发生碰撞.

如何获得位置坐标：

Top: $("#div").offset().top
Left: $("#div").offset().left
Bottom: $("#div").offset().top + $("#div").height()
Right: $("#div").offset().left + $("#div").width()

jquery – 检测div碰撞？

解决方法

猜你在找的jQuery相关文章