js实现碰撞检测


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了js实现碰撞检测的具体代码,供大家参考,具体内容如下

js实现碰撞检测

js实现碰撞检测

代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: green;
  }
  
  span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: rgb(10, 151, 233);
  }
</style>
 
<body>
  <div></div>
  <span></span>
  <script>
    var div = document.getElementsByTagName('div')[0];
    var span = document.getElementsByTagName('span')[0];
    span.onmousedown = function(e) {
      // 事件对象兼容
      e = window.event || e;
      // 添加全局捕获
      if (span.setCapture) {
        span.setCapture();
      }
      // 鼠标按下获取鼠标距离页面左侧和顶部距离
      var x = e.clientX;
      var y = e.clientY;
      // 元素距离页面左侧和顶部距离
      var elex = span.offsetLeft;
      var eley = span.offsetTop;
      // 鼠标距离元素距离 =鼠标距离页面距离 -元素距离页面距离
      var X = x - elex;
      var Y = y - eley;
      document.onmousemove = function(e) {
        // 鼠标移动 获取鼠标距离页面距离
        // 事件对象兼容
        e = window.event || e;
        var movex = e.clientX;
        var movey = e.clientY;
        // 元素的left和top值 =鼠标距离页面距离 -鼠标距离元素距离
        var leftx = movex - X;
        var lefty = movey - Y;
        /*----------------------------------------------------------*/
        // 碰撞检测
        // 1.左侧安全距离 =大盒子距离页面左侧距离 -小盒子占位宽
        var safeleft = div.offsetLeft - span.offsetWidth;
        // 2.右侧安全距离 大盒子距离页面左侧距离 +大盒子占位宽
        var saferight = div.offsetLeft + div.offsetWidth;
        // 3.上侧安全距离 =大盒子距离页面顶部距离 -小盒子占位高
        var safetop = div.offsetTop - span.offsetHeight;
        // 4. 下侧安全距离 = 大盒子距离页面顶部距离 + 大盒子占位高
        var safebottom = div.offsetTop + div.offsetHeight;
 
        if (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
          div.style.background = 'green';
        } else {
          div.style.background = 'red';
        }
 
        /*----------------------------------------------------------*/
 
        // 边界值
        // 左
        if (leftx <= 0) {
          leftx = 0;
        }
        // 上
        if (lefty <= 0) {
          lefty = 0;
        }
        // 右
        var rightx = document.documentElement.clientWidth - span.offsetWidth;
        if (leftx >= rightx)
          leftx = rightx;
        // 下
        var righty = document.documentElement.clientHeight - span.offsetHeight;
        if (lefty >= righty) {
          lefty = righty;
        }
 
 
        span.style.left = leftx + 'px';
        span.style.top = lefty + 'px';
      }
      document.onmouseup = function() {
 
          document.onmousemove = null;
          if (span.releaseCapture) {
            span.releaseCapture();
          }
 
 
        }
        // 阻止默认事件
      return false;
    }
  </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
Java File类的常用方法总结
Mar 18 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
vue穿梭框实现上下移动
Jan 29 #Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 #Javascript
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 #Javascript
js实现简单的倒计时
Jan 28 #Javascript
原生js实现无缝轮播图效果
Jan 28 #Javascript
You might like
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python基础教程之Filter使用方法
2017/01/17 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
python如何在循环引用中管理内存
2018/03/20 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
静态变量和实例变量的区别
2015/07/07 面试题
三八妇女节趣味活动方案
2014/08/23 职场文书
色戒观后感
2015/06/12 职场文书
父亲去世追悼词
2015/06/23 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
python开发的自动化运维工具ansible详解
2021/08/07 Python
python APScheduler执行定时任务介绍
2022/04/19 Python