【碰撞检测】一个图学会碰撞检测

一个图学会碰撞检测

在写一下小游戏时，会遇到一些碰撞检测，那么怎么才能判断出两个元素发生碰撞了呢，下面我们用一个
图片来看一下这个问题

• 观察这个图片，我们定义了两个元素a和b,并且标注了a和b的四个边，此时为碰撞的时刻，因为a是包含在b中的，那肯定是碰撞的。那如果不想要碰撞，肯定是两个元素完全不接触，才不会发生碰撞。

• 我们通过一个方向的例子简单看一下：
  —r2<l1:当b的右边界<a的左边界时，□ ■（左a右b），就是类似于这种情况，那么两者一定不会发生碰撞，同理另外的四个方向也能的到相同的推断
  

• 综上，编写代码如下：

function isCrash(a,b){
	//a
	var l1 = a.offsetLeft;
	var t1 = a.offsetTop;
	var r1 = l1 + a.offsetWidth;
	var b1 = t1 + a.offsetHeight;

	//b
	var l2 = b.offsetLeft;
	var t2 = b.offsetTop;
	var r2 = l2 + b.offsetWidth;
	var b2 = t2 + b.offsetHeight;

	//判断
	if(r2 < l1 || b2 < t1 || r1 < l2 || b1 < t2){
		// 不碰撞
		return false;
	}
	else{
		return true;
	}
}

• 以上就是碰撞检测的所有解读，我们不需要背以上冗杂的代码，只需要记住那个图片，以及不发生碰撞的条件就可以。