1
00:00:00,240 --> 00:00:07,140
Welcome back, last lesson, we set up the ability to check to see if one element was in collision with

2
00:00:07,140 --> 00:00:13,620
another element and if it was and this is where we're checking to see if our projectile has hit the

3
00:00:13,620 --> 00:00:14,130
alien.

4
00:00:14,130 --> 00:00:17,080
And if it did, then we're outputting currently right now is hit.

5
00:00:17,610 --> 00:00:18,690
So let's update that.

6
00:00:18,690 --> 00:00:23,370
And we can do quite a bit of things here within this function so that we've got a hit.

7
00:00:23,730 --> 00:00:26,040
We can update the alien speed if we want.

8
00:00:26,430 --> 00:00:30,850
So every alien you hit, the alien speed will increase, making it harder.

9
00:00:30,900 --> 00:00:37,010
Also, we can take the player score and we can increase the player score as well.

10
00:00:37,020 --> 00:00:39,690
So increase player score by one.

11
00:00:40,050 --> 00:00:42,080
We can also output our scores.

12
00:00:42,080 --> 00:00:44,380
So we've got this output score area.

13
00:00:44,520 --> 00:00:49,800
So every time we update the score, we should output it so the player can see their current update,

14
00:00:49,800 --> 00:00:58,030
the player fire to be true or false so that they can launch another projectile and also to fire me elements.

15
00:00:58,430 --> 00:01:04,950
Let's get the class list and add a class of height so it's no longer visible on the page.

16
00:01:04,960 --> 00:01:07,020
And we also want to remove that element.

17
00:01:07,230 --> 00:01:12,390
So we've got the element that we collided with is here so we can select that element.

18
00:01:12,540 --> 00:01:18,990
And just as we saw earlier when we were clearing out all the aliens, we can traverse up to the parent

19
00:01:18,990 --> 00:01:25,650
node and then from the parent node, we can remove a child from there and we'll remove the child matching

20
00:01:25,650 --> 00:01:27,240
those element values.

21
00:01:27,250 --> 00:01:31,670
And of course, this is the element that triggered this collision.

22
00:01:31,680 --> 00:01:34,230
So this is the one that where we're getting those values from.

23
00:01:34,530 --> 00:01:37,520
We can also update the position of fire me.

24
00:01:38,100 --> 00:01:45,770
So where we are updating the position of this elements, taking the container dim, dim value.

25
00:01:46,110 --> 00:01:53,760
So we've got our fire me y position and we can update it to match the container height so you can take

26
00:01:53,760 --> 00:01:58,920
the container Dem height value plus one hundred and reset the position of fire.

27
00:01:58,980 --> 00:01:59,690
So let's try that.

28
00:01:59,700 --> 00:02:02,180
So refresh, I'll make this a little bit bigger.

29
00:02:02,220 --> 00:02:03,200
So refresh again.

30
00:02:03,210 --> 00:02:09,330
So we hit start and we can see that our score goes up as each one of the aliens and I know they're starting

31
00:02:09,330 --> 00:02:15,940
out rather fast, so you might want to update that as well and toggle that to make it more playable.

32
00:02:15,990 --> 00:02:19,100
So these are some of the variables that you might have to adjust over time.

33
00:02:19,680 --> 00:02:25,440
So once you cleared out all of the aliens, we should actually be able to detect if the game is over.

34
00:02:25,470 --> 00:02:29,220
So we can do that as we're looping through the different aliens.

35
00:02:29,430 --> 00:02:35,030
And when we do the update and we see there's no more aliens left, that means that the player has one.

36
00:02:35,070 --> 00:02:43,710
So checking to see an ad in the condition if temp aliens length is equal to zero, then that means that

37
00:02:43,710 --> 00:02:44,970
the game is over.

38
00:02:45,000 --> 00:02:51,360
But this case, the player one, so it's still got the player game over launching and in the console

39
00:02:51,360 --> 00:02:54,870
log, we can output a message you want.

40
00:02:54,870 --> 00:03:00,870
And we might also want to add in a message area for the player so that we can communicate with them

41
00:03:00,870 --> 00:03:02,910
or we could add that into the top bar.

42
00:03:02,940 --> 00:03:07,320
So how about we added in just beside score and this will be another spane.

43
00:03:07,320 --> 00:03:12,840
It'll have a class of message and this is where we can output information to the player.

44
00:03:13,320 --> 00:03:18,600
And I'm going to actually put it on the right side of score so that the score doesn't actually move

45
00:03:18,600 --> 00:03:18,690
in.

46
00:03:18,690 --> 00:03:20,340
The message can show and not show.

47
00:03:20,350 --> 00:03:22,890
So let's select that as an object.

48
00:03:23,100 --> 00:03:26,550
So make our connection to that element that we just created.

49
00:03:27,570 --> 00:03:33,300
Using query selector, selecting the element with the class of and this should actually be looking within

50
00:03:33,300 --> 00:03:35,130
the document, not within the container.

51
00:03:35,430 --> 00:03:40,800
So update that and then we can do a quick refresh and make sure that message is available.

52
00:03:41,010 --> 00:03:43,080
So we are accessing that span.

53
00:03:43,230 --> 00:03:47,710
So the next thing that we can do is we can simply add in a function in order to handle that.

54
00:03:48,000 --> 00:03:55,920
So this can output and where we currently are outputting those console messages, we can add a message

55
00:03:55,920 --> 00:03:58,300
to output into the message area instead.

56
00:03:58,680 --> 00:04:01,650
So we've got quite a few console messages that we still have.

57
00:04:01,770 --> 00:04:03,840
So let's update that into the message area.

58
00:04:03,840 --> 00:04:10,130
Creating a function in order to handle that can call this message output and it'll pass in a value.

59
00:04:10,380 --> 00:04:15,810
And then this value is going to be used within the message object and we can take and update the entire

60
00:04:16,050 --> 00:04:17,970
HTML with the message contents.

61
00:04:18,300 --> 00:04:20,220
So next, let's make a selection.

62
00:04:20,490 --> 00:04:28,290
We'll also select the console like do find and replace or replace the console log with message output.

63
00:04:28,310 --> 00:04:32,340
And we can go through them one by one just to make sure that we don't have anything that might throw

64
00:04:32,340 --> 00:04:32,670
an error.

65
00:04:32,910 --> 00:04:37,710
This one will throw an error so we can't output an object in that format and the same with the diff.

66
00:04:37,710 --> 00:04:38,970
So we're not able to output it.

67
00:04:38,980 --> 00:04:41,110
So that should update the console messages.

68
00:04:41,130 --> 00:04:47,910
So now we should get a message that we get the hits being output there and then we get the new one message.

69
00:04:48,060 --> 00:04:54,900
So coming up next, we have a way to start the game, to end the game, and we need a way to fine-tune

70
00:04:54,900 --> 00:04:59,910
the game and make some tweaks and adjustments to the way that it looks, play through it a few times,

71
00:04:59,910 --> 00:05:02,380
make sure that all the functionality is there that we're looking for.

72
00:05:02,400 --> 00:05:03,990
So that's all still to come.

73
00:05:04,020 --> 00:05:08,790
So go ahead and add in the message area as well as the win condition into your project.