视图理解：//div1的上边大于div2的下边，，div1的右边小于div2的左边，，div1的上边大于div2的下边，，div1的左边大于div2的右边，这四种情况，问题是没有碰撞/重叠，如下：

<style type="text/css">
*{ list-style:none; text-align:center; font-size:14px; color:#fff; font-family:"微软雅黑"}
body{ list-style:none; margin:0; padding:0; border:0;}
html,body{ height:100%}
p,input,li,ul,a,span,button,div,select,p,{ display:inline-block; list-style:none; padding:0; margin:0; text-align:center;outline:none; color:#fff; font-weight:bold; font-size:14px; font-family:"微软雅黑"}
a{width:20px; height:20px; line-height:20px; display:inline-block;}
input{ background:#afa; width:260px; border:0}
input.end{ background:#cf60;}
span{ overflow:hidden; display:block; float:right;margin:0; margin-left:14px;color:#333; cursor:pointer}
div{ margin:0 auto; width:100px;height:100px; overflow:hidden; border:1px solid #fc0; background:rgba(255,102,0,1); margin:60px auto; position:relative}
.div1{ background:rgba(0,204,153,1)}
input{ background:#39C; border-radius:5px;width:160px; height:40px; cursor:pointer; margin:15px}
p{ display:none}
p,ul{ width:100%; height:100%; position:relative; padding:0; margin:0 }
ul li{ width:125px; height:160px; overflow:hidden; float:left;}
</style>
<script type="text/javascript">
window.onload=function(){
var zIndex=1;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");

div1.onmousedown=function(event){
var this_=this;
var event=event || window.event;
var Dx=event.clientX;
var Dy=event.clientY;
this.style.zIndex=zIndex++;
document.onmousemove=function(event){
var event=event || window.event;
var Mx=event.clientX-Dx;
var My=event.clientY-Dy;
this_.style.left=Mx+"px";
this_.style.top=My+"px";
console.log(Mx);

//物体1的上下左右自适应值
var left1=div1.offsetLeft;
var right1=left1 + div1.offsetWidth;
var top1=div1.offsetTop;
var bottom1=top1 + div1.offsetHeight;

//物体2的上下左右自适应值
var left2=div2.offsetLeft;
var right2=left2 + div2.offsetWidth;
var top2=div2.offsetTop;
var bottom2=top2 + div2.offsetHeight;
console.log(top2);
console.log(bottom1);

//div1的上边大于div2的下边，，div1的右边小于div2的左边，，div1的上边大于div2的下边，，div1的左边大于div2的右边，这四种情况，问题是没有碰撞/重叠
if(bottom2<top1 || right1<left2 || bottom1<top2 || right2<left1){// 表示没碰上
// console.log("两个物体没有碰撞");
}else{
console.log("两个物体碰撞");
}
}
}
document.onmouseup=function(eve){
document.onmousedown=null;
document.onmousemove=null;
}
}
</script>
</head>

<body>
<div id="div1"></div>
<div class="div1" id="div2"></div>
</body>

JS碰撞检测的更多相关文章

  1. cocos2dx - JS - 碰撞检测

    碰撞检测是游戏的一个重要组成部分,我们这里使用一种最简单的方法,就是获取精灵的矩形碰撞框.当然圆形的碰撞检测也比较简单,其他形状就复杂多了.首先是如何获取矩形碰撞框:var hBox=this.her ...

  2. js九宫格的碰撞检测

    说来惭愧,我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情,后来试过一次,真是让我耗费了无数的脑细胞,原理其实不难,但是具体做起来可就让我很恶心,这可能跟我驾驭的代码数量有关系,我一般也就写半屏幕 ...

  3. js实现方块的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 个人感觉.方块的碰撞检测比圆形麻烦~~ <!DOCTYPE html> <html lang=&qu ...

  4. js实现圆形的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 碰撞检测这个东西写小游戏挺有用der~~~ 注释写的还挺全,所以就不多说了,看注释 这是页面结构.wrap存放生成的小 ...

  5. js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...

  6. cocos2d-x JS 各类点、圆、矩形之间的简单碰撞检测

    这里总结了一下点.圆.矩形之间的简单碰撞检测算法 (ps:矩形不包括旋转状态) 点和圆的碰撞检测: 1.计算点和圆心的距离 2.判断点与圆心的距离是否小于圆的半 isCollision: functi ...

  7. js随手笔记-------理解JavaScript碰撞检测算法核心简单实现原理

    碰撞检测在前端游戏,设计拖拽的实用业务等领域的应用场景非常广泛,今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨,让大家能够明白如何实现碰撞以及碰撞的理念是什么:1 ...

  8. js原生碰撞检测

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 基于HTML5和JS实现的切水果游戏

    切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...

随机推荐

  1. Linux下的.txt文件复制到win下面不自动换行

    原因:在Linux系统下, '\n'就是一个换行符,而在windows下,它是由回车换行组成,表示为 \r\n 解决方法:用Notepad++打开文档-->编辑-->文档格式转换--> ...

  2. Unable to register MBean [HikariDataSource (HikariPool-0)] with key 'dataSou rce'; nested exception is javax.management.InstanceAlreadyExistsException: com.z axxer.hikari:name=dataSource,type=HikariDa

    今天启动项目看到已经启动起来,但是看到控制台有红色,没注意是什么问题,具体在细看下,发现是一个Tomcat中发布了两个实例. 解决办法:去发布路径下,全部删掉或者删掉不用的即可.

  3. CSS几个要点补充

    css的font-size属性一定要带px单位,font-weight:700[千万不要带单位哦]就等于font-weight:bold加粗 1.如何像淘宝页面一样,随着浏览器的减小而保持内容区大小不 ...

  4. 【报错原因】Uncaught SyntaxError: Unexpected token <

    实际上是当前页面引入的js文件路径找不到!!! 页面查找不到js文件自动跳转到404.html页面 域名+/404.html

  5. Numpy 数据类型和基本操作

    Numpy 数据类型 bool 用一位存储的布尔类型(值为TRUE或FALSE) inti 由所在平台决定其精度的整数(一般为int32或int64) int8 整数,范围为128至127 int1 ...

  6. Linux 高级文件管理

    1.标准输出(ls -l /dev/stdin 0 ),标准输入(ls -l /dev/stdout 1 ),错误输出(ls -l /dev/stderr 2 ). 2.ls /etc/passwd  ...

  7. Linux-Centos7 安装图形界面

    1.首先安装X(X Window System),命令为 :yum groupinstall "X Window System" 回车(注意有引号) 2.查看桌面列表 : yum ...

  8. Java爬虫模拟登录——不给我毛概二的H某大学

    你的账号访问太频繁,请一分钟之后再试! 从大一开始 就用脚本在刷课 在专业课踢的只剩下一门C#的情况下 活活刷到一周的课 大二开始教务系统多了一个非常**的操作 退课池 and 访问频繁缓冲 难道,我 ...

  9. Linux统计系统文件类型出现的次数

    awk '/^UUID/{fs[$3]++}END{for(i in fs) {print i,fs[i]}}' /etc/fstab /^UUID/ 匹配确定行范围

  10. ant___令牌过滤器

    令牌过滤器允许我们在复制时过滤文件中的数据.要进行过滤,需要使用一个必须与过滤器任务中的@token @设置匹配的标记.任务使用@作为标记分隔符.为了实现此功能,apache ant提供了使用toke ...