1 00:00:00,060 --> 00:00:05,040 This is going to be one of the most important parts of the game, so I already have the game where the 2 00:00:05,040 --> 00:00:06,080 aliens are moving. 3 00:00:06,090 --> 00:00:10,050 We can also shoot, but we have no way of stopping them. 4 00:00:10,050 --> 00:00:13,440 And once they reach the bottom, then it's game over and we've actually lost. 5 00:00:13,680 --> 00:00:16,880 So we need a way to prevent the aliens reaching the bottom. 6 00:00:16,890 --> 00:00:22,560 And that's going to be to shoot at them with our red ball that we have the red projectile that's coming 7 00:00:22,560 --> 00:00:23,360 off of our ship. 8 00:00:23,370 --> 00:00:29,310 So we need to be able to also detect to make sure that if this element that's containing the red ball, 9 00:00:29,310 --> 00:00:35,100 which has a class of fire me whenever it hits one of the aliens to detect that if there's a collision 10 00:00:35,100 --> 00:00:41,690 taking place and the way that we can detect collisions is we know that each one of these is a square. 11 00:00:41,880 --> 00:00:48,960 So even though this one is represented as a circle, it's also still represented a square in JavaScript 12 00:00:48,960 --> 00:00:49,980 because there's an element. 13 00:00:50,160 --> 00:00:54,240 So it's got all of the different points where it's got the top left point. 14 00:00:54,570 --> 00:00:56,250 That's going to be the zero zero point. 15 00:00:56,430 --> 00:00:58,800 And then it's got the top right point. 16 00:00:59,160 --> 00:01:05,100 It's got the bottom right point, and then the bottom left are the bottom left point and the aliens 17 00:01:05,100 --> 00:01:05,850 have the same thing. 18 00:01:05,850 --> 00:01:07,380 So each element has that. 19 00:01:07,620 --> 00:01:14,490 And we're going to check to see if there's crossover from any one of these points to the other element. 20 00:01:14,760 --> 00:01:19,440 And the best place to do this is as we're looping through the aliens so we don't have to loop through 21 00:01:19,440 --> 00:01:20,550 them another time. 22 00:01:20,820 --> 00:01:26,300 When we're going through the update, we can also check to see if a collision has taken place. 23 00:01:26,640 --> 00:01:32,730 So as we go through here, we've already selected the element, the alien element, and we can check 24 00:01:32,730 --> 00:01:39,680 at this point to see if there's a crossover between that alien and Fiame element. 25 00:01:40,320 --> 00:01:45,180 So checking to see if is collide and we'll create that function. 26 00:01:45,510 --> 00:01:51,630 We're going to pass in the two objects we're passing in the element which is the current alien. 27 00:01:51,870 --> 00:01:57,090 So as we loop through, we're going to account for each one of the elements that has a class of alien. 28 00:01:57,480 --> 00:02:03,210 And then Fiame element is the only one that's got the projectile and that's the one that we're moving 29 00:02:03,210 --> 00:02:04,290 up here as well. 30 00:02:04,770 --> 00:02:11,790 And in order to account for this, we need to consider where it's moving and its position. 31 00:02:12,060 --> 00:02:20,120 So we're a check to see Fiame position as well as where it's top left and its corner position is. 32 00:02:20,760 --> 00:02:21,960 So we're checking to see that. 33 00:02:21,960 --> 00:02:25,320 And all of that is going to be done within a function called Is Cleide. 34 00:02:25,620 --> 00:02:29,580 And if there is a collision, we're going to run the block a code for the collision. 35 00:02:29,730 --> 00:02:33,990 But for now, we're just output into the console that we've got a hit. 36 00:02:34,680 --> 00:02:40,800 So we have the ability to check through each one of the aliens as well as the projectile element and 37 00:02:40,800 --> 00:02:42,420 see if there's any crossover. 38 00:02:42,690 --> 00:02:49,620 So now let's add in our function for checking to see if a collision has taken place and we're going 39 00:02:49,620 --> 00:02:54,980 to use that bounding client rectangle value that we saw earlier. 40 00:02:54,990 --> 00:03:03,660 So we've got our Fiame object and if we get bounding client rectangle, so using the same method where 41 00:03:03,660 --> 00:03:10,080 we got the positions of the container, we can see we've got a left position, our right position, 42 00:03:10,080 --> 00:03:12,260 a top position and a bottom position. 43 00:03:12,720 --> 00:03:19,110 So if we check this element and then we do the same thing for each one of the aliens as we're looping 44 00:03:19,110 --> 00:03:26,460 through, and if we check the bottom position of the first rectangle against the top position of the 45 00:03:26,610 --> 00:03:33,420 other rectangle, we know if there's any crossover or if the that one the top position of first one 46 00:03:33,420 --> 00:03:39,620 is crossing over the bottom of the alien, then we know that there's been a hit on the vertical side. 47 00:03:39,630 --> 00:03:42,530 I know this is a fairly complex to explain. 48 00:03:42,810 --> 00:03:48,510 So the best thing to do is to just try that out and I'll show you with how it works within the code 49 00:03:48,510 --> 00:03:49,020 format. 50 00:03:49,650 --> 00:03:54,330 So we're passing in the two parameters, the element and the Fire Me object. 51 00:03:54,600 --> 00:03:56,760 And this is also going to make it more dynamic. 52 00:03:56,760 --> 00:03:58,710 As we know, this one's always firing me. 53 00:03:58,710 --> 00:04:06,030 B is always the same element, but because we want the consistency in order to create a more dynamic, 54 00:04:06,030 --> 00:04:11,460 if we add in more projectiles, then we're going to have flexibility on checking the collision detection 55 00:04:11,640 --> 00:04:12,210 as well. 56 00:04:12,210 --> 00:04:19,140 If Wacek collision on any other elements, we can just simply add it into the formula and check if there 57 00:04:19,140 --> 00:04:19,920 is a collision. 58 00:04:20,430 --> 00:04:29,460 So we're going to get our bounding client rectangle and then also another one for the B object. 59 00:04:29,850 --> 00:04:30,570 The B element. 60 00:04:32,060 --> 00:04:37,310 And taking be passing in that same method, bounding client rectangle. 61 00:04:38,270 --> 00:04:44,360 So now we've got all of this information we've got it's essential where it's positioned, how wide it 62 00:04:44,360 --> 00:04:47,490 is, X Y position of both of the elements. 63 00:04:48,620 --> 00:04:50,210 So we're going to do to check. 64 00:04:50,210 --> 00:04:57,950 We're going to check to see if there's no overlap and if there is no overlap or or negate that. 65 00:04:58,280 --> 00:05:01,200 And that will turn into if there is overlap. 66 00:05:01,910 --> 00:05:05,280 So let's work out this formula and it is going to be rather long. 67 00:05:06,080 --> 00:05:13,280 So first, we're looking at the bottom of rectangle eight and we're checking to see if it's less than 68 00:05:13,520 --> 00:05:16,480 the top of Rectangle B. 69 00:05:16,610 --> 00:05:18,770 We're also going to check the opposite. 70 00:05:19,430 --> 00:05:25,280 So this way, we're going to actually know if there's any overlaps or checking the top of rectangle 71 00:05:25,280 --> 00:05:28,160 A against the bottom of rectangle. 72 00:05:28,460 --> 00:05:33,580 So this is only going to paint part of the picture because this is going to be checking on the horizontal. 73 00:05:34,040 --> 00:05:42,740 So we can also pass in and we can see that if the projectile is overtop of one of the aliens horizontally 74 00:05:43,130 --> 00:05:46,070 or vertically, then this is going to come back. 75 00:05:46,220 --> 00:05:51,490 And now because we've negated it, it will either come back as true if there is overlap. 76 00:05:51,500 --> 00:05:58,490 So we also need to look at the horizontal, of course, and this formula is going to be looking to see 77 00:05:58,700 --> 00:05:59,450 rectangle. 78 00:05:59,450 --> 00:06:05,400 A right side is less than rectangle B left side. 79 00:06:05,810 --> 00:06:10,510 So if there's overlap there and then we also need to check the opposite. 80 00:06:10,880 --> 00:06:19,000 So we need to check rectangle a left, see if there's overlap and check to see if this is larger. 81 00:06:19,010 --> 00:06:20,630 And actually this should be larger. 82 00:06:20,900 --> 00:06:25,970 So we're checking to see if it's greater than Rectangle B right side. 83 00:06:26,100 --> 00:06:31,430 There's overlap on the horizontal as well as we're checking to see the overlap on the vertical. 84 00:06:31,970 --> 00:06:33,330 So I think we're ready to try that. 85 00:06:33,380 --> 00:06:36,230 So we saw that as it passed through those elements. 86 00:06:36,470 --> 00:06:37,640 The hit was registered. 87 00:06:37,880 --> 00:06:43,220 I don't know if you saw that because we are moving rather quickly, but you see that whenever it passes 88 00:06:43,220 --> 00:06:45,750 through those elements, it registers the hip. 89 00:06:45,770 --> 00:06:47,870 So next, we need to take some type of action. 90 00:06:47,870 --> 00:06:51,410 If this hit takes place, it will show how to do that. 91 00:06:51,410 --> 00:06:57,440 In the upcoming lesson for this, make sure that you can check to see if there's a collision on two 92 00:06:57,440 --> 00:06:58,480 different elements. 93 00:06:58,490 --> 00:07:01,370 And if there is, then we're going to return back. 94 00:07:01,370 --> 00:07:01,730 True. 95 00:07:01,970 --> 00:07:06,290 And we can try that function where we're passing in the two parameters. 96 00:07:06,500 --> 00:07:12,680 And we do have to we've got one called my ship as well as we've got the container. 97 00:07:12,710 --> 00:07:13,990 So we're passing. 98 00:07:14,000 --> 00:07:20,570 And we know that obviously the my ship is on top of the container, so the Cleide is coming back as 99 00:07:20,570 --> 00:07:20,930 true. 100 00:07:21,290 --> 00:07:22,730 So you could try that for yourself. 101 00:07:22,730 --> 00:07:28,940 And if you take my ship and the other object that we have, the other element that we're connected to 102 00:07:28,940 --> 00:07:30,530 is the start button. 103 00:07:31,070 --> 00:07:37,060 So we can check to see if the my ship is on top of the start button, if there is a collision. 104 00:07:37,520 --> 00:07:41,000 And so this one comes back as false because there's no overlap there. 105 00:07:41,330 --> 00:07:47,240 You could try it on various elements on your page manually within the console if you want to check out 106 00:07:47,240 --> 00:07:49,040 the functionality of the collision detection.