Home > Developer > JavaScript
Collision detection is when there are multiple elements in a page, a collision problem occurs when dragging an element, and collision detection is based on a limited range of analog drag and magnetic adsorption.
Effect: Collision Detection
▓▓▓▓▓▓ Collision DetectionLet's take a look at the principle of collision detection.
We want to move the red block, and when it's outside the big block, the big block is green. When it collides with a large block, the generous block turns black.
We use a 9 Gongge method for collision detection.
We just have to rule out four kinds of non-collision situations, and the rest is the collision situation.
Four types of non-collision situations:
1, the small square above the large square (the lower edge of the small square is smaller than the position of the top edge of the generous block) corresponding to the area of 1, 2, 3
2, small square under the large square (the position of the top edge of the small square is larger than the position of the bottom of the block) corresponding to the area of 7, 8, 9
3, the small square on the left side of the large square (the right side of the small square is smaller than the left position of the generous block) corresponding to the area of 1, 4, 7
4, the small square on the right side of the big square (the position of the left side of the small square is larger than the right position of the block) corresponding to the area of 3, 6, 9
Code:
1 //Record Div's current coordinate values2 varL = Ev.clientx-Mouseboxleft;3 varT = Ev.clienty-Mouseboxtop;4 5 //record the position of the dragged element6 varT1 =T;7 varB1 = T +Obj.offsetheight;8 varL1 =L;9 varR1 = L +Obj.offsetwidth;Ten One //record the location of the collision element A varT2 =Obj2.offsettop; - varB2 = T2 +Obj2.offsetheight; - varL2 =Obj2.offsetleft; the varR2 = L2 +Obj2.offsetwidth; - - if(R1 < L2 | | B1 < T2 | | L1 > R2 | | T1 >B2) { -Obj2.style.background = "Green"; +}Else{ -Obj2.style.background = "BLACK"; +}
Full code:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>test2</title>6<style>7 #box {8 width:100px;9 height:100px;Ten background:red; One Position:absolute; Az-index:999; - } - #box2 { the width:100px; - height:100px; - Background:yellow; - Position:absolute; + top:200px; - left:500px; + } A</style> at -<body> - -<div id= "box" ></div> -<div id= "Box2" ></div> -<script> in varOBox = document.getElementById (' box '); - varOBox2 = document.getElementById (' Box2 ')); to + drag (obox,obox2); - the functionDrag (obj,obj2) { *Obj.onmousedown =function(EV) { $ //mouse button downPanax Notoginseng - varEV = EV | |event; the + //get the mouse away from Div A varMouseboxleft = Ev.clientx- This. offsetleft; the varMouseboxtop = Ev.clienty- This. OffsetTop; + - //IE Browser, global capture $ if(obj.setcapture) { $ obj.setcapture (); - } - theDocument.onmousemove =function(EV) { - //Press left mouse button and moveWuyi the varEV = EV | |event; - Wu //Record Div's current coordinate values - varL = Ev.clientx-Mouseboxleft; About varT = Ev.clienty-Mouseboxtop; $ - //record the position of the dragged element - varT1 =T; - varB1 = T +Obj.offsetheight; A varL1 =L; + varR1 = L +Obj.offsetwidth; the - //record the location of the collision element $ varT2 =Obj2.offsettop; the varB2 = T2 +Obj2.offsetheight; the varL2 =Obj2.offsetleft; the varR2 = L2 +Obj2.offsetwidth; the - if(R1 < L2 | | B1 < T2 | | L1 > R2 | | T1 >B2) { inObj2.style.background = "Yellow"; the}Else{ theObj2.style.background = "BLACK"; About } the the //when you set a div move, its position theObj.style.left = L + ' px '; +Obj.style.top = T + ' px '; - the }Bayi theDocument.onmouseup =function(){ the //left mouse button to lift up - -Document.onmousemove = Document.onmouseup =NULL; the the //ie, release the Global Capture ReleaseCapture (); the if(obj.releasecapture) { the obj.releasecapture (); - } the } the the //block default behavior94 return false; the } the } the 98</script> About</body> -JavaScript Animations-Collision detection
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
