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?<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
const elements1 = document.querySelectorAll('.boxes')\nconst elements2 = document.querySelectorAll('.borders')<\/code><\/pre>\n\n\n\nThe variable elements1 and 2 are both arrays of all the elements that have class .boxes and boarders.<\/p>\n\n\n\n
Now lets create a function to detect a collision.<\/p>\n\n\n\n
function detectCollision(class1, class2) {\n for (let i = 0; i < class1.length; i++) {\n const e1Rectangle = class1[i].getBoundingClientRect()\n for (let i2 = 0; i2 < e2.length; i2++) {\n const e2Rectangle = class2[i2].getBoundingClientRect()\n if (\n e1Rectangle.left < e2Rectangle.right &&\n e1Rectangle.right > e2Rectangle.left &&\n e1Rectangle.top < e2Rectangle.bottom &&\n e1Rectangle.bottom > e2Rectangle.top\n ) {\n destroyElement(class1[i])\n destroyElement(class1[i2])\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nThis 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.<\/p>\n\n\n\n
Create the destroyElement function with<\/p>\n\n\n\n
function destroyElement(element) {\n elementId.parentNode.removeChild(elementId)\n}<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Here is our full code<\/p>\n\n\n\n
const elements1 = document.querySelectorAll('.boxes')\nconst elements2 = document.querySelectorAll('.borders')\n\nfunction detectCollision (class1, class2) {\n for (let i = 0; i < class1.length; i++) {\n const e1Rectangle = class1[i].getBoundingClientRect()\n for (let i2 = 0; i2 < e2.length; i2++) {\n const e2Rectangle = class2[i2].getBoundingClientRect()\n if (\n e1Rectangle.left < e2Rectangle.right &&\n e1Rectangle.right > e2Rectangle.left &&\n e1Rectangle.top < e2Rectangle.bottom &&\n e1Rectangle.bottom > e2Rectangle.top\n ) {\n destroyElement(class1[i])\n destroyElement(class1[i2])\n }\n }\n }\n}\n\n\/\/ Element is element[arraynumber].etc\nfunction destroyElement(element) {\n elementId.parentNode.removeChild(elementId)\n}\n\n\/\/ Every second, let's run our collision function to check for collisions\nsetInterval(function () {\n detectCollision(elements1, elements2)\n }, 1000)<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"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 … Continue reading