• 售前

  • 售后

热门帖子
入门百科

js实现碰撞检测

[复制链接]
fck1956272 显示全部楼层 发表于 2021-10-25 19:53:42 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了js实现碰撞检测的具体代码,供大家参考,具体内容如下


代码:
  1. <!DOCTYPE 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>Document</title>
  7. </head>
  8. <style>
  9.   div {
  10.     position: absolute;
  11.     top: 0px;
  12.     right: 0px;
  13.     bottom: 0px;
  14.     left: 0px;
  15.     margin: auto;
  16.     width: 300px;
  17.     height: 300px;
  18.     background-color: green;
  19.   }
  20.   
  21.   span {
  22.     position: absolute;
  23.     top: 0px;
  24.     left: 0px;
  25.     display: block;
  26.     width: 100px;
  27.     height: 100px;
  28.     background-color: rgb(10, 151, 233);
  29.   }
  30. </style>
  31. <body>
  32.   <div></div>
  33.   <span></span>
  34.   <script>
  35.     var div = document.getElementsByTagName('div')[0];
  36.     var span = document.getElementsByTagName('span')[0];
  37.     span.onmousedown = function(e) {
  38.       // 事件对象兼容
  39.       e = window.event || e;
  40.       // 添加全局捕获
  41.       if (span.setCapture) {
  42.         span.setCapture();
  43.       }
  44.       // 鼠标按下获取鼠标距离页面左侧和顶部距离
  45.       var x = e.clientX;
  46.       var y = e.clientY;
  47.       // 元素距离页面左侧和顶部距离
  48.       var elex = span.offsetLeft;
  49.       var eley = span.offsetTop;
  50.       // 鼠标距离元素距离 =鼠标距离页面距离 -元素距离页面距离
  51.       var X = x - elex;
  52.       var Y = y - eley;
  53.       document.onmousemove = function(e) {
  54.         // 鼠标移动 获取鼠标距离页面距离
  55.         // 事件对象兼容
  56.         e = window.event || e;
  57.         var movex = e.clientX;
  58.         var movey = e.clientY;
  59.         // 元素的left和top值 =鼠标距离页面距离 -鼠标距离元素距离
  60.         var leftx = movex - X;
  61.         var lefty = movey - Y;
  62.         /*----------------------------------------------------------*/
  63.         // 碰撞检测
  64.         // 1.左侧安全距离 =大盒子距离页面左侧距离 -小盒子占位宽
  65.         var safeleft = div.offsetLeft - span.offsetWidth;
  66.         // 2.右侧安全距离 大盒子距离页面左侧距离 +大盒子占位宽
  67.         var saferight = div.offsetLeft + div.offsetWidth;
  68.         // 3.上侧安全距离 =大盒子距离页面顶部距离 -小盒子占位高
  69.         var safetop = div.offsetTop - span.offsetHeight;
  70.         // 4. 下侧安全距离 = 大盒子距离页面顶部距离 + 大盒子占位高
  71.         var safebottom = div.offsetTop + div.offsetHeight;
  72.         if (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
  73.           div.style.background = 'green';
  74.         } else {
  75.           div.style.background = 'red';
  76.         }
  77.         /*----------------------------------------------------------*/
  78.         // 边界值
  79.         // 左
  80.         if (leftx <= 0) {
  81.           leftx = 0;
  82.         }
  83.         // 上
  84.         if (lefty <= 0) {
  85.           lefty = 0;
  86.         }
  87.         // 右
  88.         var rightx = document.documentElement.clientWidth - span.offsetWidth;
  89.         if (leftx >= rightx)
  90.           leftx = rightx;
  91.         // 下
  92.         var righty = document.documentElement.clientHeight - span.offsetHeight;
  93.         if (lefty >= righty) {
  94.           lefty = righty;
  95.         }
  96.         span.style.left = leftx + 'px';
  97.         span.style.top = lefty + 'px';
  98.       }
  99.       document.onmouseup = function() {
  100.           document.onmousemove = null;
  101.           if (span.releaseCapture) {
  102.             span.releaseCapture();
  103.           }
  104.         }
  105.         // 阻止默认事件
  106.       return false;
  107.     }
  108.   </script>
  109. </body>
  110. </html>
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作