干货：碰撞检测

看代码就好，就不多解释了。。。。。

说明：（写两个小球，背景色分别为黑色和红色，都相对于其父级绝对定位），以下是js部分的代码。

var red = document.getElementsByClassName('red')[0];

var black = document.getElementsByClassName('black')[0];

var box = document.getElementsByClassName('box')[0];

var rSpeed = 5;

var bSpeed = 1;

var isF = true;

var timer = setInterval(function(){

if (red.offsetLeft < 0 || red.offsetLeft + red.offsetWidth > box.offsetWidth) {

rSpeed *= -1;

}

if (black.offsetTop < 0 || black.offsetTop + black.offsetHeight > box.offsetHeight) {

bSpeed *= -1;

}

red.style.left = red.offsetLeft + rSpeed + "px";

black.style.top = black.offsetTop + bSpeed + "px";

// 碰到之后停止

// 黑左<红右 && 黑右>红左 && 黑上<红下 && 黑下>红上

if (black.offsetLeft < red.offsetLeft + red.offsetWidth && black.offsetLeft + black.offsetWidth > red.offsetLeft && black.offsetTop < red.offsetTop + red.offsetHeight && black.offsetTop + black.offsetHeight > red.offsetTop) {

console.log("碰到了");

// clearInterval(timer);

rSpeed *= -1;

bSpeed *= -1;

if (isF) {

isF = false;

red.style.backgroundColor = "rgb("+getColorR()+","+getColorR()+","+getColorR()+")";

black.style.backgroundColor = "rgb("+getColorR()+","+getColorR()+","+getColorR()+")";

}

} else{

isF = true;

}

}, 20);

function getColorR(){

return parseInt(Math.random()* 256);

}