JS 检测碰撞的方法有哪些?

2017-05-20 10:28:08 +08:00
 Corbusier

我写的是非常非常基础的根据其中一个 obj 页面元素的上下左右,与另一个 obj 页面元素的上下左右比较之后判断是否碰撞,具体代码如下。觉得这么写不是特别的高效,判断太多了,有没有好一点的方式?

	function getRect(obj){
		return obj.getBoundingClientRect();
	}
	function crash(obj1,obj2){
		var first_Rect = getRect(obj1);
		var second_rect = getRect(obj2);

		var firstLeft = getRect(obj1).left;
		var firstTop = getRect(obj1).top;
		var firstRight = getRect(obj1).right;
		var firstBottom = getRect(obj1).bottom;

		var secondLeft = getRect(obj2).left;
		var secondTop = getRect(obj2).top;
		var secondRight = getRect(obj2).right;
		var secondBottom = getRect(obj2).bottom;
		if(firstLeft > secondRight||firstRight < secondLeft||firstTop > secondBottom||firstBottom < secondTop){
			return false;
		}else{
			return true;
		}
	}
2629 次点击
所在节点    前端开发
2 条回复
Biwood
2017-05-20 10:44:21 +08:00
简单的碰撞检测就是这么写的,没有什么更好的办法,你可以在此基础上进行优化,比如用变量缓存坐标数据,减少 getBoundingClientRect 的执行次数
Corbusier
2017-05-20 10:50:50 +08:00
@Biwood 好的,感谢!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/362597

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX