碰撞检测封装

分手后的思念是犯贱 2022-09-14 09:49 195阅读 0赞

**css:**

<style>
            div {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                background: red;
            }
    
            img {
                width: 100%;
                height: 100%;
            }
    
            .big {
                width: 200px;
                height: 200px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -100px;
                margin-left: -100px;
                background: #ccc;
            }
        </style>

**html:**

<div></div>
        <div class="big"></div>

**javascript:**

<script>
            // 1. 当鼠标按下之后 鼠标移动的时候 让div跟随鼠标移动
            // 1.1获取元素
            var div = document.querySelector('div');
            var big = document.querySelector('.big')
            console.log(div, big);
    
            // 碰撞检测:
            /*
                不安全范围最大值和最小值:
                    最小值 = 大的offsetLeft - 小的offsetWidth;
                    最大值 = 大的offsetLeft + 大的offsetWidth;
            */
    
    
            crash();
    
            function crash() {
                // 1.2 当鼠标按下之后
                div.onmousedown = function () {
                    var x1 = event.clientX - div.offsetLeft;
                    var y1 = event.clientY - div.offsetTop;
                    console.log(x1, y1);
                    // 1.3 鼠标是在全页面移动 document
                    document.onmousemove = function () {
                        var l = event.clientX - x1;
                        var t = event.clientY - y1;
                        console.log(l, t);
    
                        var min = big.offsetLeft - div.offsetWidth;
                        var max = big.offsetLeft + big.offsetWidth;
                        var tmin = big.offsetTop - div.offsetHeight;
                        var tmax = big.offsetTop + big.offsetHeight
                        // 判断l是否在最大值最小值之间
                        if (l > min && l < max && t > tmin && t < tmax) {
                            big.style.background = 'red';
                        } else {
                            big.style.background = '#ccc';
                        }
                        // 1.6 将值赋值给元素
                        div.style.left = l + 'px';
                        div.style.top = t + 'px';
                        // 设置全局捕获
                        if (div.setCapture) {
                            div.setCapture();
                        }
                        // 阻止默认行为
                        return false;
                    };
                };
                // 2. 当鼠标抬起之后 取消鼠标的移动事件
                document.onmouseup = function () {
                    document.onmousemove = null;
                    // 释放全局捕获
                    if (div.releaseCapture) {
                        div.releaseCapture();
                    }
                };
    
            };
        </script>

**效果:**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3b395792b940413584a385fabdbb6aa4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/c3e3b415b8004cb4960f251c5ce88a19.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/3abe455327854558a1e3c0c01bce146d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 Unity的碰撞检测(六)

温馨提示：本文基于前一篇“[Unity的碰撞检测(五)][Unity]”继续探讨两个游戏对象具备刚体的BodyType均为Dynamic，但是Collision Detecti

ゝ一纸荒年。/ 2024年02月20日 09:35/ 0 赞/ 41 阅读

相关 Unity的碰撞检测(四)

温馨提示：本文基于前一篇“[Unity的碰撞检测(三)][Unity]”继续探讨两个游戏对象具备刚体的触发检测，阅读本文则默认已阅读前文。（一）测试说明在基于两个游

你的名字/ 2024年02月20日 08:32/ 0 赞/ 44 阅读

相关碰撞检测封装

css: <style> div { width: 100px; height

分手后的思念是犯贱/ 2022年09月14日 09:49/ 0 赞/ 196 阅读

相关带碰撞检测的摄像机

原文地址：[http://blog.sina.com.cn/s/blog\_4a2183a601018fmd.html][http_blog.sina.com.cn_s_blo

桃扇骨/ 2022年08月08日 19:33/ 0 赞/ 147 阅读

相关高级碰撞检测技术

自从计算机游戏出现以来，程序员就不断地想办法来更精确地模拟现实世界。就拿乒乓游戏为例子（译者：Pong—被誉为电子游戏的祖先，有幸见过一次：），能见到祖先做的游戏感觉真是爽啊，

╰半橙微兮°/ 2022年08月05日 10:26/ 0 赞/ 201 阅读

相关碰撞检测问题

我哭，今天太郁闷了，用了差不多一天的时间，才解决碰撞的一个问题。本来做的VR射线是正常的，但是美工那里添加了一个天空球，碰撞是默认的。之前我们调pc端时，解决了这个问题，我

ゝ一纸荒年。/ 2022年07月17日 03:51/ 0 赞/ 198 阅读

相关游戏中的碰撞检测

转自：http://www.cnblogs.com/Clingingboy/p/3335889.html [http://wenku.baidu.com/view/45544

曾经终败给现在/ 2022年06月13日 06:30/ 0 赞/ 226 阅读

相关游戏中的碰撞检测

游戏中的碰撞检测方式有很多，不同的算法之间主要是在精度和速度之间权衡。以下几种方式按照速度排序说明。以2D为例，3D不过是增加了一维罢了，算法理解上没太大区别。

冷不防/ 2022年04月16日 03:08/ 0 赞/ 247 阅读

相关 Revi开发 - 碰撞检测

本文演示Revit文件中的碰撞检测。 1.用Revit绘制模型 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

心已赠人/ 2022年02月25日 10:20/ 0 赞/ 198 阅读

相关 javascript拖拽碰撞检测

拖拽碰撞检测碰撞改变颜色 <style> .div1{width: 100px;height: 100px;background: pin

野性酷女/ 2022年01月26日 14:29/ 0 赞/ 279 阅读