Imagine we have a page that has anywhere from 1 to 100 floating blocks. Now what if I want the block(s) to disappear if it runs into another type of block or a boarder? How would we do that?
First lets get a list of all elements with X and Y class. We could swap one of these classes out for an ID if we wanted to.
const elements1 = document.querySelectorAll('.boxes')
const elements2 = document.querySelectorAll('.borders')The variable elements1 and 2 are both arrays of all the elements that have class .boxes and boarders.
Now lets create a function to detect a collision.
function detectCollision(class1, class2) {
for (let i = 0; i < class1.length; i++) {
const e1Rectangle = class1[i].getBoundingClientRect()
for (let i2 = 0; i2 < e2.length; i2++) {
const e2Rectangle = class2[i2].getBoundingClientRect()
if (
e1Rectangle.left < e2Rectangle.right &&
e1Rectangle.right > e2Rectangle.left &&
e1Rectangle.top < e2Rectangle.bottom &&
e1Rectangle.bottom > e2Rectangle.top
) {
destroyElement(class1[i])
destroyElement(class1[i2])
}
}
}
}This function takes two arrays as inputs, loops over each array object and compares to see if any are overlapping. If they are overlapping, run the destroyElement() function for those two specific elements.
Create the destroyElement function with
function destroyElement(element) {
elementId.parentNode.removeChild(elementId)
}Here is our full code
const elements1 = document.querySelectorAll('.boxes')
const elements2 = document.querySelectorAll('.borders')
function detectCollision (class1, class2) {
for (let i = 0; i < class1.length; i++) {
const e1Rectangle = class1[i].getBoundingClientRect()
for (let i2 = 0; i2 < e2.length; i2++) {
const e2Rectangle = class2[i2].getBoundingClientRect()
if (
e1Rectangle.left < e2Rectangle.right &&
e1Rectangle.right > e2Rectangle.left &&
e1Rectangle.top < e2Rectangle.bottom &&
e1Rectangle.bottom > e2Rectangle.top
) {
destroyElement(class1[i])
destroyElement(class1[i2])
}
}
}
}
// Element is element[arraynumber].etc
function destroyElement(element) {
elementId.parentNode.removeChild(elementId)
}
// Every second, let's run our collision function to check for collisions
setInterval(function () {
detectCollision(elements1, elements2)
}, 1000)
