1 00:00:00,060 --> 00:00:05,100 Once you have all of the core functionality that you originally set out to produce within the game, 2 00:00:05,250 --> 00:00:11,050 you're ready to customize it and add in some additional functionality to enhance the gameplay. 3 00:00:11,310 --> 00:00:15,200 So we have all of the core functionality where we can grab the elements. 4 00:00:15,210 --> 00:00:21,270 We've got a bunch of elements that are moving and we can use our keyboard in order to move our player 5 00:00:21,270 --> 00:00:24,670 element in order to collide with the ones that are on the screen. 6 00:00:25,140 --> 00:00:31,200 So we also wanted to create a little bit more interesting where when we do reach the bottom, that we 7 00:00:31,200 --> 00:00:37,050 have a random exposition so we can use the same formula that we used when we were creating those bad 8 00:00:37,050 --> 00:00:42,230 guys and we were setting their position randomly using this formula. 9 00:00:42,390 --> 00:00:47,010 We can do that as well and we can copy that and go down to here. 10 00:00:47,010 --> 00:00:54,030 And instead of div, this is going to be easy because the element is within the E object and then all 11 00:00:54,030 --> 00:00:56,380 we need to do is just do a quick update. 12 00:00:56,640 --> 00:01:00,150 So this is actually going to randomize where they're falling from. 13 00:01:00,630 --> 00:01:06,810 So you can see that once they drop, they're not necessarily showing up in that same slot all the time. 14 00:01:07,260 --> 00:01:14,760 Now there's a randomized effect to wherever it is positioned, and we also need to update it as well. 15 00:01:15,190 --> 00:01:19,970 So we do have its left position, but we need to update that as well. 16 00:01:20,160 --> 00:01:27,150 So instead of top, we'll update its X position accordingly. 17 00:01:27,630 --> 00:01:31,690 So now as they drop, they're not always showing up within the same slot. 18 00:01:31,950 --> 00:01:33,690 So a little bit more randomized. 19 00:01:33,690 --> 00:01:36,670 And you can see this one is dropping in different spots. 20 00:01:37,050 --> 00:01:41,160 Also, we can customize the way they look as we're creating them. 21 00:01:41,170 --> 00:01:44,190 So we've got our function here where we're generating them. 22 00:01:44,340 --> 00:01:47,010 We can generate different background colors. 23 00:01:47,010 --> 00:01:53,590 So updating style and there's a quick formula that I'll show you in order to generate a random color. 24 00:01:53,850 --> 00:02:00,990 So this is a hex value that we're expecting and we need to generate this random color so we can use 25 00:02:00,990 --> 00:02:03,300 math random in order to accomplish that. 26 00:02:03,510 --> 00:02:05,070 And that's what the formula is. 27 00:02:05,190 --> 00:02:11,610 And it's going to be just one statement using math and string method in order to convert into a hex 28 00:02:11,610 --> 00:02:11,950 value. 29 00:02:12,240 --> 00:02:14,010 So we do math, random. 30 00:02:14,190 --> 00:02:17,210 So math, random returns back are random values. 31 00:02:17,210 --> 00:02:20,130 So zero decimal and a whole bunch of digits after that. 32 00:02:20,400 --> 00:02:27,510 And if we use to string and two string 16, this is now returning back a string value. 33 00:02:27,660 --> 00:02:29,980 But you can see it's within the hexadecimal format. 34 00:02:30,360 --> 00:02:36,870 So then lastly, what we need to do is substring and this is going to substract part of the string that 35 00:02:36,870 --> 00:02:37,500 we want. 36 00:02:37,620 --> 00:02:45,450 And we want to only return back the last six characters so that we always have a six character hexadecimal 37 00:02:45,450 --> 00:02:49,280 value that's being returned back and this is all generated randomly. 38 00:02:49,470 --> 00:02:53,960 So now we can use that formula and place it within the background color. 39 00:02:54,120 --> 00:02:59,400 So when we start the game, you're going to see that they're all randomized in color. 40 00:02:59,790 --> 00:03:03,570 We can also randomize the height as well of the elements. 41 00:03:03,930 --> 00:03:07,590 So that was another option that we have where we can set. 42 00:03:08,350 --> 00:03:15,110 So we have a predefined height and using style height, we can update that value as well. 43 00:03:16,040 --> 00:03:22,940 So let's set a random height of the element we can use math once again, Samantha's our goal to think 44 00:03:22,940 --> 00:03:24,770 to create random values. 45 00:03:24,920 --> 00:03:27,270 So we multiply it by 50. 46 00:03:27,410 --> 00:03:33,290 Let's add 20 to that so that we have a minimum of at least 20 in height and actually change that to 47 00:03:33,290 --> 00:03:33,800 50. 48 00:03:33,920 --> 00:03:36,770 And I'm going to put it into a variable called Rande. 49 00:03:36,920 --> 00:03:43,460 So that's more flexible and how we output it, as we can put it, into height as well as style line 50 00:03:43,460 --> 00:03:43,740 height. 51 00:03:44,150 --> 00:03:47,480 So when we adjust the line height, we've got random picks. 52 00:03:47,720 --> 00:03:52,060 So we've got random heights for each one of the elements as they're dropping down. 53 00:03:52,400 --> 00:03:54,350 So you can adjust this as needed. 54 00:03:54,530 --> 00:03:59,740 So if you want to have it a minimum of 50, this is the way to set that as a minimum of 50. 55 00:04:00,140 --> 00:04:04,130 So play through the game a few times, make sure that it's functioning as needed. 56 00:04:04,280 --> 00:04:06,620 And coming up next with the Quick Code Review.