1
00:00:00,180 --> 00:00:05,460
In this lesson, we're going to build out more of the start sequence and introduce our character that

2
00:00:05,460 --> 00:00:08,420
the player is going to be playing, so the character is going to be a bird.

3
00:00:08,670 --> 00:00:10,280
So let's go ahead and create that element.

4
00:00:10,590 --> 00:00:15,540
So when we hit start, this is the best place that we can create that element.

5
00:00:15,870 --> 00:00:24,210
So using a variable called it bird document and using the create element method, we're going to create

6
00:00:24,210 --> 00:00:34,260
a div for the page and then using the set attribute, set an attribute of class and the class that we

7
00:00:34,260 --> 00:00:39,720
wanted to add to this element is going to be called Bird and then we'll do some styling with that class

8
00:00:39,720 --> 00:00:40,230
as well.

9
00:00:40,980 --> 00:00:43,500
In addition, we want to make a moving wing.

10
00:00:43,830 --> 00:00:49,830
So another element that we need to create and this elements can be a spin and we'll play a class to

11
00:00:49,830 --> 00:00:50,910
this one as well.

12
00:00:51,180 --> 00:00:59,700
So our wing and set attribute and the attribute that we're setting is class and within class, we're

13
00:00:59,700 --> 00:01:03,100
going to just set a class of wing to it.

14
00:01:03,750 --> 00:01:06,600
Next, let's append the wing to bird.

15
00:01:06,600 --> 00:01:11,820
So taking the bird object that we created, we're spending a child and the child that we're spending

16
00:01:11,820 --> 00:01:13,080
is that wing object.

17
00:01:13,470 --> 00:01:17,460
And then also we need to append our bird to our visible area.

18
00:01:17,730 --> 00:01:24,650
And we already created an area that we can add that into, and that's the game area within our document.

19
00:01:25,200 --> 00:01:32,640
So using the same method, append child, we're going to spend the bird to the game area.

20
00:01:32,640 --> 00:01:33,740
So see what that looks like.

21
00:01:33,750 --> 00:01:38,070
So we hit press start and we can go into inspect.

22
00:01:38,220 --> 00:01:46,410
And within our game area, you see we've got an element with Class A bird and it's also got a class

23
00:01:46,410 --> 00:01:49,590
of wingspan inside of it with a class of wing.

24
00:01:50,580 --> 00:01:52,440
Now, let's add in some styling.

25
00:01:54,560 --> 00:02:03,980
So it created one called Bird and we created one called Let's Do Our Wing First, so position absolute.

26
00:02:05,980 --> 00:02:11,350
We're going to set it as a default 10 picks and we're going to move this around using JavaScript.

27
00:02:11,360 --> 00:02:17,260
So these values, these are just default values that we're adding into it, setting a background color.

28
00:02:17,350 --> 00:02:22,300
I set the background color to be gold and make it slightly rounded.

29
00:02:22,300 --> 00:02:25,230
So border radius of five picks.

30
00:02:26,230 --> 00:02:28,620
So let's see what happens and we click it.

31
00:02:28,630 --> 00:02:32,130
So there's our wing and now we need to add in the bird as well.

32
00:02:32,830 --> 00:02:34,900
So the wing is actually sitting inside of the bird.

33
00:02:35,680 --> 00:02:39,520
So position absolute and we'll position it off of the bottom.

34
00:02:39,550 --> 00:02:48,760
So how about we do 100 picks off of the bottom left, 50 picks setting a width of 50 x 40 picks.

35
00:02:48,790 --> 00:02:52,680
So it's not as high as it is wide, adding in a line height.

36
00:02:52,810 --> 00:02:54,610
So in case we want to do some writing in there.

37
00:02:56,310 --> 00:02:57,840
Set up font size.

38
00:02:59,660 --> 00:03:09,020
And then adding in background image, they were going to start using a UFO and we do have PMG called

39
00:03:09,020 --> 00:03:10,690
Bird, so we're going to add that one in.

40
00:03:11,320 --> 00:03:15,970
And lastly, let's do a background size as cover.

41
00:03:16,520 --> 00:03:20,150
So refresh hit start and there's our bird.

42
00:03:20,630 --> 00:03:26,840
So coming up next, we need to animate him and animate him with the keyboard and also create his wings

43
00:03:26,840 --> 00:03:27,440
flapping.

44
00:03:27,710 --> 00:03:30,350
And we can do all of that within the animation frame.

45
00:03:30,590 --> 00:03:32,510
So I know I've mentioned that a few times.

46
00:03:32,510 --> 00:03:37,610
And next lesson, we're going to bring that into our project and you're going to see how that runs.

47
00:03:37,790 --> 00:03:43,400
And it creates loops within a particular function that we can continuously loop through.

48
00:03:43,400 --> 00:03:45,990
And then that's where we can add all of our animation into.

49
00:03:46,340 --> 00:03:47,660
So that's all coming up next.