In this lesson, we're going to build out more of the start sequence and introduce our character that
the player is going to be playing, so the character is going to be a bird.
So let's go ahead and create that element.
So when we hit start, this is the best place that we can create that element.
So using a variable called it bird document and using the create element method, we're going to create
a div for the page and then using the set attribute, set an attribute of class and the class that we
wanted to add to this element is going to be called Bird and then we'll do some styling with that class
as well.
In addition, we want to make a moving wing.
So another element that we need to create and this elements can be a spin and we'll play a class to
this one as well.
So our wing and set attribute and the attribute that we're setting is class and within class, we're
going to just set a class of wing to it.
Next, let's append the wing to bird.
So taking the bird object that we created, we're spending a child and the child that we're spending
is that wing object.
And then also we need to append our bird to our visible area.
And we already created an area that we can add that into, and that's the game area within our document.
So using the same method, append child, we're going to spend the bird to the game area.
So see what that looks like.
So we hit press start and we can go into inspect.
And within our game area, you see we've got an element with Class A bird and it's also got a class
of wingspan inside of it with a class of wing.
Now, let's add in some styling.
So it created one called Bird and we created one called Let's Do Our Wing First, so position absolute.
We're going to set it as a default 10 picks and we're going to move this around using JavaScript.
So these values, these are just default values that we're adding into it, setting a background color.
I set the background color to be gold and make it slightly rounded.
So border radius of five picks.
So let's see what happens and we click it.
So there's our wing and now we need to add in the bird as well.
So the wing is actually sitting inside of the bird.
So position absolute and we'll position it off of the bottom.
So how about we do 100 picks off of the bottom left, 50 picks setting a width of 50 x 40 picks.
So it's not as high as it is wide, adding in a line height.
So in case we want to do some writing in there.
Set up font size.
And then adding in background image, they were going to start using a UFO and we do have PMG called
Bird, so we're going to add that one in.
And lastly, let's do a background size as cover.
So refresh hit start and there's our bird.
So coming up next, we need to animate him and animate him with the keyboard and also create his wings
flapping.
And we can do all of that within the animation frame.
So I know I've mentioned that a few times.
And next lesson, we're going to bring that into our project and you're going to see how that runs.
And it creates loops within a particular function that we can continuously loop through.
And then that's where we can add all of our animation into.
So that's all coming up next.