碰撞事件代码-JZTXT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;

}
div{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#div1{
background: red;
}
#div2{
background: green;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script>
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

function move(domElement){
domElement.onmousedown = function (e){
const mouseX = e.clientX;
const mouseY = e.clientY;
oldLeft = domElement.offsetLeft;
oldTop = domElement.offsetTop
document.onmousemove = function (e){
const x = e.clientX;
y = e.clientY
domElement.style.left = oldLeft+(x-mouseX)+'px'
domElement.style.top = oldTop+(y-mouseY)+'px'
}
document.onmouseup = function (){
document.onmousemove = null
}

}
}
move(div2)
move(div1)
setInterval(function (){
if((div1.offsetLeft+div1.offsetWidth<div2.offsetLeft||
div1.offsetTop+div1.offsetHeight<div2.offsetTop||
div2.offsetLeft+div2.offsetWidth<div1.offsetLeft||
div2.offsetTop+div2.offsetHeight<div1.offsetTop

)){
console.log('撞')
}
},30)

</script>