js 监测元素碰撞/接触/相交【简单粗暴】

feeeee889

已于 2023-03-21 19:18:15 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

于 2023-03-21 19:02:53 首次发布

本文链接：https://blog.csdn.net/feeeee889/article/details/129694993

本文介绍了如何利用浏览器内置的IntersectionObserverAPI来创建一个简单的网页沙盒生存游戏，当游戏中的角色与物品（如苹果）相交时，实现物品的隐藏效果。通过监听元素的相交状态，实现了点击元素后让元素移动并检测碰撞的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

突发奇想，想要自己做个网页沙盒生存游戏，可以控制角色捡物品，打僵尸，因此需要比如 [ 角色碰到苹果，然后获得苹果 ] 的功能，于是就有了这篇文章~

最终效果图

gif图帧数有限，所以看起来像是没完全接触到，实际上是完全准确的碰到才隐藏的

实现步骤

超简单且官方API正宗用法，性能绝对比其他方法好~用到了IntersectionObserver（节点监测器）这个浏览器自带的构造函数，直接复制粘贴下面代码然后自己去测试看看，很简单的，看一下你就会了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        #b{
            position: absolute;
            width: 80px;
            height: 80px;
            background-color: skyblue;
            left: 300px;
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
    <script>
        // 当点击b元素时，b元素向a元素前进
        var aDom = document.getElementById("a")
        var bDom = document.getElementById("b")
        bDom.addEventListener('click',()=>{
            b.style.left = '0px'
        })
        // 节点相交监听器，当a和b相交/离开时触发回调函数（注意：页面刚开始，即使两个元素没相交，回调函数也会执行一次，因为页面刚构造完成，浏览器就判断这两个元素处于离开状态，因此会在一开始执行一次），
        var io = new IntersectionObserver((entries,observer)=>{
            // 如果不是相交，则直接返回
            if(!entries[0].isIntersecting) return
            console.log('你碰到我了~我直接隐藏')
            bDom.style.display = 'none'
        },{
            root:aDom,
        })
        io.observe(bDom)
    </script>
</body>
</html>

其他补充

上面的代码大概看懂之后，接着就可以看下下面这两个教程，对IntersectionObserver作了详细的说明解释：

http://t.csdn.cn/CxQk2
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver