1 00:00:00,270 --> 00:00:04,980 We don't have a whole lot happening within our game quite yet, we've got a start button start button 2 00:00:04,980 --> 00:00:09,650 disappears and we run a block of code in the function called make item. 3 00:00:10,110 --> 00:00:12,740 Let's set up some more additional functionality. 4 00:00:13,140 --> 00:00:16,710 So we want to get the boundary of our main container. 5 00:00:16,980 --> 00:00:22,070 So getting that container object, we're going to use get bounding client rectangle. 6 00:00:22,290 --> 00:00:26,040 This is a method that gives you the parameters of an element. 7 00:00:26,160 --> 00:00:33,640 And if I put into the console, you're going to see that whenever we hit start, we get the bounding 8 00:00:33,640 --> 00:00:34,620 client rectangle. 9 00:00:34,830 --> 00:00:37,490 So this is the full space that we have to work with. 10 00:00:37,500 --> 00:00:41,160 We've got the bottom, the height, the left, the right, the top and the width. 11 00:00:41,190 --> 00:00:43,000 So this is that whole gameplay area. 12 00:00:43,080 --> 00:00:49,680 Next, we need to create an element and create generically, randomly create an element and position 13 00:00:49,680 --> 00:00:50,860 it somewhere on the page. 14 00:00:50,910 --> 00:00:55,320 So using document element, create element, creating a div. 15 00:00:55,530 --> 00:01:00,870 And then for this we're going to set all of its properties dynamically with JavaScript. 16 00:01:01,050 --> 00:01:08,730 So adding in to that div, updating its style attributes, we can set a position of absolute so that 17 00:01:08,730 --> 00:01:15,180 will allow us to position that element and console, log it out so that we can see the element as we're 18 00:01:15,180 --> 00:01:15,960 constructing it. 19 00:01:16,110 --> 00:01:21,930 So there we've got our elements, we've got a style of position, absolute, and that means that we 20 00:01:21,930 --> 00:01:23,610 need to also position it. 21 00:01:23,610 --> 00:01:25,440 So we need to do a left position. 22 00:01:25,560 --> 00:01:29,310 And this can be math, random and the random value. 23 00:01:29,340 --> 00:01:33,780 When we take both random, we need to multiply it by the number that we want to randomize it by. 24 00:01:34,140 --> 00:01:41,310 And we already have some values that we can utilize here that are available within our boundary object. 25 00:01:41,970 --> 00:01:48,810 So taking that boundary width plus picks, that will give us a position, a left position that we can 26 00:01:48,810 --> 00:01:51,600 use and then also taking boundary height. 27 00:01:51,900 --> 00:01:56,120 So this is all coming from that boundary object that we're showing here on the right hand side. 28 00:01:56,130 --> 00:01:57,960 And this can be boundary top. 29 00:01:57,960 --> 00:02:00,030 So that will set the vertical position. 30 00:02:00,210 --> 00:02:06,600 We're setting the horizontal position and we also need to set some random width and height for that. 31 00:02:06,660 --> 00:02:08,940 So doing a style and width. 32 00:02:08,940 --> 00:02:15,300 So we're generating all of the properties, the attributes, the style attributes that are available 33 00:02:15,300 --> 00:02:18,400 for this element dynamically within this function. 34 00:02:18,750 --> 00:02:25,980 So anywhere from Tensas started out at 40 and we'll have random Isar of 10. 35 00:02:26,280 --> 00:02:33,150 So it could be anywhere from 40 to 50 wide and we'll do the same for this could be as well anywhere 36 00:02:33,150 --> 00:02:35,100 from 40 to 50 wide. 37 00:02:35,160 --> 00:02:37,230 So the height and the width will change. 38 00:02:37,230 --> 00:02:39,480 Position of left and right will change. 39 00:02:39,820 --> 00:02:42,670 Also, let's set up a border radius to it. 40 00:02:43,350 --> 00:02:48,570 So again, using that style value, we can set a border radius. 41 00:02:49,230 --> 00:02:54,420 We've got a lot of options within JavaScript in order to set the same thing that you would expect to 42 00:02:54,420 --> 00:02:57,950 see when you are creating that within your success as well. 43 00:02:58,890 --> 00:03:06,510 We can also set our cursor so the cursor value, so setting that to a pointer, it's probably is easier 44 00:03:06,510 --> 00:03:06,990 to do it in. 45 00:03:07,590 --> 00:03:09,750 But of course this is a JavaScript course. 46 00:03:09,750 --> 00:03:11,600 So we want to really focus on JavaScript. 47 00:03:11,700 --> 00:03:14,790 Another one that we want to do is maybe do a background color. 48 00:03:15,180 --> 00:03:17,600 So this is expecting a hex value. 49 00:03:17,910 --> 00:03:24,620 So make sure that we put the hash in front and we're going to generate a random hex value number. 50 00:03:24,640 --> 00:03:32,520 So doing math, random and then two string and base 16 and then we're going to substring that minus 51 00:03:32,760 --> 00:03:33,310 six. 52 00:03:33,310 --> 00:03:35,270 So that will return back a hex value. 53 00:03:35,700 --> 00:03:37,810 So show you how that works within the console. 54 00:03:37,830 --> 00:03:45,180 So if we take math random, we get a decimal zero dustbowl and a whole bunch of digits after that. 55 00:03:45,210 --> 00:03:52,350 If I take math random and if I do to string C, that turns it into a string and I can change the base 56 00:03:52,350 --> 00:03:53,010 for the string. 57 00:03:53,020 --> 00:03:59,300 So if I do base 16, it's going to use it's going to create a hex value for the string. 58 00:03:59,340 --> 00:04:02,150 And so now all we need to do is chop off. 59 00:04:02,160 --> 00:04:07,080 We only need the last six characters and that's where we can utilize substring. 60 00:04:07,380 --> 00:04:10,380 So applying one more method to there and that's the substring. 61 00:04:10,530 --> 00:04:16,740 And we want to take back the last six, which effectively generates a random hex value. 62 00:04:16,920 --> 00:04:21,330 And all we need to do is add in the hash and that's going to give us a random background color. 63 00:04:21,540 --> 00:04:23,140 So that's how that formula works. 64 00:04:23,170 --> 00:04:27,910 That's a really effective way to generate a random color within one line of code. 65 00:04:27,960 --> 00:04:35,310 Also adding in a border so border, we can set it up just as we would with our regular access, or we 66 00:04:35,310 --> 00:04:41,760 can set border solid block to make sure we get all of those parameters in there and also want to track 67 00:04:41,760 --> 00:04:49,680 in when the start time is so whenever our element gets created, whatever value for that. 68 00:04:49,800 --> 00:04:53,300 And then lastly, let's add it to the visible area. 69 00:04:53,580 --> 00:05:00,270 So using container append child, we can append that div to the main container element. 70 00:05:00,280 --> 00:05:02,110 So that will make it visible on the page. 71 00:05:02,460 --> 00:05:05,120 So let's refresh and start game. 72 00:05:05,340 --> 00:05:08,570 And then there we've got our element showing up and popping up. 73 00:05:08,940 --> 00:05:14,490 So coming up next, we need to make this clickable so that we can track how long it takes the user to 74 00:05:14,490 --> 00:05:16,250 click the element as it shows up. 75 00:05:16,740 --> 00:05:17,760 So that's coming up next. 76 00:05:17,970 --> 00:05:25,500 So go ahead and practice applying style properties to your element that you've just created using create 77 00:05:25,500 --> 00:05:25,950 element. 78 00:05:26,160 --> 00:05:32,760 Add in some objects to it and also take a look at using math random because it gives you the ability 79 00:05:32,760 --> 00:05:36,760 to randomize some of these values and make them different all the time. 80 00:05:36,990 --> 00:05:41,550 So now we can see that these are elements that are popping up are always going to look different. 81 00:05:41,880 --> 00:05:45,990 And you could play around with some of these numbers to make them bigger or smaller, to really see 82 00:05:46,260 --> 00:05:48,960 what different effects you can get out of the bathroom. 83 00:05:49,050 --> 00:05:52,200 So coming up next, we're going to add interaction to that element.