Tim*_*Tim 5 html css jquery collision-detection
这就是我现在正在做的事情:
<!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()
小智 5
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
if ((y1 + $div1.outerHeight(true)) < y2 ||
y1 > (y2 + $div2.outerHeight(true)) ||
(x1 + $div1.outerWidth(true)) < x2 ||
x1 > (x2 + $div2.outerWidth(true)))
return false;
return true;
}
尝试这个？