介绍 & lt; ! doctype html>
& lt; html>
& lt; head>
& lt; meta charset=皍tf-8"祝辞
& lt; title> www.jb51.net , JS碰撞检测& lt;/title>
& lt; style>
div{宽度:100 px;
身高:100 px;才能
}
#箱{背景:红色;,位置:绝对的,,}
# box1{背景:绿色;位置:绝对;最高:300 px;,左:300 px;}
& lt;/style>
& lt; script>//两个碰撞的盒子。是建立在一个不动的基础上,所以可以根据不动的盒子求出四个方向的顶部和左值。然后再判断其是否碰撞,且碰撞的过程随时改变其层级,(原需,var 8个变量,现在只需4个变量)
function collText (obj(左),其中obj1) {
,,,,,var l1=obj.offsetLeft-obj.offsetWidth;
,,,,,var t1=obj.offsetTop-obj.offsetHeight;
,,,,,var r1=obj.offsetLeft + obj.offsetWidth;
,,,,,var b1=obj.offsetTop + obj.offsetHeight;
,,,,,如果(left r1 | | top> b1) {
,,,,,,,obj.style.zIndex=3;
,,,,,,,obj1.style.zIndex=1;
,,,,,,,return 真实;
,,,,,其他}{
,,,,,,,obj.style.zIndex=1;
,,,,,,,obj1.style.zIndex=3;
,,,,,,,return 假;
,,,,,}
};
window=function () {
var 才能;oBox=. getelementbyid(& # 39;盒# 39;);
var 才能;oBox1=. getelementbyid (& # 39; box1& # 39;);
oBox.onmousedown才能=function (ev) {
,,,var oEvent=, ev , | |,,事件;
,,,var disX=oEvent.clientX-oBox.offsetLeft;
,,,var disY=oEvent.clientY-oBox.offsetTop;
,,,document.onmousemove=function (ev) {
,,,,,var oEvent=, ev | |,,事件;
,,,,,var l=oEvent.clientX-disX;
,,,,,var t=oEvent.clientY-disY;
,,,,,oBox.style.left=l + & # 39; px # 39;,,;
,,,,,oBox.style.top=t + & # 39; px # 39;,,;
,,,,,如果(collText (oBox1 l、t、oBox)) {
,,,,,,,oBox1.style.background=& # 39;绿色# 39;;
,,,,,其他}{
,,,,,,,oBox1.style.background=& # 39;黄色# 39;;
,,,,,}
,,,};
,,,document.onmouseup=function () {
,,,,,document.onmousemove=零;
,,,,,document.onmouseup=零;
,,,,,oBox.reseaseCapture&, oBox.reseaseCapture ();
,,,};
,,,oBox.setCapture&, oBox.setCapture ();
,,,return 假;
,,}
oBox1.onmousedown才能=function (ev) {
,,,var oEvent=, ev | |,,事件;
,,,var disX1=oEvent.clientX-oBox1.offsetLeft;
,,,var disY1=oEvent.clientY-oBox1.offsetTop;
,,,document.onmousemove=function (ev) {
,,,,,var oEvent=, ev | |,,事件;
,,,,,var le=oEvent.clientX-disX1;
,,,,,var =oEvent.clientY-disY1;
,,,,,oBox1.style.left=le + & # 39; px # 39;,,;
,,,,,oBox1.style.top=+ & # 39; px # 39;,,;
,,,,,如果(collText (le, oBox oBox1)) {
,,,,,,,oBox.style.background=& # 39;红色# 39;;
,,,,,其他}{
,,,,,,,oBox.style.background=& # 39; # 000 & # 39;;
,,,,,}
,,,};
,,,document.onmouseup=function () {
,,,,,document.onmousemove=零;
,,,,,document.onmouseup=零;
,,,,,oBox1.reseaseCapture&, oBox1.reseaseCapture ();
,,,}
,,,oBox1.setCapture&, oBox1.setCapture ();
,,,return 假;
,,}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癰ox"祝辞& lt;/div>
& lt; div id=癰ox1"祝辞& lt;/div>
& lt;/body>
& lt;/html>
利用JavaScript如何实现一个碰撞检测功能示例?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
具体如下:
关于利用JavaScript如何实现一个碰撞检测功能示例问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
