js中碰撞检测算法核心

一、矩形与矩形间的碰撞

  1. 核心理念
    判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物,计算自己的坐上顶点与另一元素的左上定点的位置和宽高数据进行判断检测
  2. 图示理解
    在这里插入图片描述

说明:图中的 x 是 offsetLeft , y 是 offsetTop,矩形的宽和高分别是 offsetWidth 、offsetHeight
3. 算法判断

if(react1.offsetLeft<react2.offsetLeft+react2.offsetWidth&&
   react1.offsetLeft+react1.offsetWidth>react2.offsetLeft&&
   react1.offsetTop<react2.offsetTop+react2.offsetHeight&&
   react1.offsetHeight+react1.offsetTop>react2.offsetTop
){
   
   
 console.log('碰撞成功')
}

二、圆形与圆形的碰撞

  1. 核心理念
    通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞
  2. 图示理解
    在这里插入图片描述
  3. 算法判断
|AB|=Math.sqrt
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值