JavaScript实现碰撞检测（分离轴定理）

最新推荐文章于 2024-07-09 11:56:29 发布
最新推荐文章于 2024-07-09 11:56:29 发布
阅读量2.7k 收藏 6
点赞数 1
文章标签： Js碰撞检测 分离轴定理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/findhappy117/article/details/79319807
版权
本文介绍了如何使用JavaScript实现分离轴定理(SAT)进行碰撞检测，包括算法原理、代码解析、文件及演示截图，并探讨了处理圆的特殊情况。提供了详细的步骤和示例代码，适用于游戏开发或图形交互场景。
摘要由CSDN通过智能技术生成

概述

分离轴定理是一项用于检测碰撞的算法。其适用范围较广，涵盖检测圆与多边形，多边形与多边形的碰撞；缺点在于无法检测凹多边形的碰撞。本demo使用Js进行算法实现，HTML5 canvas进行渲染。

详细

代码下载：http://www.demodashi.com/demo/10423.html
一、准备工作，熟悉分离轴定理 算法原理


（翻译至http://www.sevenson.com.au/actionscript/sat/）


从根本上来讲，分离轴定理（以及其他碰撞算法）的用途就是去检测并判断两个图形之间是否有间隙。分离轴定理中用到的方法使算法本身显得十分独特。

我所听到过分离轴定理的最好类比方式是这样的：

假想你拿一个电筒从不同的角度照射到两个图形上，那么会有怎样的一系列的阴影投射到它们之后的墙壁上呢？

sat_2.jpg

如果你用这个方式从每一个角度上对这两个图形进行处理，并都找不到任何的间隙，那么这两个图形就一定接触。如果你找到了一个间隙，那么这两个图形就显而易见地没有接触。

从编程的角度来讲，从每个可能的角度上去检测会使处理变得十分密集。不过幸运的是，由于多边形的性质，你只需要检测其中几个关键的角度。

你需要检测的角度数量就正是这个多边形的边数。也就是说，你所需检测的角度最大数量就是你要检测碰撞的两个多边形边数之和。举个例子，两个五边形就需要

