007碰撞检测
程序员文章站
2024-03-15 21:56:00
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰撞检测</title>
<style>
#main{
width: 200px;
height: 200px;
background: aquamarine;
position: absolute;
}
#box{
width: 200px;
height: 200px;
background:rgba(240,30,0,0.5);
position: absolute;
top: 300px;
left: 500px;
}
</style>
<script>
document.onmousemove=function (e) {
var main=document.getElementById("main");
var box=document.getElementById("box");
main.style.top=e.clientY+"px";
main.style.left=e.clientX+"px";
hitTest(main,box);
}
function hitTest(main,box) {
if(main==null||box==null){
return;
}
var m_top=main.offsetTop;
var m_bottom=main.offsetTop+main.offsetHeight;
var m_left=main.offsetLeft;
var m_right=main.offsetLeft+main.offsetWidth;
var b_top=box.offsetTop;
var b_bottom=box.offsetTop+box.offsetHeight;
var b_left=box.offsetLeft;
var b_right=box.offsetLeft+box.offsetWidth;
if(b_top<m_bottom&&m_right>b_left&&m_top<b_bottom&&m_left<b_right){
}
else{
box.style.background="rgba(240,30,0,0.5)";
}
}
</script>
</head>
<body>
<div id="main"></div>
<div id="box"></div>
</body>
</html>上一篇： 碰撞检测----------PointInsideObject
下一篇： Python—yield