• javaScript：碰撞检测

    目录

    前言

    实现思路 

    碰撞检测函数 

    完整代码

    前言

            碰撞检测在计算机图形、模拟、交互设计以及各种应用中都具有广泛的应用，它可以确保物体之间的正确交互，提供更真实和高效的体验，并有助于避免潜在的问题和冲突。

    实现思路 

    通过比较两个矩形（用 aDiv 和 bDiv 表示）的位置信息来判断它们是否发生碰撞。以下是该碰撞函数的实现思路：

    1. 首先，通过获取 aDiv 和 bDiv 的位置信息，分别计算它们的上边界(t1 和 t2)、右边界(r1 和 r2)、下边界(b1 和 b2)以及左边界(l1 和 l2)。

    2. 接下来，通过比较这些边界信息，判断两个矩形是否发生碰撞。碰撞的情况可以通过以下四个条件中的任意一个来判断：

      • 如果矩形 aDiv 的上边界大于矩形 bDiv 的下边界，说明 aDiv 在 bDiv 的上方，没有碰撞。
      • 如果矩形 aDiv 的右边界小于矩形 bDiv 的左边界，说明 aDiv 在 bDiv 的左侧，没有碰撞。
      • 如果矩形 aDiv 的下边界小于矩形 bDiv 的上边界，说明 aDiv 在 bDiv 的下方，没有碰撞。
      • 如果矩形 aDiv 的左边界大于矩形 bDiv 的右边界，说明 aDiv 在 bDiv 的右侧，没有碰撞。

    3. 如果上述条件中的任意一个不满足，那么矩形 aDiv 和 bDiv 就发生了碰撞，函数返回 true，否则返回 false 表示没有碰撞。

    碰撞检测函数 

    1. // 碰撞检测函数，用于判断两个元素（矩形）是否发生碰撞
    2. // 参数 aDiv: 第一个元素的 DOM 对象
    3. // 参数 bDiv: 第二个元素的 DOM 对象
    4. // 返回值：如果发生碰撞返回 true，否则返回 false
    5. function isCrash(aDiv, bDiv) {
    6.     // 获取第一个元素的上、右、下、左边界位置
    7.     let t1 = aDiv.offsetTop;
    8.     let r1 = aDiv.offsetLeft + aDiv.offsetWidth;
    9.     let b1 = aDiv.offsetTop + aDiv.offsetHeight;
    10.     let l1 = aDiv.offsetLeft;
    11.  
    12.     // 获取第二个元素的上、右、下、左边界位置
    13.     let t2 = bDiv.offsetTop;
    14.     let r2 = bDiv.offsetLeft + bDiv.offsetWidth;
    15.     let b2 = bDiv.offsetTop + bDiv.offsetHeight;
    16.     let l2 = bDiv.offsetLeft;
    17.  
    18.     // 判断碰撞
    19.     if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {  
    20.         // 不碰撞的情况
    21.         return false;
    22.     } else {
    23.         // 碰撞的情况
    24.         return true;
    25.     }
    26. }
    27.  
    28. // 示例用法：
    29. const elementA = document.getElementById("elementA"); // 获取元素A的DOM对象
    30. const elementB = document.getElementById("elementB"); // 获取元素B的DOM对象
    31.  
    32. const collision = isCrash(elementA, elementB); // 判断元素A和元素B是否发生碰撞
    33. console.log("是否发生碰撞:", collision); // 打印碰撞结果

    完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>拖拽效果title>
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         .wp{
    13.             width: 200px;
    14.             height: 200px;
    15.             background: #04be02;
    16.             position: absolute;
    17.             left: 100px;
    18.             top: 100px;
    19.         }
    20.         .wt{
    21.             width: 200px;
    22.             height: 200px;
    23.             background:pink;
    24.             margin: 200px auto;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <div class="wp">div>
    30.     <div class="wt">div>
    31. body>
    32. html>
    33. <script>
    34. let wt = document.querySelector('.wt')
    35. let wp = document.querySelector('.wp')
    36. wp.onmousedown = function(){
    37.     //求出坐标点距离元素左边和上边的距离
    38.     let diX = event.clientX - wp.offsetLeft;
    39.     let diY = event.clientY - wp.offsetTop;
    40.     console.log(diX,diY);
    41.  
    42.     document.onmousemove = function(){
    43.         let oLeft = event.clientX - diX;
    44.         let oTop = event.clientY - diY;
    45.          if (oLeft<=0) {
    46.             oLeft=0
    47.         }
    48.         if (oTop<=0) {
    49.             oTop=0
    50.         }
    51.         let maxLeft = window.innerWidth-wp.offsetWidth;
    52.         let maxTop= window.innerHeight-wp.offsetHeight;
    53.         if (oLeft>=maxLeft) {
    54.             oLeft=maxLeft
    55.         }
    56.         if (oTop>=maxTop) {
    57.             oTop=maxTop
    58.         }
    59.         //设置元素定位位置
    60.         wp.style.left = oLeft + 'px';
    61.         wp.style.top = oTop + 'px';
    62.         
    63.         //碰撞检测
    64.         if (isCrash(wp,wt)) {
    65.             wt.style.background = '#6cc2dc';
    66.         }else{
    67.             wt.style.background = 'pink'
    68.         }
    69.        
    70.     }
    71. }
    72. document.onmouseup = function(){
    73.     document.onmousemove = null;
    74. }
    75.  
    76. //封装碰撞检测函数
    77. function isCrash(aDiv,bDiv){
    78.      let t1 = aDiv.offsetTop;
    79.      let r1 = aDiv.offsetLeft +aDiv.offsetWidth;
    80.      let b1 = aDiv.offsetTop +aDiv.offsetHeight;
    81.      let l1 = aDiv.offsetLeft;
    82.  
    83.      let t2 = bDiv.offsetTop;
    84.      let r2 = bDiv.offsetLeft +bDiv.offsetWidth;
    85.      let b2 = bDiv.offsetTop +bDiv.offsetHeight;
    86.      let l2 = bDiv.offsetLeft;
    87.      //判断碰撞
    88.      if (t1>b2||r1r2) {  //不碰撞的情况
    89.         return false;
    90.      }else{
    91.         return true; //碰撞的情况
    92.      }
    93. }
    94. script>

  • 相关阅读:
    Python和Excel的完美结合:常用操作汇总(案例详析)
    面试面经|Java面试mybatis面试题
    正交序列扩频_解扩
    C++阶段05笔记03【C++提高编程资料(string容器、vector容器、deque容器、stack容器)】
    abc280
    CV目标检测模型小抄(2)
    《大教堂与集市》读书笔记
    网络安全工程师必备证书有哪些？
    路由器二次开发一步一步把工业路由器变成一个高端的可指定出网、节点和链路的路由器，包含详细过程及快捷脚本（二）
    基于真理和逻辑之后的行动：年少轻狂、中年压力、老年迟疑
  • 原文地址：https://blog.csdn.net/qq_52799985/article/details/133752114