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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
Node.js的包详细介绍
Jan 14 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
pandas 选择某几列的方法
2018/07/03 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
python中添加模块导入路径的方法
2021/02/03 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
介绍一下Linux中的链接
2016/05/28 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL