这就是我现在正在做的事情:
<!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()