JavaScript碰撞检测原理及其实现

最新推荐文章于 2023-06-02 15:43:58 发布
最新推荐文章于 2023-06-02 15:43:58 发布
阅读量1.6k 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperluminalSnails/article/details/51534828
版权

1.模拟碰撞

简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)

2.碰撞检测原理

这里写图片描述
如图所示:
使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.

这里写图片描述
也就是说,只要满足条件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不会发送碰撞

3.具体测试代码

<html>
<head>
    <title></title>
    <style type="text/css">
    body{
    margin: 0;padding: 0;}
    #div2{
    height: 100px;width: 200px;background-color: orange
最低0.47元/天 解锁文章
SuperluminalSnails
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue扭蛋机抽奖游戏
至_臻的博客
12-14 1272
这个游戏的实现方式是通过CSS3的动画效果和JavaScript的定时器来控制小球的滚动和抽奖的过程。使用CSS3可以轻松地实现小球的滚动效果，而JavaScript则可以控制抽奖的流程和时间。该游戏的主要功能是通过点击按钮进行抽奖，抽奖过程中会显示滚动的小球，最终随机停止并显示一个中奖小球。html结构可根据自己需求重新开发，一下代码只是演示，抽奖思路,ball-box下面每个图片是根据index动态添加类名，在css中方便单独设置每个小球位置。最终效果就是上面视频的demo。
JavaScript实现碰撞检测（分离轴定理）
findhappy117的博客
02-13 2737
分离轴定理是一项用于检测碰撞的算法。其适用范围较广，涵盖检测圆与多边形，多边形与多边形的碰撞；缺点在于无法检测凹多边形的碰撞。本demo使用Js进行算法实现，HTML5 canvas进行渲染。
扭蛋机抽奖 过年抽奖 js设置css伪标签内容
02-12
该资源经过改写后做成左右两边扭蛋机，可以自己编写奖项和参与者，本资源仅供学习之用，有问题可以相互探讨和留言
扭蛋机小球动画效果
fury的博客
06-02 620
点击扭一扭后触发draw方法小球跳动。
36、JavaScript中两个DIV的碰撞检测
Learning
06-20 4339
1、碰撞检测的原理 2、碰撞检测的代码 #div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;} #div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:2
JavaScript碰撞检测原理及其实现代码
10-15
在本文中，我们将深入探讨JavaScript碰撞检测的原理以及如何实现。首先，让我们理解碰撞检测的基本概念。 1. 模拟碰撞 在JavaScript中，我们可以创建可拖动的HTML元素（如div）来模拟碰撞。在这个例子中，有两个div...
JavaScript 俄罗斯方块游戏实现方法与代码解释
10-15
JavaScript 俄罗斯方块游戏是一种利用JavaScript编程语言实现的经典游戏，其基本原理是通过控制不同形状的方块在游戏界面上的移动、旋转和消除，挑战玩家的空间想象和反应能力。以下将详细介绍游戏的实现步骤、关键...
JavaScript， Jquery 实现网页版的贪吃蛇
02-22
在网页游戏开发中，经典的“贪吃蛇”游戏是一个很好的学习项目，它可以帮助我们深入理解JavaScript和jQuery的基本原理及其在动态网页中的应用。这个项目涉及到的主要知识点包括DOM操作、事件处理、计时器、数组处理...
JavaScript实现打砖块游戏
10-15
游戏的主要逻辑包括小球的运动、碰撞检测、砖块消除和得分计算，这些通常会在一个定时器函数中实现，每次更新小球的位置，检查是否与拍子或砖块发生碰撞，如果发生碰撞，则根据碰撞规则改变小球的速度方向。...
碰撞算法
02-13
p5.play是一个基于JavaScript的库，它扩展了流行的p5.js库，为开发者提供了更丰富的功能，包括易于使用的碰撞检测算法。本文将深入探讨p5.play中的碰撞算法及其应用。 首先，我们需要理解碰撞算法的基本原理。碰撞...
JS‘碰撞’事件
herogus的博客
03-27 1219
/** * 碰撞事件 */ function divCrash() { $("#mi-tanchaung").empty() var top = document.getElementById("mi-util").getBoundingClientRect().top //主要，获取离顶部的高度 // var height=document.getElementById
JS剖析正方形物体碰撞原理
qczxl的专栏
12-02 3694
最近在做一个拖拽图片排序的项目，其中就有个检测两个对象之间是否发生碰撞，网上有好多写好的代码，但讲原理的没有找到几个，下面就剖析一下是如何实现碰撞的！ 一、4个结论 ①拖拽层在目标层上部活动时不会碰撞 ②拖拽层在目标层左边活动时不会碰撞 ③拖拽层在目标层右边活动时不会碰撞 ④拖拽层在目标层下边活动时不会碰撞 二、先来理解层的4个边界 三、结论①拖拽层在目标层上部活动时不会碰撞
JavaScript中碰撞检测的理解及说明
weixin_58280614的博客
06-14 823
碰撞检测可用一张图来理解，如下图 中间盒子看作参照物 四条边分别为 l1 t1 r1 b1。 碰撞检测就是当某一个盒子四条边的任意一边与其他盒子的距离
js随手笔记-------理解JavaScript碰撞检测算法核心简单实现原理
tengfeiyue的博客
07-28 517
碰撞检测在前端游戏，设计拖拽的实用业务等领域的应用场景非常广泛，今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨，让大家能够明白如何实现碰撞以及碰撞的理念是什么： 1.矩形与矩形间的碰撞 核心理念 判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物，计算自己的坐上顶点与另一元素的左上定点的位置和...
简析 js 碰撞检测原理与算法实现
twinkle的博客
02-18 2491
碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。 那么啥叫碰撞？JavaScript 又是如何检测 DOM 发生碰撞的呢？ 碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。 碰撞检测的常见需求...
js之碰撞检测
个人笔记
03-29 2292
<!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实现碰撞检测
失心疯的博客
09-19 5013
碰撞检测 目录 代码实例 代码解析 下载源码链接 代码实例 &amp;lt;div id=&quot;box&quot; style=&quot;background: #334;width: 100px;height: 100px;position: absolute;cursor: move;z-index: 999;&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;
碰撞测试代码c语言,JavaScript碰撞检测原理及其实现代码
最新发布
06-12
碰撞测试是指用程序模拟物体之间的碰撞关系，以检测它们是否发生了碰撞。常用于游戏开发、物理引擎等领域。下面是C语言和JavaScript的实现代码及原理说明。 C语言碰撞测试代码： ```c #include <stdio.h> struct Point { float x, y; }; struct Circle { struct Point center; float radius; }; int isCollide(struct Circle c1, struct Circle c2) { float dx = c1.center.x - c2.center.x; float dy = c1.center.y - c2.center.y; float distance = sqrt(dx * dx + dy * dy); return distance < c1.radius + c2.radius; } int main() { struct Circle c1 = {{0, 0}, 1}; struct Circle c2 = {{3, 4}, 2}; if (isCollide(c1, c2)) { printf("Collide!\n"); } else { printf("Not collide!\n"); } return 0; } ``` JavaScript碰撞检测原理及其实现代码： ```javascript function Circle(x, y, r) { this.x = x; this.y = y; this.r = r; } function isCollide(c1, c2) { var dx = c1.x - c2.x; var dy = c1.y - c2.y; var distance = Math.sqrt(dx * dx + dy * dy); return distance < c1.r + c2.r; } var c1 = new Circle(0, 0, 1); var c2 = new Circle(3, 4, 2); if (isCollide(c1, c2)) { console.log("Collide!"); } else { console.log("Not collide!"); } ``` 原理说明： 碰撞检测的原理是判断两个物体之间的距离是否小于它们的半径之和，如果小于，则认为它们发生了碰撞。这里采用了欧几里得距离公式计算两点之间的距离。 在C语言代码中，定义了一个Point结构体表示点，一个Circle结构体表示圆，isCollide函数接收两个Circle结构体作为参数，通过计算两个圆心之间的距离，判断是否碰撞。 在JavaScript代码中，定义了一个Circle类表示圆，isCollide函数接收两个Circle对象作为参数，同样通过计算两个圆心之间的距离，判断是否碰撞。 以上两种实现方式都是基于圆形的碰撞检测，对于其他形状的碰撞检测，可采用更加复杂的算法，如分离轴定理、SAT算法等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值