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 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
JS匿名函数实例分析
Nov 26 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
Vuex实现数据增加和删除功能
Nov 11 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
django中模板的html自动转意方法
2018/05/27 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python中线程和进程有何区别
2020/06/17 Python
Python 绘制可视化折线图
2020/07/22 Python
python如何对链表操作
2020/10/10 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
酒店营销策划方案
2014/02/07 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
党风廉政承诺书
2014/03/27 职场文书
农业生产宣传标语
2014/10/08 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript
SpringBoot Http远程调用的方法
2022/08/14 Java/Android
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js