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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
详解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 开发环境配置(Zend Studio)
2010/04/28 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
党员自我评价分享
2013/12/13 职场文书
服务员自我评价
2014/01/25 职场文书
学生思想表现的评语
2014/01/30 职场文书
初中生操行评语大全
2014/04/24 职场文书
低碳环保标语
2014/06/12 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
如何在C++中调用Python
2021/05/21 Python