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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
vue-router单页面路由
Jun 17 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
js 数组当前行添加数据方法详解
Jul 28 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
学习ExtJS table布局
2009/10/08 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python实现五子棋人机对战游戏
2020/03/25 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
linux面试题参考答案(1)
2016/01/22 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
贷款承诺书范文
2014/05/19 职场文书
医院标语大全
2014/06/23 职场文书
珍惜资源的建议书
2014/08/26 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
任长霞观后感
2015/06/16 职场文书
爱的教育观后感
2015/06/17 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js