1 00:00:00,060 --> 00:00:01,100 Hello and welcome back. 2 00:00:01,110 --> 00:00:04,140 In this lesson, we're going to attach an event listener to the start button. 3 00:00:04,310 --> 00:00:10,140 We're also going to play some styling and then get the bounding back box, setting up our variables 4 00:00:10,140 --> 00:00:16,080 that we're going to need in the upcoming lessons in order to produce our gameplay so our global variables 5 00:00:16,080 --> 00:00:17,170 that we're going to use. 6 00:00:17,400 --> 00:00:19,980 So first of all, let's select our button objects. 7 00:00:20,010 --> 00:00:24,140 This is the one that we connected to the element with the class of start button. 8 00:00:24,390 --> 00:00:28,650 We're going to add an event listener, the event listener that we're adding in is a click. 9 00:00:28,980 --> 00:00:33,690 So whenever the button gets clicked, we're going to invoke a function and that function is going to 10 00:00:33,690 --> 00:00:36,770 be called start talking and we'll create a placeholder for that. 11 00:00:37,110 --> 00:00:40,110 So whenever that gets clicked, the game starts. 12 00:00:40,290 --> 00:00:45,410 And then this is where we can set up and do all of our parameters in order to start the game. 13 00:00:45,990 --> 00:00:51,790 And I'll just put a console message in here so that we can check to make sure that it is working. 14 00:00:52,200 --> 00:00:58,380 There's also a few other variables that I did want to add in and one of them that I wanted to set up. 15 00:00:58,380 --> 00:01:01,020 So some global variables that we're going to utilize. 16 00:01:01,020 --> 00:01:07,080 And I want to set up one that has the container dimensions as we're going to need to know, and we want 17 00:01:07,080 --> 00:01:10,620 to make this application as flexible as possible. 18 00:01:10,740 --> 00:01:15,570 And all of our gameplay is happening within the element, what, the class of container. 19 00:01:15,720 --> 00:01:17,490 So I want to select that element. 20 00:01:17,490 --> 00:01:19,890 And we already have it within an object format. 21 00:01:20,130 --> 00:01:25,890 And you're going to use a function called get bounding client rectangle. 22 00:01:25,920 --> 00:01:28,590 This is a method and it's a really useful one. 23 00:01:28,710 --> 00:01:30,320 And I'll show you what this is going to do. 24 00:01:30,600 --> 00:01:36,120 So when I type in that container, demn you're going to see that I get the dimensions of it. 25 00:01:36,360 --> 00:01:43,350 So I get some useful information, I get the bottom position, the height, the left, the right, the 26 00:01:43,350 --> 00:01:46,530 top, the width, the X and the Y coordinates. 27 00:01:46,770 --> 00:01:50,910 So I've got all of these useful pieces of information that I can utilize. 28 00:01:51,030 --> 00:01:57,300 I know where it's located, I know how, how, what its height is, how wide it is and it's also where 29 00:01:57,300 --> 00:01:58,200 it's located. 30 00:01:58,410 --> 00:02:02,370 So we can utilize this as we're setting up the boundaries. 31 00:02:02,370 --> 00:02:08,670 And we don't want any of the player to we don't want the player to leave the boundaries of the containing 32 00:02:09,150 --> 00:02:13,700 object as well as we don't want the aliens to leave that container either. 33 00:02:14,220 --> 00:02:17,370 Also, we're going to set up a global object. 34 00:02:17,640 --> 00:02:18,930 We can call that player. 35 00:02:19,110 --> 00:02:25,110 So this is where we can store all of the useful player information so you can store things like score 36 00:02:25,620 --> 00:02:28,380 so we can have our starting score value there. 37 00:02:28,560 --> 00:02:33,120 And this is an object so we can place as much information as possible as we need. 38 00:02:33,390 --> 00:02:37,650 There's also a speed variable that we want to maybe change and update. 39 00:02:37,650 --> 00:02:39,810 There's also the game status. 40 00:02:39,960 --> 00:02:42,890 So checking to see if it's over or not. 41 00:02:42,900 --> 00:02:48,270 So if it's game over so the game won't run when we start the game, that we're going to turn that to 42 00:02:48,270 --> 00:02:48,800 false. 43 00:02:48,840 --> 00:02:51,240 So the game is going to be in progress. 44 00:02:51,660 --> 00:02:53,010 There's also the fire. 45 00:02:53,400 --> 00:02:55,770 So this is going to be false. 46 00:02:56,010 --> 00:03:02,040 And basically it means that we have no projectile speed and we want the alien speed to be different 47 00:03:02,280 --> 00:03:07,530 and not coupled to the speed of the player and the speed of the players, how many pixels the player 48 00:03:07,530 --> 00:03:08,640 is going to be able to move. 49 00:03:08,880 --> 00:03:12,030 So now we've got that information in and there's not a whole lot. 50 00:03:12,030 --> 00:03:16,160 You can always output it and you can see the object structure in the console. 51 00:03:16,170 --> 00:03:19,110 Also, we want it to apply some styling. 52 00:03:19,320 --> 00:03:23,160 And one of them, the styles that I had it in here is PIDE. 53 00:03:23,430 --> 00:03:29,310 And this one we're going to use and add it into elements and remove it from elements where we want to 54 00:03:29,310 --> 00:03:29,670 hide. 55 00:03:29,670 --> 00:03:34,560 And so various elements and all this is going to be contained within here is going to be displayed none. 56 00:03:34,860 --> 00:03:40,650 So whenever this is applied, whenever that class is applied, we're not going to see it. 57 00:03:40,650 --> 00:03:42,450 It's just going to display it as none. 58 00:03:42,570 --> 00:03:45,450 We can also set our container area. 59 00:03:45,450 --> 00:03:51,840 So now that we've got the main game object so we can set this, so we can also make a dynamic if we 60 00:03:51,840 --> 00:03:52,110 want. 61 00:03:52,440 --> 00:03:59,220 So maybe a width of eighty percent and to a height of six hundred pixel, maybe we want it always to 62 00:03:59,220 --> 00:04:02,550 be the same height and you can adjust these as needed. 63 00:04:02,940 --> 00:04:08,670 So there's margin left and if my width is 80 percent, my margin left is ten. 64 00:04:08,850 --> 00:04:10,650 So that's going to roughly center it. 65 00:04:10,860 --> 00:04:17,130 Also maybe we want to set a background color to this and I'll set it as black so that we can distinguish 66 00:04:17,130 --> 00:04:21,780 where it's located and we can add a border for one or two and also overflow. 67 00:04:21,810 --> 00:04:26,460 I usually like to hide the overflow in the game so that we don't run out of our screen area. 68 00:04:26,730 --> 00:04:32,940 So this is basically where our gameplay is going to take place and I'm going to adjust the sizing to 69 00:04:32,940 --> 00:04:35,430 be adjusted to be one hundred percent. 70 00:04:36,030 --> 00:04:38,670 And we can also play with the height as well. 71 00:04:38,940 --> 00:04:41,460 So we could also set that to be eighty percent. 72 00:04:41,790 --> 00:04:43,470 So that's completely dynamic. 73 00:04:43,950 --> 00:04:47,220 And as I shrink it, our height will shrink as well. 74 00:04:47,460 --> 00:04:48,870 So we can utilize this. 75 00:04:49,020 --> 00:04:56,280 And now whenever I pull out, if I go into the console now and if I get the container dimensions, we 76 00:04:56,280 --> 00:04:59,460 can see that they're adjusting accordingly. 77 00:04:59,750 --> 00:05:05,210 And so this is going to be very useful as we're calculating out and we want to make this application 78 00:05:05,210 --> 00:05:06,830 as dynamic as possible. 79 00:05:07,040 --> 00:05:08,900 So we want to be able to move things around. 80 00:05:09,180 --> 00:05:13,790 Let's also add in a few other options as we're building the styles. 81 00:05:14,090 --> 00:05:17,690 So for the start button, make this look more like a button. 82 00:05:17,780 --> 00:05:21,160 And I'm going to really be doing a very quick styling here. 83 00:05:21,410 --> 00:05:27,770 And of course, you can style as needed as it's not going to affect any of the gameplay set, color, 84 00:05:27,770 --> 00:05:28,850 background, color. 85 00:05:28,880 --> 00:05:30,120 So let's see what that looks like. 86 00:05:30,140 --> 00:05:32,910 So start game button is all the way across. 87 00:05:33,260 --> 00:05:35,440 So now we have our start game option. 88 00:05:35,780 --> 00:05:38,440 Let's also add some styling for the ship. 89 00:05:39,050 --> 00:05:44,230 So this is going to be the player's ship and what they're going to be moving on the screen. 90 00:05:44,900 --> 00:05:47,410 And this one we need to position absolute. 91 00:05:47,660 --> 00:05:54,290 So that gives us the ability to set the position of where it's located on the screen so we can set a 92 00:05:54,290 --> 00:05:57,980 left position and we can also set a top position. 93 00:05:58,110 --> 00:06:04,550 And in this case, we're going to use the bottom so that it's coming off of the bottom of our main container 94 00:06:04,550 --> 00:06:04,920 area. 95 00:06:05,030 --> 00:06:07,940 Also a background color of whites. 96 00:06:07,940 --> 00:06:10,580 So we've got some good contrast between that. 97 00:06:11,300 --> 00:06:14,450 And then we need to define its width and its height. 98 00:06:14,460 --> 00:06:16,910 And I'm going to set this more dynamically. 99 00:06:18,320 --> 00:06:23,210 So we'll set it like that and then we can refresh it and we can see that now it's positioned slightly 100 00:06:23,210 --> 00:06:24,010 off the bottom. 101 00:06:24,230 --> 00:06:26,630 So I just add the bottom position to 20 percent. 102 00:06:26,750 --> 00:06:29,470 I gave it a height, height of 20 picks. 103 00:06:29,720 --> 00:06:33,050 And then lastly, let's add in the firing object. 104 00:06:33,050 --> 00:06:33,890 So the fire me. 105 00:06:34,130 --> 00:06:37,180 So for now, I'm going to remove height so that we can see it on the screen. 106 00:06:37,310 --> 00:06:38,780 That's going to be the projectile. 107 00:06:39,290 --> 00:06:47,360 And this one also has to have a position of absolute and in this case, we can go top and left at zero 108 00:06:47,360 --> 00:06:54,590 and setting its width, setting its height, its border radius at 50 percent. 109 00:06:54,600 --> 00:06:58,760 So it's nice around and it's background color we can set to red. 110 00:06:58,760 --> 00:07:00,010 So it stands out on the screen. 111 00:07:00,230 --> 00:07:06,170 So we've got our object there that we've added so great once we've got the projectile that we're ready 112 00:07:06,170 --> 00:07:11,990 to hit it again and then we're going to hide in and hide it as we use it within our code. 113 00:07:12,110 --> 00:07:16,270 So we're ready to move on to the next part where we're going to be starting the gameplay. 114 00:07:16,610 --> 00:07:21,110 So this is going to mean that we're going to start the interaction with the keyboard to move the ship 115 00:07:21,110 --> 00:07:26,090 across, as well as we're going to start the building of the aliens and the bad guys that are going 116 00:07:26,090 --> 00:07:29,030 to be coming down that you're going to have to defeat with the ship. 117 00:07:29,210 --> 00:07:30,890 So all of that is still yet to come. 118 00:07:31,130 --> 00:07:37,100 So go ahead and add in set up your default variables used to get bounding client rectangle in order 119 00:07:37,100 --> 00:07:40,340 to get your main container of your gameplay area. 120 00:07:40,550 --> 00:07:45,260 Also add an event listener to the start button so that you have an option to start the game. 121 00:07:45,260 --> 00:07:50,090 So whenever that gets clicked, it starts the game and then set up some default variables within the 122 00:07:50,090 --> 00:07:53,930 player object that you can utilize in the upcoming lessons. 123 00:07:54,140 --> 00:07:56,300 And of course you can adjust these as well. 124 00:07:56,330 --> 00:08:02,210 We are going to be adjusting them with JavaScript in order to be adjusting some of these values. 125 00:08:02,570 --> 00:08:03,650 So that's all still to come.