Hey, are you ready for another challenge, challenge number three, and I call this one keyboard mover
where you're going to use JavaScript in order to create an element.
So whenever the DOM content has loaded, then you create an element on the page and then using that
listeners for the key down and key presses, take those key presses and move the element around the
page, depending on if which arrow key is being pushed.
So if the arrow key up is being pushed and the player moves up along the vertical axis and then X or
the left or the right along the horizontal axis and do this all using JavaScript.
And I've got some starter code for you posted here.
So add into that Lessner for the key down function and then taking those key presses and applying the
movement appropriate to the element.
And you can create the element into the player object using player as well as the contents of the elements,
just like the example down here, and then update the style properties of the element.
You can pause the video and also give you a quick sneak peek at the source code that we're going to
be walking through.
So positive you here, try this out and I'll walk you through the solution coming up.
And this is all I can note, that this is all just a JavaScript that's creating this on your marks.
Get your editor ready and let's do this.
So, first of all, let's create an object.
So this object is going to contain all of the player information.
You can set some default parameters in here where we've got value for speed and let's set speed at one
hundred.
We can have our starting value for X.
Also set this one hundred and starting value for Y, also set it up one hundred.
So now when I look at player, you see that I've got all of that object information and we're going
to use this when we create the element.
So this is all going to be created dynamically using JavaScript.
So we want to make sure that we are ready and adding an event listener to the document or we could add
to the window object.
Let's go ahead and still add it to the window object out event listener.
And that we're listening for in this case is dom content.
And whatever this gets, whatever the DOM is ready, we're going to invoke a function called build.
Let's create that function.
So build and we've got no parameters were passing in.
So we're constructing an element for the page and this is the element that's going to move around.
So taking the player L so this is a new part of that player object and then using document create elements,
let's create div and then we can update also player X and player Y.
We already have these set, so you don't necessarily need to have this unless you want to have this
all and maybe create the object and create the separately.
So it gives you some more flexibility doing it this way.
So I've added it in.
So taking the L so player L is going to be that freshly created element and we can then set style properties
to it.
So we need to set its position as absolute.
So this will give us the ability to move it around the screen so that when I refresh and I go to player,
you can see in player I've got the start of that element that I'm creating.
So this is that dynamic element that's being created and we don't have it on the screen yet, but we
need to apply some more properties to it before we add it to the screen.
So updating its style, we should give it a width so that we can actually see it, of course, and a
width of hundred picks.
So how about 100 picks?
Because we've been using picks for everything, style and height as well.
So you guessed it.
One hundred picks for this one as well.
So now we've got style properties for that element.
Also, let's create a background color for it so that we can actually distinguish it from the rest of
the page.
So again, selecting that element that we created and background color and the background color, it
can be red.
And if you want bonus points, you can generate a random background color because I know you know how
to do that.
And then player.
And then lastly, we just need to position it on the page.
So updating its style.
So now we've got quite a lot of style going on here and taking player X value and just adding pics to
it because it's expecting a string value here.
So that's the player top position.
And then also we need to set its player left position and using player y value within the object.
And then lastly, let's add it to the page so that we can actually see this element.
So append child and then passing in the element that we want it to append is within the player element.
So let's see what happens.
And there we've got our player.
So this is being built whenever the document object is running.
And we did have some starter code that I am going to do a quick walk through in order to add.
Keyboard event listeners and the only event listener that we're adding to the document object, adding
an event, listener and event that we're listening for is key down.
So whenever the key is pressed down, then we're going to be invoking this function.
And this also can be an anonymous function passing in the event object.
And then we can get the key value that was pressed within the event object using key code and for now
a console log, whatever the value of key is.
So now when we refresh and I'm pressing the arrow keys sets up down left right now we just need to apply
conditions so that we can move the element around accordingly.
So we're checked to see if key is equal to thirty seven.
And if it is, then what we want to do is take player X and subtract from it the player speed value.
So it's all dynamic.
So we've got the speed set there.
So it's easy to adjust if the need is there.
Let's account for the other keys.
So we've got the four other keys, so we've got thirty seven and so thirty seven.
If we're clicking that's the left key.
Thirty eight is up, thirty nine is right and forty is down, so thirty eight is going to be up.
So we need to affect the player y values.
That's the player y axis and we're subtracting on that one as well.
Thirty nine is going to be going back to the x axis instead of subtracting.
We're adding.
I think this part is fairly straightforward, that we're pressing the keys and depending on which key
is pressed, we're updating the value of the player X and the player Y and then all we need to do is
reset those values of the player element because we still have it within the player object that tied
to that element.
So all we need to do is update the value of player left.
So taking whatever is contained within player X and then adding that value.
And then lastly, there's also the player top and player Y and updating those values.
Let me make this bigger.
And now whenever I key press, you can see my key presses down at the bottom.
I'll make the smaller so you can see the key presses in the console.
So whatever key I'm pressing, you can see that it's moving the elements around.
So that's how you create a quick key press element mover.