js实现拖拽与碰撞检测


Posted in Javascript onSeptember 18, 2020

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

js实现拖拽与碰撞检测

拖拽

原理分析

对于拖拽一个div盒子,首先我们需要将鼠标移动到盒子上,然后按住鼠标左键,移动鼠标到目标位置,再松开鼠标,对于这一过程的分析,

显然需要三个鼠标事件:

  • 按住鼠标:onmousedown
  • 移动鼠标:onmousemove
  • 松开鼠标:onmouseup

实现步骤

1、**鼠标按下时:**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离,分别减去盒子距离页面左边界与上边界的值,这样我们

就得到了鼠标距离盒子左边界与上边界的值;

2、**鼠标移动时:**我们重新获取此时鼠标距离页面左边界与上边界的值,再用它们减去步骤一中得到的鼠标距离盒子左边界与上边界的

值,将得到的值重新赋给盒子,这样盒子就能与鼠标保持相对静止,在页面上移动;

3、**松开鼠标时:**将鼠标移动事件清除。

实现代码

var oDiv = document.getElementById('box2');
  oDiv.onmousedown = function(ev){
   var e = ev||window.event;
   var offsetX = e.clientX - oDiv.offsetLeft;
   var offsetY = e.clientY - oDiv.offsetTop;
   document.onmousemove = function(ev){
    var e = ev||window.event;
    var l =e.clientX-offsetX;
    var t = e.clientY- offsetY;
    
    if(l<=0){
     l=0;
    }
    if(t<=0){
     t=0;
    }
    var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
    if(l>=windowWidth-oDiv.offsetWidth){
     l=windowWidth-oDiv.offsetWidth;
    }
    var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
    if(t>=windowHeight-oDiv.offsetHeight){
     t=windowHeight-oDiv.offsetHeight;
    }
    oDiv.style.left = l + "px";
    oDiv.style.top = t + "px";
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;
  }

碰撞检测

原理分析

js中碰撞检测在应用于制作一些小游戏,如飞机大战、打砖块、贪吃蛇等,那么如何实现碰撞检测呢?

对于两个矩形方块之间的碰撞,如果直接思考如何书写代码检测它们之间有没有发生接触,这是一个比较难的事情,我们可以换一个思路,

找出它们没有发生碰撞得情况,排除这些情况,那么剩余的情况必然是发生了碰撞。

如下图,检测方块a与b之间是否发生碰撞,我们可以分别获取a与b的上、下边的top值,左右边的left值,那么以下四种情况是没有发生碰撞的:

js实现拖拽与碰撞检测

不会发生碰撞的4种情况:

1、a左>b右
2、a上>b下
3、a右<b左
4、a下<b上

a左:a.offsetLeft;
a右:a.offsetLeft + a.offsetWidth;
a上:a.offsetTop;
a下:a.offsetTop+a.offsetHeight;
b左:b.offsetLeft;
b右: b.offsetLeft + b.offsetWidth;
b上:b.offsetTop;
b下: b.offsetTop+b.offsetHeight;

只要发生了上面四种情况任意一种,那么就没有碰撞:

实现代码

function knock(node1,node2){
   var l1 = node1.offsetLeft;
   var r1 = node1.offsetLeft + node1.offsetWidth;
   var t1 = node1.offsetTop;
   var b1 = node1.offsetTop+node1.offsetHeight;
   var l2 = node2.offsetLeft;
   var r2 = node2.offsetLeft + node2.offsetWidth;
   var t2 = node2.offsetTop;
   var b2 = node2.offsetTop+node2.offsetHeight;
   if(l2>r1||r2<l1||t2>b1||b2<t1){
    return false;
   }else{
    return true;
   }
  }

拖拽与碰撞完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1{
      width: 100px;height: 100px;position: absolute;
      top: 200px;left: 250px;background-color: blueviolet;
    }
    #box2{
      width: 100px;height: 100px;position: absolute;
      top: 400px;left: 550px;background-color: salmon;
    }
  </style>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <script>
    var box11 = document.getElementById("box1")
    var box21 = document.getElementById("box2")
    
    if(knock(box21,box11)){
      box1.style.backgroundColor="blue";
    }else{
      box1.style.backgroundColor="grey";
    }
    
    function knock(node1,node2){
      var l1 = node1.offsetLeft;
      var r1 = node1.offsetLeft + node1.offsetWidth;
      var t1 = node1.offsetTop;
      var b1 = node1.offsetTop+node1.offsetHeight;
      var l2 = node2.offsetLeft;
      var r2 = node2.offsetLeft + node2.offsetWidth;
      var t2 = node2.offsetTop;
      var b2 = node2.offsetTop+node2.offsetHeight;
      if(l2>r1||r2<l1||t2>b1||b2<t1){
        return false;
      }else{
        return true;
      }
    }
    var oDiv = document.getElementById('box2');
    oDiv.onmousedown = function(ev){
      var e = ev||window.event;
      var offsetX = e.clientX - oDiv.offsetLeft;
      var offsetY = e.clientY - oDiv.offsetTop;
      document.onmousemove = function(ev){
        var e = ev||window.event;
        var l =e.clientX-offsetX;
        var t = e.clientY- offsetY;
        if(knock(box21,box11)){
          box1.style.backgroundColor="blue";
        }else{
          box1.style.backgroundColor="grey";
        }
        if(l<=0){
          l=0;
        }
        if(t<=0){
          t=0;
        }
        var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
        if(l>=windowWidth-oDiv.offsetWidth){
          l=windowWidth-oDiv.offsetWidth;
        }
        var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
        if(t>=windowHeight-oDiv.offsetHeight){
          t=windowHeight-oDiv.offsetHeight;
        }
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
      }
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  </script>
</body>
</html>

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

Javascript 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
详解JavaScript 的执行机制
Sep 18 #Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 #Javascript
React倒计时功能实现代码——解耦通用
Sep 18 #Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 #Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 #Javascript
vue项目实现多语言切换的思路
Sep 17 #Javascript
You might like
PHP 5.0 Pear安装方法
2006/12/06 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python文件及目录操作实例详解
2015/06/04 Python
python3调用R的示例代码
2018/02/23 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
python在地图上画比例的实例详解
2020/11/13 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
C# .NET面试题
2015/11/28 面试题
档案接收函范文
2014/01/10 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
社区党支部承诺书
2015/04/29 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
python绘制箱型图
2021/04/27 Python
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers