原生JS实现的碰撞检测功能示例


Posted in Javascript onMay 18, 2018

本文实例讲述了原生JS实现的碰撞检测功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com JS碰撞检测</title>
<style>
div{width:100px;
  height:100px;
}
#box{background:red; position:absolute; }
#box1{background:green;position:absolute;top:300px; left:300px;}
</style>
<script>
//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞,且碰撞的过程随时改变其层级,(原需 var 8个变量,现在只需4个变量)
function collText(obj,left,top,obj1){
      var l1=obj.offsetLeft-obj.offsetWidth;
      var t1=obj.offsetTop-obj.offsetHeight;
      var r1=obj.offsetLeft+obj.offsetWidth;
      var b1=obj.offsetTop+obj.offsetHeight;
      if(left<l1||top<t1||left>r1||top>b1){
        obj.style.zIndex=3;
        obj1.style.zIndex=1;
        return true;
      }else{
        obj.style.zIndex=1;
        obj1.style.zIndex=3;
        return false;
      }
};
window.onload=function(){
  var oBox=document.getElementById('box');
  var oBox1=document.getElementById('box1');
  oBox.onmousedown=function(ev){
    var oEvent= ev  ||  event;
    var disX=oEvent.clientX-oBox.offsetLeft;
    var disY=oEvent.clientY-oBox.offsetTop;
    document.onmousemove=function(ev){
      var oEvent= ev ||  event;
      var l=oEvent.clientX-disX;
      var t=oEvent.clientY-disY;
      oBox.style.left=l+'px'  ;
      oBox.style.top=t+'px'  ;
      if(collText(oBox1,l,t,oBox)){
        oBox1.style.background='green';
      }else{
        oBox1.style.background='yellow';
      }
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      oBox.reseaseCapture&&oBox.reseaseCapture();
    };
    oBox.setCapture&&oBox.setCapture();
    return false;
  }
  oBox1.onmousedown=function(ev){
    var oEvent= ev ||  event;
    var disX1=oEvent.clientX-oBox1.offsetLeft;
    var disY1=oEvent.clientY-oBox1.offsetTop;
    document.onmousemove=function(ev){
      var oEvent= ev ||  event;
      var le=oEvent.clientX-disX1;
      var to=oEvent.clientY-disY1;
      oBox1.style.left=le+'px'  ;
      oBox1.style.top=to+'px'  ;
      if(collText(oBox,le,to,oBox1)){
        oBox.style.background='red';
      }else{
        oBox.style.background='#000';
      }
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      oBox1.reseaseCapture&&oBox1.reseaseCapture();
    }
    oBox1.setCapture&&oBox1.setCapture();
    return false;
  }
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript运行工具http://tools.3water.com/code/HtmlJsRun测试运行效果如下(碰撞判定时颜色改变):

 原生JS实现的碰撞检测功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
js动态为代码着色显示行号
May 29 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
jquery map方法使用示例
Apr 23 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 #Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
JS实现调用本地摄像头功能示例
May 18 #Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
Node.js Buffer用法解读
May 18 #Javascript
You might like
PHP中实现图片的锐化
2006/10/09 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
收集的几个Python小技巧分享
2014/11/22 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
员工合理化建议书
2014/05/19 职场文书
小学生安全责任书
2014/07/25 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
Python进程间的通信之语法学习
2022/04/11 Python