最低0.47元/天 解锁文章
findhappy117
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript碰撞检测原理及其实现
SuperluminalSnails的专栏
05-29 1700
1.模拟碰撞 简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)2.碰撞检测原理 如图所示: 使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ). 对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞. 也就是说,只要满足条件:oDiv2.div2R小于oDiv1.d
SAT_JS:演示如何使用javascript实现分离轴定理（SAT）的小演示
05-26
SAT_JS 一个小型演示，演示如何使用javascript实现分离轴定理（SAT）。 这绝不是优化的代码。 取而代之的是，它只是用作指导它们如何工作的指南，可以按原样使用，但是如果性能是一个问题，则可以解决许多问题。 该代码大致基于我的的原始动作脚本版本，该版本可在我的其他存储库中找到。 有关其工作原理的完整说明（以及此演示的示例），请查看我博客上的文章：。 项目概要 这个项目包含许多应该很简单的部分。 index.html文件是一个基本的html模板，带有指向所需js和css文件的链接。 它包含一个单行调用以创建SATDemo类，然后将所需的hmtl注入目标DIV。 sat.js文件包含用于定义SAT几何形状和进行所需计算的所有类。 这就是所有核心逻辑所在的地方。 satdemo.js文件包含创建和操作交互式演示的所有逻辑。 它旨在使用画布和一些ui控件自动填充目标DIV元
javascript实现多边形碰撞检测
01-18
javascript多边形碰撞检测 原理就是 循环每个顶点判断是不是在多边形内 const app = new PIXI.Application({ antialias: true }); document.body.appendChild(app.view); const graphics = new PIXI.Graphics(); // draw polygon const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520]; graphics.lineStyle(0); graphics.beginFill(0x3500
js碰撞检测
最新发布
喵喵的博客
07-09 340
碰撞检测 碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。 碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。 两个矩形块的碰撞： 判断任意两个（水平）矩形的任意一边是否有间距，从而得之两个矩形块有没有发生碰撞。具体实现方式，可以选定一个矩形为参照物，计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合，则
简析 js 碰撞检测原理与算法实现
weixin_33781606的博客
12-20 1244
碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。 那么啥叫碰撞？JavaScript 又是如何检测 DOM 发生碰撞的呢？ 碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者...
js中碰撞检测算法核心
浮生离梦的博客
06-03 4043
一、矩形与矩形间的碰撞 核心理念 判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物，计算自己的坐上顶点与另一元素的左上定点的位置和宽高数据进行判断检测 图示理解 说明：图中的 x 是 offsetLeft , y 是 offsetTop，矩形的宽和高分别是 offsetWidth 、offsetHeight 3. 算法判断 if...
基于javascript实现碰撞检测
10-15
总结来说，这个JavaScript碰撞检测的例子提供了一个基础的实现方式，对于初学者来说，它能帮助理解如何在网页中实现动态元素的碰撞检测。然而，实际应用中可能需要考虑更多复杂情况，如旋转、缩放、速度和加速度等...
sat:处理分离轴定理的项目
06-18
总的来说，"sat:处理分离轴定理的项目"是一个涵盖JavaScript编程、几何学和碰撞检测的综合实践，它不仅提供了一个理论与实践相结合的学习机会，也是提升技能和解决问题能力的好平台。在实际的项目中，你将面临如何...
TriangleBox.js:通过分离轴定理 (SAT) 实现三角形和 AABB 之间的碰撞
07-13
通过分离轴定理 (SAT) 实现三角形和 AABB 之间的碰撞。 该函数不仅提供了一个布尔测试（AABB 是否与三角形重叠？），而且还提供了一个最小平移向量，该向量通过将框移动到具有最小可能位移的非重叠位置来解决碰撞...
JS实现碰撞检测的方法分析
10-18
总结起来，JavaScript碰撞检测是通过计算和比较元素的边界坐标来实现的。通过实例代码，我们可以看到如何在实际项目中应用这一技术。理解并掌握这种基本的碰撞检测方法，对于创建交互式网页和游戏至关重要，同时也为...
[教程] 任意形状的碰撞检测 原理(附图)
03-23
NULL 博文链接：https://as3.iteye.com/blog/1035619
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
10-17
主要介绍了JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法,结合实例形式详细分析了游戏算法中针对碰撞检测的包盒矩形情况下的相关算法原理与操作注意事项,需要的朋友可以参考下
JS实现碰撞检测效果
10-15
在实际应用中，可能需要使用更复杂的算法，如轴对齐边界框（AABB）、分离轴定理（SAT）或其他适合复杂形状的碰撞检测方法。 总之，这个例子展示了如何用 JavaScript 基础知识实现一个简单的碰撞检测效果。然而，要...
js的碰撞检测
cmomo99d的博客
03-11 1503
最近写了个打砖块的小游戏
javascript canvas 碰撞检测
power0405hf的专栏
09-07 3032
1.外接图形判别法1.外接矩形判别法//先算出小球底部的位置，然后根据它现在的移动速度与当前动画的帧速率，估算出小球在下一帧动画中的位置 ballWillHitLedge:function(ledge){ var ballRight = ball.left + ball.width, ledgeRight = ledge.left + ledge.width,
javaScript：碰撞检测
qq_52799985的博客
10-10 932
碰撞检测在计算机图形、模拟、交互设计以及各种应用中都具有广泛的应用，它可以确保物体之间的正确交互，提供更真实和高效的体验，并有助于避免潜在的问题和冲突。
【H5/JS】游戏常用算法-碰撞检测-包围盒检测算法(3)-凹多边形（分离轴检测算法）
krapnik的博客
06-10 1235
内容撰写中。。。原理参考：点击打开链接<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
碰撞测试代码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、付费专栏及课程。

余额充值