Welcome back, and this is the lesson you've all been waiting for, where we're going to make some something
happen on screen, we're going to take our car that we're creating that div that we've just created
and we're going to move it around on the screen.
So there's a few things that we need to add and prepare for adding it in as a position absolute.
So of course, with success position absolute gives us the ability to provide left top coordinates for
the positioning of an element we can also position at from bottom.
So do that.
And for now we're going to set bottom to be 100 picks and we'll also position our left position.
So our left position by default will be 200 picks.
Also going to take the opportunity to set a width of this particular element.
So setting the width of the element to be and setting the height of the element to be 150 picks, also
background color.
So once I'm adding in content here, so we'll have our little blue car and I think I'm actually going
to make this a little bit smaller.
And now next, what we want to do is add that class into the element that we just created.
So where we've got our car that we created in the last lesson.
This is a car object of the div that we're creating dynamically.
We're going to use set, attribute and attribute that we're setting is a class.
So you can do this if you don't have any classes already added to that element, you can just set a
default class in the class so they to be setting is car the one that we just created.
So let's try that.
So there's our blue dot or blue square and we want to ultimately now move that around the page.
So we see that that's a fairly long and big car.
I'm going to make the smaller because I do have the screen zoomed in so I can zoom out a little bit
on the screen so that it's a little bit more manageable.
And while that is a long car, so I don't want to make it a limo or anything like that.
So I'm going to shorten that a little bit.
There's our car and we want to move this element around depending on what keys are being pressed and
where already have the play game function operating that we set up in the earlier lesson.
So now it's a matter of determining what a key is pressed and updating that element position.
So selecting our element, we've got our request animation so we can keep that at the end and now we
need to apply some conditions.
And within our conditions.
We're going to check to see the value of keys, so using that key object, we've got several option
objects there.
So we've got a key up to selecting the element using the document object query selector, and we're
selecting the element with a class of car.
So that's the one that we just created.
So now that we have it, so we need to also add in to our X and Y coordinates.
So taking the player object, we're going to have a value for Y you're going to increment this value
with for now, let's do a value of five and we can also set a value.
We can set a speed value there and then we can use that speed in order to control how fast we're element
is moving.
And as we're building it out, we're going to grab the X and Y coordinates of this particular object.
So Arrow Down is going to decrease.
That arrow left is going to update the player position.
So decreasing the X coordinates arrow right is going to increase the X coordinates.
So we've got a variable that we're tracking in the background that's going to be player X and player
Y, and I'll show you how to add that as well into our object.
And so as we're generating the car, we can take our player X value and set it by calculating where
the car object is and getting its offset position so we can get its offset left position.
And we need to do that after and then player y value is going to be car and we're going to use offset
top position and we'll consolmagno the value of players so that we can see what the value here is.
So when we start the game, preset some value and you can see that all the way up here that we're setting
the value of X to two hundred and Y to 280.
And this is actually going to correspond with the positioning of this particular element.
Now that we know which key is being pressed, we can adjust the position of that particular element.
So now it's a matter of taking the car and updating that element style, updating its left position
to be equal to player X plus so that those are always matching.
And we'll take also player style and top position and equal that to player Y plus picks.
And you can also double those as well.
So let's try that out.
So now when I press my arrows up and down and actually down is moving it up.
So we need to adjust that that up and down.
So that was a little bit of an adjustment there.
So now whenever I press and I can move up, arrow down, arrow left, right, I can also move them together
at the same time and have multiple combinations of movements.
So this is how you can create an element that moves around on the page depending on what arrows are
being pressed.
So coming up next, we need to extend on the gameplay.
So go ahead and add this into your project, try it for yourself.
And it's a matter of tracking those positions and then we can update them over here.
And it's if we need to make some additional updates to these values, that's why I kept them separate,
because we could have as well tracked the position, current position of car.
But I usually find doing it this way is a little bit more easier and it's a little bit more clear as
to what's happening and easier to read.
So that's why I introduced that second variable under player where we're setting that value to wherever
that particular element is located, off the offset left and offset top.
And then I'm introducing that positioning so that both of those match and we're updating the player
X and player Y position instead of the car position directly.
So go ahead and add this into your project.