1 00:00:00,330 --> 00:00:00,920 Hello there. 2 00:00:00,930 --> 00:00:06,660 How's it going in this lesson, we are going to be creating an active element that's going to give us 3 00:00:06,660 --> 00:00:08,720 an objective within our gameplay. 4 00:00:09,030 --> 00:00:13,890 So creating a function would create a function for that, creating a function we could just call it 5 00:00:13,890 --> 00:00:14,940 make active. 6 00:00:15,240 --> 00:00:20,910 And this is going to select one of the elements, one of the squares at random and apply a class of 7 00:00:20,910 --> 00:00:23,120 active to that to that element. 8 00:00:23,610 --> 00:00:29,480 So creating a random index, we're going to use math, science, math flaw. 9 00:00:29,970 --> 00:00:32,310 So bring the math value down to zero. 10 00:00:32,310 --> 00:00:38,520 And this is just regular JavaScript math, random method that gives you a random number and not random, 11 00:00:38,520 --> 00:00:42,060 gives you a number that zero decimal and a whole bunch of digits. 12 00:00:42,540 --> 00:00:45,920 If you do math lower than it rounds it down to the nearest whole number. 13 00:00:45,960 --> 00:00:52,920 So going down to the full number and then we just need to specify, we want to multiply it by and because 14 00:00:52,920 --> 00:00:59,700 we've got our squares and as we know, squares is an array that we do have a value of and we have a 15 00:00:59,700 --> 00:01:00,300 length of. 16 00:01:00,300 --> 00:01:04,200 So we can utilize that length and we see it comes up at twenty five. 17 00:01:04,410 --> 00:01:09,240 And remember, we need to keep this dynamic and we actually have twenty four elements that are visible. 18 00:01:09,240 --> 00:01:11,100 So we need to make a slight adjustment here. 19 00:01:11,370 --> 00:01:15,970 But let's use squares lengths in order to get a random value. 20 00:01:16,290 --> 00:01:21,590 So now with this formula we do have a possibility of having zero and we don't want zero. 21 00:01:21,840 --> 00:01:29,730 So let's do a condition here to check, to see what the value is and checking to see if random index 22 00:01:29,730 --> 00:01:31,720 is not equal to zero. 23 00:01:31,740 --> 00:01:38,010 So making sure that if we do by chance get a zero, that one in 25 chance it's a zero, then we're just 24 00:01:38,010 --> 00:01:39,380 going to do the function again. 25 00:01:39,510 --> 00:01:43,380 So we do our statement here and launch make active again. 26 00:01:43,390 --> 00:01:47,010 So it'll keep doing the make active until we get the result that we want. 27 00:01:47,130 --> 00:01:53,880 So looping through the function until we finally get a value that's not conflicting with what we're 28 00:01:53,880 --> 00:01:54,430 looking for. 29 00:01:54,540 --> 00:01:57,600 There's also something else that we need to make to look at. 30 00:01:57,900 --> 00:02:04,930 And we don't want the new active object to ever end up to be the place, the same place as the player 31 00:02:04,950 --> 00:02:05,950 square value. 32 00:02:05,970 --> 00:02:08,790 So this is where we're going to start using that player square value. 33 00:02:08,940 --> 00:02:13,850 And we want to make sure that that is not equal to the random index value. 34 00:02:13,890 --> 00:02:22,150 And if both of those are good, then we are ready to generate our position using that random index. 35 00:02:22,170 --> 00:02:25,070 So first of all, let's see what number we can pull out. 36 00:02:25,080 --> 00:02:28,770 And because this is a function, we can run that within our console. 37 00:02:28,770 --> 00:02:34,890 So typing in that make active, you see that we're selecting one of those elements there and we're turning 38 00:02:34,890 --> 00:02:35,730 back fourteen. 39 00:02:36,000 --> 00:02:39,420 If we do it again, we get 11, 16 and so on. 40 00:02:39,690 --> 00:02:43,590 So we can use this in order to return back one of those squares. 41 00:02:43,860 --> 00:02:47,580 And remember that squares array that we have that contains all the elements. 42 00:02:47,860 --> 00:02:52,030 This is where we can use that random index value that we're just generating. 43 00:02:52,050 --> 00:03:00,510 And because this is referring to the element, we can update that class list and add the class of active 44 00:03:00,510 --> 00:03:00,830 to it. 45 00:03:01,260 --> 00:03:02,370 So see how that works. 46 00:03:02,380 --> 00:03:07,320 And if you wanted to see which element we're selecting and we want to output that, we can put that 47 00:03:07,320 --> 00:03:10,050 in the console instead to have other than the number. 48 00:03:10,230 --> 00:03:17,110 So now when we do make active function, we generate randomly one of the squares turns green. 49 00:03:17,310 --> 00:03:22,140 So that's our objective of the game, is for the player to be able to move over those squares. 50 00:03:22,380 --> 00:03:24,300 And of course, we're only going to have one. 51 00:03:24,450 --> 00:03:28,650 And whenever the player moves over the square, then we're going to update it. 52 00:03:28,650 --> 00:03:30,690 And that's going to score a point. 53 00:03:30,970 --> 00:03:32,910 And as you can see it, they're disappearing. 54 00:03:32,910 --> 00:03:37,040 So we need to account for that and we can do all of that in the upcoming lesson. 55 00:03:37,350 --> 00:03:44,280 So for now, add in a function that can make one of the elements or a bunch of elements active, make 56 00:03:44,280 --> 00:03:50,820 sure that it's within the spectrum of elements that are available, as well as make sure that we're 57 00:03:50,820 --> 00:03:54,630 not overlapping the current square that the player is on. 58 00:03:54,630 --> 00:03:55,940 So add that into your project. 59 00:03:55,950 --> 00:04:01,440 You're going to be ready to complete this within the next lesson where we're going to be creating these 60 00:04:01,440 --> 00:04:08,070 objectives within our functions and then checking to see if the player is on top of the correct cell. 61 00:04:08,150 --> 00:04:09,270 So that's still to come.