js实现两个圆形的碰撞事件
作者：互联网
js实现两个圆形的碰撞事件,这个事件可以方便游戏的制作.
首先我们先新建两个圆形的div并稍加一些css进行装饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆碰撞事件</title>
<style>
body{
margin: 0
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
#box1{
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 200px;
left: 300px;
z-index: -1;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
这是初步实现的效果.
下面我们给他加入js
var box=document.getElementById('box')
var box1=document.getElementById('box1')
box.onmousedown=function(event){
var chaX=event.clientX-box.offsetLeft
var chaY=event.clientY-box.offsetTop
document.onmousemove=function(event){
box.style.left=event.clientX-chaX+'px'
box.style.top=event.clientY-chaY+'px'
//两直角边的平方之和大于第三遍平方之和
if((box.offsetLeft-box1.offsetLeft)*(box.offsetLeft-box1.offsetLeft)+
(box.offsetTop-box1.offsetTop)*(box.offsetTop-box1.offsetTop)>
(box.offsetWidth/2+box1.offsetWidth/2)*(box.offsetWidth/2+box1.offsetWidth/2))
{
box1.style.background='green'
}
else
{box1.style.background='black'}
}
document.onmouseup=function(){
document.onmousemove=null
}
}
原理大概就是先对一个div实现鼠标拖拽效果,使用onmouse函数
最后通过一个if判定,计算两个圆的圆心距离,当两个圆的半径之和小于这个圆心距离时else变色即可.
这些就是一个圆形div的碰撞事件
可以通过这个事件来实现一下两个方形div的碰撞事件.
标签：box,碰撞,js,圆形,offsetLeft,offsetTop,document,box1,event 来源： https://www.cnblogs.com/lxfsmz/p/15665552.html