原生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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHP 裁剪图片
2021/03/09 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
Node.js实现数据推送
2016/04/14 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue实现拖拽效果
2019/12/23 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
详解Python装饰器
2019/03/25 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python数值基础知识浅析
2019/11/19 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
迎新晚会邀请函
2014/02/01 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL