The earlier lessons I showed you, how we can create a bunch of random dynamic elements, so cloning
existing elements and then we could move them around, and now the problem is what happens if you want
to get rid of this element.
So now you've got it and you don't like it.
So you want to get rid of it.
So show you how to do that.
We're going to create essentially a trash bin that we can utilize.
So updating within our class, let's create an ID of garbage position absolute so we can position it
somewhere on our page.
And I'm going to make it a black square.
And of course, you can style it as needed.
So this black square is going to be where the void is, if you move any one of these elements on top
of it, they're going to simply get removed.
And let's position this so we can position at maybe 500 picks and top 300 picks.
Now, let's add that into our elements.
It doesn't really matter where it goes, because as this is going to be absolute position and let's
refresh that.
So there's our garbage and we want to be able to detect if one element is on top of the other element
and this is where we can use collision detection.
So we saw it before where we were getting the bounding box, and that's what we were working with in
the last lesson where we were checking to see if one element is on top of the other element.
So let's make that check and we're set up our collision detection.
So open this up bigger.
And as we're setting these elements, we can also check to see if a collision is there and we'll set
up a function called Is Cleide Passan, that element object and for now, a console log and over.
So nice, big over.
Set up that function to detect if the two elements are colliding, so function is.
Collide, and we're only passing in that one element value so we can just give it a variable of a because
you do need to have two elements, but we already know what the other element is, and that's that garbage
one that we want to make that we've just created so I can actually put that into a constant variable.
So just as we were selecting.
The other elements, we're going to select this and we can use document, get element by ID.
So that way we don't have to specify it again.
So now let's set up our rectangle.
So selecting that element that we're passing in, we're going to get the bounding client rectangle.
And also, let's get the B rectangle for.
The elements with an ID, garbage and the same thing that get bounding client rectangle, so using that
method that we can consider log out.
The a rectangle with one or two, so we can find out more information about it.
So let's try that.
So let's refresh.
And create one, drag it around and you can see that this is this is that bound rectangle there that
we're.
So every time we click it, essentially we're invoking that is Cleide, and that's where we're putting
that rectangle information.
And you can see there's all that information contained in here so we can calculate out all of the corner
edges of this particular element and see if there's any overlap with the other elements.
And that's what Element B, where we've also got all of that information.
So we've got the top left, right, top and with.
So let's calculate that out and we're going to negate the value that we're returning.
So let's make our calculations.
So we've got our first element and we've got a bottom position and checking to see if it's less than
the top position of the second element.
We've got, again, our eight elements and we're going to check to see if that top position is larger
than the bottom of the rectangle.
B or.
We're going to also check the horizontal, so checking to see if the right position is left less than
the rectangle left position and using the get bounding client rectangle saves us the trouble of calculating
where these corners are.
So we see that we've got a left and a right and a top and a bottom.
We also have the height and the width.
So sometimes you see that height and width is used to calculate out those corners.
But in this case, we don't have to do that because we do have the ability to calculate that out.
And I forgot some of the brackets there or and then we're also going to do the opposite sort of checking
to see if rectangle left corner is greater than.
Be rectangle right corner.
So that takes care of the horizontal and going back over to where we've got the Cleide value.
So we can see that now, depending on what gets returned here, we can say and then over here I'm going
to say, OK.
And actually, I need to move this into the movement position, so that's why it's kind of choppy there
and it needs to actually be added in where we're checking to see on the move.
So let me save that and try that one more time.
So now whenever I'm over, we see it immediately over and whatever I'm out, it's OK.
So we've got our collision essentially happening.
So the next part of it is to remove the element once the collision happens.
So that's coming up in the next lesson.
So for this lesson, try it for self check to see if one element is overlapping the other element.
And if it is, then you can pass on a message of over or whatever you want in the console.
And if it's not, then you can passant.
OK, and coming up next, we're going to do something with this condition.