SoFunction
Updated on 2025-04-03

JS realizes collision detection effect

This example shares the specific code for JS to achieve collision detection effect for your reference. The specific content is as follows

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #all{
  width: 500px;
  height: 500px;
  border: 2px solid sandybrown;
  position: relative;
  margin: 0 auto;
 }
 #div1{
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
 }
 #center{
  width: 150px;
  height: 150px;
  background-color: black;
  position: absolute;
  margin: 175px;
 }
 </style>
</head>
<body>
 <div >
 <div ></div>
 <div ></div>
 </div>
 <script type="text/javascript">
 var oAll = ("all");
 var oDiv1 = ("div1");
 var oCenter = ("center");
 
 var maxL =  - ;
 var maxT =  - ;
 
  = function(){
  var ev = ev || ;
  var lessX =  - ;
  var lessY =  - ;
   = function(){
  var ev = ev || ;
  var posL =  - lessX;
  var posT =  - lessY;
  
  if(<posL && posL<325 && <posT && posT<325 ){
    = "red"
  }else{
    = "black"
  }
  if(posL<0){
   posL = 0;
  }
  if(posT<0){
   posT = 0;
  }
  if(posL>maxL){
   posL = maxL;
  }
  if(posT>maxT){
   posT = maxT;
  }
   = posL + "px";
   = posT + "px";
  }
 }
  = function(){
   = null;
   = null;
 }
 </script>
</body>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.