javascript与三角函数之四：碰撞检测

zhangxiangliang 发布于2019-08-20 18:52 / 2375人阅读

摘要：求边长度的方法，在之前的文章中已多次介绍，在此不再赘述。第二碰撞上之后，速度如何分解我们要求的小球的碰撞速度，其他就是求单位时间内和值的变化情况，也就是速度必须分解为水平方向和垂直方向，清楚这个之后，我们来看一下如何分解速度。

我们先看下实现的效果

注：本文的作用是抛砖引玉，并未实现原理一样的绿球的碰撞，也未考虑质量和能量损耗对碰撞的影响

需要先解决两个问题

第一：怎么判断是否已经碰上了？

我们先来看一下刚好碰撞的分析图：

其实也很简单，只要比较c边的长度和两个球的半径和就可以，如果c边的长度<=两球半径和，则已经碰撞上。求c边长度的方法，在之前的文章中已多次介绍，在此不再赘述。

第二：碰撞上之后，速度如何分解？

我们要求的小球的碰撞速度，其他就是求单位时间内left和top值的变化情况，也就是速度必须分解为水平方向和垂直方向，清楚这个之后，我们来看一下如何分解速度。

如图所示，speedX为蓝色小球的运动速度，α为两球的碰撞角度，那么根据平行四边形法则，我们可以把speedX分解为速度s1和速度s2，两球的碰撞方向只有s1一个方向，所以我们要对s1进行取反操作，也就是蓝色小球实际的运动速度方向为黄色线条（注：此处为了简化操作，没有考虑碰撞期间能量的损耗以及质量对速度的影响）

再次分解

分解出来的s1和s2依然不在一个方向，依然没有办法进行速度的叠加，所以我们还需要对s1和s2进行再分解，如图所示，把s1分解了水平方向的s11和垂直方向的s12，s2也进行同理的分解为s21和s22，这样s11和s21可以在水平方向叠加，s12和s22可以在垂直方向叠加。

主要代码实现

// 对speedX分解得到的两个速度
var s1 = Math.cos(deg) * speedX
var s2 = Math.sin(deg) * speedX

// 对s1进行水平和垂直分解
var s11 = Math.cos(deg) * s1
var s12 = Math.sin(deg) * s1

// 对s2进行水平和垂直分解
var s21 = Math.sin(deg) * s2
var s22 = Math.cos(deg) * s2
// 最终的叠加的水平速度和垂直速度
speedX = (s11 - s21) * -1
speedY = s12 + s22

要查看最终效果以及具体实现，请用力点我

GPU云服务器云服务器 Android碰撞检测 java碰撞检测小球 css检测函数 php检测函数是否

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84803.html

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

摘要：通用算法概念模型圆形与矩形之间的碰撞核心理念通过找出矩形上离圆心最近的点，然后通过判断该点与圆心的距离是否小于圆的半径，若小于则为碰撞。碰撞检测在前端游戏，设计拖拽的实用业务等领域的应用场景非常广泛，今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨，让大家能够明白如何实现碰撞以及碰撞的理念是什么：1.矩形与矩形间的碰撞核心理念判断任意两个（无旋转）...

hikui 2019-08-23 10:27 评论0 收藏0
简析 js 碰撞检测原理与算法实现

摘要：碰撞检测边界检测在前端游戏，以及涉及拖拽交互的场景应用十分广泛。这就涉及到碰撞检测或者叫边界检测的问题了。若四边均未发生重合，则未发生碰撞，反之则发生碰撞。目前业务有遇到碰撞需求，所以抽时间整理了下。碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。那么啥叫碰撞？JavaScript 又是如何检测 DOM 发生碰撞的呢？碰撞，顾名思义，就是两个物体碰撞在了一起，...

Miyang 2019-08-30 15:55 评论0 收藏0
简析 js 碰撞检测原理与算法实现

摘要：碰撞检测边界检测在前端游戏，以及涉及拖拽交互的场景应用十分广泛。这就涉及到碰撞检测或者叫边界检测的问题了。若四边均未发生重合，则未发生碰撞，反之则发生碰撞。目前业务有遇到碰撞需求，所以抽时间整理了下。碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。那么啥叫碰撞？JavaScript 又是如何检测 DOM 发生碰撞的呢？碰撞，顾名思义，就是两个物体碰撞在了一起，...

Markxu 2019-08-23 14:12 评论0 收藏0