js实现div色块碰撞
在网页开发中，使用JS动态生成和修改页面元素已经变得非常普遍，其中碰撞检测是常见的需求之一。本文将介绍如何实现div色块的碰撞检测。
碰撞检测
首先，我们需要明确碰撞检测的概念。碰撞检测是指当两个物体相撞时进行的检测，其目的是为了避免两个物体重叠在一起，而造成视觉上的问题或者逻辑上的错误。在div色块的碰撞检测中，我们需要检测两个div色块之间是否发生了碰撞，如果发生了碰撞，则需要调整它们的位置，以避免重叠在一起。
CSS设置div样式
在开始实现碰撞检测之前，我们需要先设置两个div的样式，包括其宽度、高度、背景颜色、位置等信息。我们可以在CSS文件中定义两个div的样式，例如：
.block{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
.block:nth-child(2){
background-color: blue;
left: 120px;
top: 120px;
}
此处我们设置了两个div，分别代表红色和蓝色的色块。它们的样式是相同的，均为100px宽、100px高、颜色为红色或蓝色的块。通过设置不同的left和top，我们可以将它们放置在页面上的不同位置。
JS实现碰撞检测
接下来，我们需要在JS中实现碰撞检测。使用JS可以获取和修改页面元素的位置信息，从而判断两个div是否发生了碰撞。具体实现如下：
1. 使用querySelectorAll获取所有的.block元素，并将其转换为数组。
var blocks = Array.from(document.querySelectorAll(".block"));
2. 使用setInterval函数设置一个定时器，每隔一段时间执行检测碰撞的函数。
setInterval(collisionDetection, 10);
3. 碰撞检测函数collisionDetection()，用来检测两个div是否相交，如果相交则调整它们的位置。
function collisionDetection(){
? for(i = 0; i < blocks.length; i++){
? ? for(j = i + 1; j < blocks.length; j++){
? ? ? var a = blocks[i];
? ? ? var b = blocks[j];
? ? ? if(isOverlap(a, b)){
? ? ? ? adjustPosition(a, b);
? ? ? }
? ? }
? }
}
4. 编写isOverlap()函数，用来判断两个div是否相交。isOverlap()函数需要获取两个div的位置信息，比较它们的相对位置是否相交。
function isOverlap(a, b){
? var aRect = a.getBoundingClientRect();
? var bRect = b.getBoundingClientRect();
? return !(aRect.right < bRect.left ||
aRect.bottom < bRect.top ||
aRect.left > bRect.right ||
aRect.top > bRect.bottom);
}
此处我们使用了getBoundingClientRect()函数获取div的位置信息，比较它们的left、top、right、bottom四个值，判断是否相交。
5. 最后编写adjustPosition()函数，用来调整div的位置，以避免它们的重叠。
function adjustPosition(a, b){
? var aRect = a.getBoundingClientRect();
? var bRect = b.getBoundingClientRect();
? var dir = Math.random() < 0.5 ? -1 : 1;
? if(aRect.right > bRect.left && aRect.left < bRect.left){
? ? a.style.left = parseInt(a.style.left) - dir * (aRect.right - bRect.left) + "px";
? }
? else if(aRect.left < bRect.right && aRect.right > bRect.right){
? ? a.style.left = parseInt(a.style.left) + dir * (bRect.right - aRect.left) + "px";
? }
? if(aRect.bottom > bRect.top && aRect.top < bRect.top){
? ? a.style.top = parseInt(a.style.top) - dir * (aRect.bottom - bRect.top) + "px";
? }
? else if(aRect.top < bRect.bottom && aRect.bottom > bRect.bottom){
? ? a.style.top = parseInt(a.style.top) + dir * (bRect.bottom - aRect.top) + "px";
? }
}
此处我们使用了parseInt()函数，将div的left和top属性转换为整数，便于计算。根据两个div的位置信息，调整它们的位置，以避免发生重叠。
总结
在本文中，我们介绍了如何使用JS实现div色块的碰撞检测。通过使用定时器和getBoundingClientRect()函数，我们可以动态的检测碰撞并调整位置，避免div色块的重叠问题。希望本文对大家有所帮助。