js随手笔记-------理解JavaScript碰撞检测算法核心简单实现原理
碰撞检测在前端游戏,设计拖拽的实用业务等领域的应用场景非常广泛,今天我们就在这里对于前端JavaScript如何实现碰撞检测算法进行一个原理上的探讨,让大家能够明白如何实现碰撞以及碰撞的理念是什么:
1.矩形与矩形间的碰撞
核心理念
判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。大体实现方式就是以一个矩形的某个定点作为运动物,计算自己的坐上顶点与另一元素的左上定点的位置和宽高数据进行判断检测
通用算法判断
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('碰撞成功')
}
如下:图中的 x 既是 offsetLeft , y 既是 offsetTop;矩形的宽和高既是 offsetWidth 、offsetHeight
2.圆形与圆形的碰撞
核心理念
通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞。
通用算法
|AB|=Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
概念模型
3.圆形与矩形之间的碰撞
核心理念
通过找出矩形上离圆心最近的点,然后通过判断该点与圆心的距离是否小于圆的半径,若小于则为碰撞。改点的位置可以通过获取矩形左上角的坐标位置和元素的宽高来进行数据计算。
通用算法
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance<r1){
console.log('碰撞成功')
}else{
console.log('没碰到')
}
概念模型
4.圆形与旋转矩形之间的碰撞
核心理念
即使矩形以其中心为旋转轴进行了旋转,但是判断它与圆形是否发生碰撞的本质还是找出矩形上离圆心的最近点。但是矩形的边缘坐标需要进行一个数据转换,通过这个旋转的角度值计算转换后的位置
通用算法(同上)
var distance=Math.sqrt(Math.pow(closestPoint.x-x1,2)+Math.pow(closestPoint.y-y1,2));
if(distance<r1){
console.log('碰撞成功')
}else{
console.log('没碰到')
}
概念模型
5.矩形与障碍物之间的碰撞(地图碰撞算法)
核心理念
将整个地图进行数据化,划分为一个矩形的地图,地图的每个基本单位是一个矩形区域。地图中所有可能参与碰撞的物体都要是基本单位大小的整数倍,地图中参与检测的对象都存储着自身所在格子的坐标,两个物体在同一格才为碰撞。
通用算法
//标记为0的可以通过,1的不可以通过既是障碍物
var map=[
[1,1,1,1,1,1,1,1,0],
[1,0,1,0,1,0,0,0,1],
[1,0,0,0,1,0,1,1,0],
[1,1,0,0,0,0,0,1,0],
[1,1,1,1,1,1,1,1,1],
]
//设置角色的初始位置
player={left:2,top:2}
//下面就要用到A*寻路算法进行判断检测碰撞了
......
概念模型
js随手笔记-------理解JavaScript碰撞检测算法核心简单实现原理的更多相关文章
- js架构设计模式——理解javascript中的MVVM开发模式
理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...
- 深入理解javascript作用域系列第一篇——内部原理
× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域 ...
- Node.js随手笔记
参考文章:https://blog.csdn.net/IronKee/article/details/83780857 安装nvm的方法: 如果已经单独安装了node,建议卸载,然后继续向下看. 直接 ...
- Node.js学习笔记(1)--一个最简单的服务器请求
说明(2017-5-2 10:27:03): 1. 需要安装node,http://nodejs.cn/download/ 2. 安装完后,在cmd里输入node -v可以查看版本. 3. 代码foo ...
- JS 学习笔记(二)Ajax的简单使用
使用Ajax访问本地TXT文件 ajax.js // 创建请求对象 var ajax = new XMLHttpRequest(); // 建立连接 ajax.open('get', 'test.tx ...
- JS SDK 随手笔记
JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...
- [JS]深入理解JavaScript系列(4):立即调用的函数表达式
转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- <深入理解JavaScript>学习笔记(1)_编写高质量JavaScript代码的基本要点
注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. JQuery是一个很强大的JavaScript 类库,在我刚刚接触JavaScript的就开始用了. JQuer ...
随机推荐
- Chapter06 数组(Array)
目录 Chapter06 数组 6.1 数组的认识 6.2 数组的使用 使用方式1 - 动态初始化 使用方式2 - 动态初始化 使用方法3 - 静态初始化 6.3 数组使用的注意事项和细节 6.4 数 ...
- 矩池云安装gdal五种解决方案
1.最快最靠谱的是conda conda install gdal 命令行conda/pip search gdal查看版本,选择合适的版本,例如:conda search gdal 命令行conda ...
- php 23种设计模式 - 备忘录模式
备忘录模式 备忘录模式(Memento Pattern)保存一个对象的某个状态,以便在适当的时候恢复对象.备忘录模式属于行为型模式. 介绍 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该 ...
- java入土---markdown使用技巧
markdown使用技巧 标题 "#" 为一级标题 "##" 为2级标题 可一直往下曾增加,最多六级标题 字体 加粗 **加粗** 加粗 倾斜 *倾斜* 倾斜 ...
- MacBook苹果电脑绕过BootCamp安装Win7双系统
上周老婆的一个朋友的笔记本电脑说电脑太慢说帮忙清理一下电脑,我一看是MACBOOKPRO 的笔记装的双系统,之前一直接触的都是WINDOWS居多.想着干脆装个WIN10吧,谁知道一下就跳坑里了,一分区 ...
- QQ聊天记录快速迁移
QQ聊天记录快速迁移 在工作中大家经常会用到QQ来沟通,但是很多时候在其它设备上登录QQ就无法查看到之前的聊天记录和图片,这是因为电脑上的QQ聊天记录一般都是保存在电脑本地硬盘里,所以我们在换设备登录 ...
- BM 学习笔记
两个 BM 哟 1.Bostan-Mori 常系数其次线性递推. 实际上这个算法是用来计算 \([x^n]\frac {F(x)}{G(x)}\) 的... 我们考虑一个神奇的多项式:\(F(x)F( ...
- Gin 09 HTTP 重定向
gin http 重定向有两种方法,重写url 和 不重写的跳转.两种方法,gin 通过两个内置方法实现: demo package main import ( "github.com/gi ...
- [WPF] 如何实现文字描边
1. 前言 WPF 的 TextBlock 提供了大部分常用的文字修饰方法,在日常使用中基本够用.如果需要更丰富的表现方式,WPF 也提供了其它用起来复杂一些的工具去实现这些需求.例如这篇文章介绍的文 ...
- TCP | 你真的懂 HTTP 吗?
前言 Hello 大家好,我是 Sam Zhang. HTTP 相信是每个 Web 开发者都耳熟能详的名词了.但是,新手开发者想要完全理解 HTTP 协议却需要时间.这期视频,我就来带大家入门 HTT ...