Welcome back in in this lesson, we're going to be introducing animation so far we've got a game where
we've got some limited interaction and when we click the dynamically created element, we can change
its color.
But it's not very interesting because it's always in the same spot.
It's not moving around, not doing anything too exciting.
So let's make this more interesting.
And, of course, animation makes everything interesting.
So selecting our window object, we're going to add a request animation frame.
And this is the ideal solution for creating a loop of constantly invoked functions.
So creating a function, we're going to create a function called move, and this is where it's going
to handle all of our animation.
And this one here is going to be the initial one that's going to kick off our animation frame.
So creating a function, having it called move, this is where all the magic is going to happen.
So let's set up some random speed that we can add in using math random.
And I know when I say random always mean that we're looking at JavaScript to create some random values
so we can do 10 plus 15.
So it's always going to be a minimum of at least 15 and it could be all the way up to 25 or it could
stay at 15.
So it's always going to move at at least the speed of 15.
Next, we need to select our element that we want to move around.
And this is the one that we gave it a class of box.
We could as well pass it into the move object.
But an easier way and more efficient way is to select our box element and using document because now
it's available within the document object.
We can use query selector.
So that's my favorite methods to use, selecting the element with a class of box.
So that's going to bring us within this function.
So allow us to utilize that element within this function.
So that's the box element.
This is the one that we created dynamically in the previous lesson.
We can get its boundaries as well so we can get bounds of it, creating a variable for that.
And this is the boundaries of the output area.
So we know what our parameters are, where we can move the box to, because we do want it to stay within
that output object and for now, a console log outbound.
So these are the boundaries for our box where we're going to move it around to see that with get bounding
client rectangle.
We get a lot of really good information and this is the information that's contained within this output
object.
So we've got a bottom, we've got a height left, right, top width, x and Y position.
So exposition is eight, Y is 24.
And we know that we want to keep our parameters in here.
And this is really good, especially if we're moving things around that we have these values to work
with because we don't want to move it off of screen or off of the visible area.
And keeping this in mind as well, there's all other ways to calculate this, but this is one of the
easiest ways by doing the get bound and client rectangle so we don't have to add in that's left position
and then add the width to get the right position.
We have that all within that one object.
So next thing that we want to do is we want to set a series of steps.
So when it's moving around, we want it to move within one direction or the other other other.
It's going to be very zigzaggy and jaggery.
So creating another object as we created that element and we're going to give this one a name of steps.
This can also utilize random multiplying it by a value of twenty.
So it will take twenty steps in either direction on a random basis.
So next we can take that element object and we can take that steps value and decrease that by one.
And next check to see if steps is less than zero.
And if it is that we're going to reset the number of steps and this is going to also account for the
directions.
We're going to set a default direction for the element using math floor and then math random because
we want to have a random number of random direction and there's four possible directions.
So anywhere from zero to three is what we want to return back here.
So our direction is going to change.
So taking that element direction and we also need to change that whenever our box hits zero.
So we need to have that same two values here as we do whenever the box sets zero, whenever we want,
change directions and reset the number of steps.
So this is giving us a random direction that we can move the box in.
So for now, we can consider log out that information so we can do box direction.
And as we refresh one of the things that we do need to add in, if we want to complete our animation,
we have to call our animation frame again.
So make sure that we add that in and this is going to be done at the end of the animation.
So basically this function.
Is going to call itself and it's going to continue to loop and animate the movement, so you can see
here that we're constantly counting down and we're getting a direction.
The direction is staying for a number of steps.
And that's actually what we want because we want it to move in one direction or the other.
We don't want it to be all zigzaggy and jaggery.
So adding in that direction, the next thing that we could do is we can check to see what the direction
is and what direction we're supposed to be going.
So taking our direction, element, object.
So taking direction, just refresh this and I'm not going to get rid of this one because we don't need
to constantly see this direction because a little bit distracting.
They're running in the console, the box direction.
We're checking to see if the direction is zero and we can apply any direction to this.
And also we're going to check to see if box X position is less then.
And we've got our bounce that we set that bounce object.
So this is the boundary object.
So we're checking to see if Box X is less than the bounce right position minus one hundred.
And if it is, then that means that we can increment the box X value by whatever speed is.
So we're going to add speed value.
So we're not going to see a whole lot happening quite yet.
And the interesting thing is when we update its style position and we're going to set our top style
to be equal to our box y plus picks and the picks is really important and also correspondingly so we
can move the horizontal.
And all this is resetting is the style position of that element.
And that's how we're getting the animation and movement.
So see that it is moving and it's only moving to the right so far and it's hitting the boundary and
it's not moving any further.
So let's add in the ability to move in the other direction.
So adding in if the balance if the direction is one, we're going to check to make sure that balance
is larger or that X is larger than balance left.
And if it is, then we can subtract the speed.
So this will get us to move left.
Let us to move right.
And two more directions to go.
So next, let's check to see if our direction is to and if direction is too.
And as long as we're accounting for all the direction, that doesn't matter which one you use as zero
one, two, three, it doesn't really matter.
There all have equal chance of being displayed.
So checking to see our box y position and we're checking to see if box y and this one is another one
where we have to formulate the bounds value and we're using a bottom and bottom, just like.
Right.
Should have a subtraction of 100 which will give us the ability to move it down to just above the visible
area.
And this is going to be Y plus.
So it's not minus because we're moving it down.
So now our element will move down.
It'll get stuck there at the bottom because we don't have the ability to move up quite yet.
And that's the last one that we need to include.
So the last direction is the moving of up.
And this one just like moving left, we just have to make sure that bounce Y is greater than the bounce
top.
And if it is, then we can keep subtracting off of it.
So now we've got our element and it's moving around rapidly on the page.
And the objective really is to kind of click it and try to catch it, click it.
And once you do, then we can update and change the color so we can also introduce one more variable
into there so we can have something like score.
And I'll show you how to do that in the upcoming lesson where we've got an X and Y and a score and we're
increased score every time we click the element still to come.
So go ahead and add in the ability to move your element around the one that we created that box element
and make sure that stays within the boundaries of its parent.
And you're ready to go to move on to the next lesson.