JS剖析正方形物体碰撞原理

最新推荐文章于 2024-07-09 11:56:29 发布
最新推荐文章于 2024-07-09 11:56:29 发布
阅读量3.7k 收藏 2
点赞数
分类专栏： JS 文章标签： 碰撞原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qczxl/article/details/50144763
版权
本文详细解析了如何利用JavaScript实现两个拖拽层的碰撞检测。通过四个关键结论，阐述了当拖拽层分别在目标层上部、左边、右边、下边活动时不会发生碰撞的原理，并给出了具体的边界判断条件。文章最后提供了基于这些原理的碰撞检测代码实现。
摘要由CSDN通过智能技术生成

最近在做一个拖拽图片排序的项目，其中就有个检测两个对象之间是否发生碰撞，网上有好多写好的代码，但讲原理的没有找到几个，下面就剖析一下是如何实现碰撞的！

一、4个结论
①拖拽层在目标层上部活动时不会碰撞
②拖拽层在目标层左边活动时不会碰撞
③拖拽层在目标层右边活动时不会碰撞
④拖拽层在目标层下边活动时不会碰撞

二、先来理解层的4个边界

三、结论①拖拽层在目标层上部活动时不会碰撞

假设div1是拖拽层，div2是目标层。
注：div1的下边界始终在div2上边界上面活动，则不会发生碰撞。

四、结论②拖拽层在目标层左边活动时不会碰撞

最低0.47元/天 解锁文章
坚强di理由
关注
专栏目录
js笔记：物体碰撞
qq_43594321的博客
05-16 521
js笔记：物体碰撞 实现：两个宽度为100px的方块，拖动方块一与方块二发生碰撞时，方块二变色 布局： <div id="div1">11</div> <div id="div2">22</div> div{ width: 100px; height:100px; } #div1{ background-color: blueviolet;
JavaScript碰撞检测原理及其实现
SuperluminalSnails的专栏
05-29 1720
1.模拟碰撞 简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)2.碰撞检测原理 如图所示: 使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ). 对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞. 也就是说,只要满足条件:oDiv2.div2R小于oDiv1.d
JS实现物体碰撞缓动效果
01-16
JS实现物体碰撞缓动效果 JS实现物体碰撞缓动效果 JS实现物体碰撞缓动效果
js之碰撞检测
个人笔记
03-29 2316
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; /*通过css方式 关闭标签的用户选中效果!!!*/ /*-webkit-user-select: none; -moz-use
JS碰撞检测
weixin_39200549的博客
10-22 541
&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #all{ width: 500px; height: 500px; border: 2px solid sandybrown; position: rela
js碰撞检测（原生）
wangshang1320的博客
11-11 317
将数据初始化成rect矩形类型 let rect = new Rect({ x:startX, y:startY },rectSize); let rect1 = new Rect({ x:startX, y:startY ...
js碰撞检测
最新发布
喵喵的博客
07-09 465
碰撞检测 碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。 碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。 两个矩形块的碰撞： 判断任意两个（水平）矩形的任意一边是否有间距，从而得之两个矩形块有没有发生碰撞。具体实现方式，可以选定一个矩形为参照物，计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合，则
前端js实现物体碰撞
qq_42628504的博客
06-21 621
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端物体碰撞方法</title> </head> <style> div { position: absolute; to
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
10-17
主要介绍了JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法,结合实例形式详细分析了游戏算法中针对碰撞检测的包盒矩形情况下的相关算法原理与操作注意事项,需要的朋友可以参考下
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
12-09
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 像素检测算法。分享给大家供大家参考，具体如下： 使用像素碰撞检测法算是最精确的算法了，当然，带来的代价也是比较明显的，那就是效率上的低下。除非是在极为特殊的情况下，要求使用非常精确的碰撞，否则，一般情况下在游戏中是不建议使用这种算法，特别是在运行效率不太高的HTML5游戏中。 一般来说在使用像素碰撞检测之前会使用AABB矩形包围盒先检测两个精灵是否有碰撞，如果AABB包围盒检测没有碰撞，那一定是没有碰撞到，反之，则不一定，需要进一步进行像素检测。如下图所示，很明显，虽然两个精灵的包围盒发生了碰撞，但两个精灵本身没有发生碰撞，所以在这种精灵的
JavaScript碰撞检测原理及其实现代码
10-15
主要为大家详细介绍了JavaScript碰撞检测原理及其实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js div碰撞js
梦想家博客
03-30 367
var Drag=(function (){ return { start:function (elem,range) { elem.addEventListener("mousedown",mouseHandler); // elem.obj=this; var offsetPoint={}...
（一）原生JS实现判断碰撞的方法！
李帅醒的博客
11-20 8854
这次为大家实例讲述了JS实现判断碰撞的方法。碰撞的应用场景非常多比如，放烟花、小球碰壁反弹、像素鸟等，所以我们先要弄清除如何进行碰撞判断，才能进行以后的操作。 HTML页面代码： CSS页面代码： *{ padding: 0px; margin: 0px; } #d1{ width: 100px; height: 100px; backgr
JS中碰撞检测的方法
weixin_43765641的博客
09-14 222
JS中碰撞检测的方法
js的碰撞检测
cmomo99d的博客
03-11 1517
最近写了个打砖块的小游戏
湖南大学2011级会计学苏晓玲：MATLAB物体碰撞模型实训与应用
本文是一篇关于"MATLAB物体碰撞运动建模"的工程实训...这篇论文通过具体的MATLAB物体碰撞模型建立案例，深入剖析了MATLAB在工程训练中的作用，旨在提高学生的工程实践能力，使之能熟练运用MATLAB这一工具解决实际问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值