js实现两个方形div的碰撞事件

js实现两个方形div的碰撞事件

上篇文章我们实现了圆形div的碰撞事件,接下来我们来试试两个方形div的碰撞事件.

回顾一下上篇

原理大概就是先对一个div实现鼠标拖拽效果,使用onmouse函数

最后通过一个if判定,计算两个圆的圆心距离,当两个圆的半径之和小于这个圆心距离时else变色即可.

这些就是一个圆形div的碰撞事件

而方形的div要考虑到一个div1的offsettop,offsetleft,offsetLeft+offsetWidth,offsetTop+offsetHeight值与div2的offsettop-offsetheight,offsetleft-offsetwidth,offsetLeft,offsetTop值

理论存在,开始执行.

 还是先创建两个方块div,代码如下

<!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: 300px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
    }
    #box1{
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        top: 200px;
        left: 300px;
        z-index: -1;
    }
    
    </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+box.offsetWidth<box1.offsetLeft
||box.offsetTop+box.offsetHeight<box1.offsetTop
||box.offsetTop>box1.offsetTop+box1.offsetHeight
||box.offsetLeft>box1.offsetLeft+box1.offsetWidth)
{
box1.style.background='green'
}
else
{box1.style.background='black'}

}
document.onmouseup=function(){
    document.onmousemove=null
}
}

我们不能通过考虑两个方块什么时候可以碰到,我们通过反推两个方块什么时候碰不到来实现这个效果.

好啦这个方块碰撞可以适用于大部分游戏的效果,谢谢观看

posted @ 2021-12-09 09:35  不知名代码小白  阅读(525)  评论(0)    收藏  举报