JS碰撞检测

视图理解：//div1的上边大于div2的下边，，div1的右边小于div2的左边，，div1的上边大于div2的下边，，div1的左边大于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>

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

cocos2dx - JS - 碰撞检测
碰撞检测是游戏的一个重要组成部分,我们这里使用一种最简单的方法,就是获取精灵的矩形碰撞框.当然圆形的碰撞检测也比较简单,其他形状就复杂多了.首先是如何获取矩形碰撞框:var hBox=this.her ...
js九宫格的碰撞检测
说来惭愧,我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情,后来试过一次,真是让我耗费了无数的脑细胞,原理其实不难,但是具体做起来可就让我很恶心,这可能跟我驾驭的代码数量有关系,我一般也就写半屏幕 ...
js实现方块的碰撞检测
文章地址:https://www.cnblogs.com/sandraryan/ 个人感觉.方块的碰撞检测比圆形麻烦~~ <!DOCTYPE html> <html lang=&qu ...
js实现圆形的碰撞检测
文章地址:https://www.cnblogs.com/sandraryan/ 碰撞检测这个东西写小游戏挺有用der~~~ 注释写的还挺全,所以就不多说了,看注释这是页面结构.wrap存放生成的小 ...
js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
cocos2d-x JS 各类点、圆、矩形之间的简单碰撞检测
这里总结了一下点.圆.矩形之间的简单碰撞检测算法 (ps:矩形不包括旋转状态) 点和圆的碰撞检测: 1.计算点和圆心的距离 2.判断点与圆心的距离是否小于圆的半 isCollision: functi ...
js随手笔记-------理解JavaScript碰撞检测算法核心简单实现原理
碰撞检测在前端游戏,设计拖拽的实用业务等领域的应用场景非常广泛,今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨,让大家能够明白如何实现碰撞以及碰撞的理念是什么:1 ...
js原生碰撞检测
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
基于HTML5和JS实现的切水果游戏
切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...

随机推荐

cherry-pick多个commitid时的顺序说明
有的时候,我们在一个分支上提交了几个commit,然后我们会需要提交到其他分支上,一般情况下,我们会采用的merge的方式来合并分支,另外一种方式是只需要其中几个提交时,我们会cherry-pick到 ...
GALV_maptravel研究分析（1）
强大的地图传送式插件~~ 我以自带demo进行分析,本篇地图Init setting map 1.---------------------------------- 实例创建地图 Galv.MAP ...
nginx配置详细解析
转自 http://blog.csdn.net/zhongguozhichuang/article/details/528168871.静态HTTP服务器首先,Nginx是一个HTTP服务器,可以将 ...
SVN在update的时候报错Please execute the 'Cleanup' command.
需要右键clearn up 然后再update
shell printf命令：怎样格式化输出语句
printf 命令用于格式化输出, 是echo命令的增强版.它是C语言printf()库函数的一个有限的变形,并且在语法上有些不同. 注意:printf 由 POSIX 标准所定义,移植性要比 ech ...
用java生成32位全球唯一的id编号
GUID是一个128位长的数字,一般用16进制表示.算法的核心思想是结合机器的网卡.当地时间.一个随即数来生成GUID.从理论上讲,如果一台机器每秒产生10000000个GUID,则可以保证(概率意义 ...
vue条件语句v-if、v-else、v-else-if用法
vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...
Linux(5.5版为主)的基本操作命令
mount 查看挂载目录 cat ~ 查看文件下的内容 touch ~ 创建一个文件一次性性创建几个文件: touch /tmp/{1,2,3,4}.txt ...
MySql 中的<=>操作符
今天在学习数据库的索引优化时,关于memory存储引擎的的hash索引时,看到了操作符<=> ,这个操作符还是第一次见到,于是上网查了一下.我想大家应该知道 = != <> ...
onclick 事件
onclick 事件 Event 对象定义和用法 onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后 ...

JS碰撞检测

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

随机推荐

热门专题