Welcome back.
Great job on making it through this section.
So in this section, we set out to build a nice interactive application that could allow us to practice
getting our mouse coordinates.
Also creating elements on the fly, generating elements using JavaScript and creating mouse event listeners
in order to create AI interaction, as well as animating our elements that we've created.
And that's what we've done within the earlier lessons.
So now it's time to do a quick code review.
I always do suggest that you try the application out, test it out, make sure that it is working as
intended, and once that is, then you're ready to launch your application.
Running through the code, we set up a little bit of styling so that our application looks a little
bit more interesting.
We added in a little bit of HTML, so trying to keep it as a minimal as possible as the scope of this
course is really about JavaScript and getting more familiar with how to interact with the DOM using
JavaScript.
So we started out by selecting our elements on the page into JavaScript objects that we can make use
of later on within the code, also setting up some default variables that we added in a bunch of event
listeners.
So these were event listeners on that output element.
So this is the main core element where the gameplay happens.
We added in three different mouse events we've got most enter mouse leave and mouse move.
Mouse Move is actually tracking the cursor position X and Y coordinates in relation to the page, and
we're outputting that for the user to see.
So making sure that the DOM content has loaded and once it's loaded, we create an element dynamically
using create element, method and JavaScript added a class to it, appended it to our visible area so
the user can see the element that we created, then selected and added in our offset left and offset
top into the X and Y coordinates of this element object.
And so these were added in as a variables that we can utilize.
Another variable that we created was temp color to give a background color so that we could always reference
it and go back to it once we switched the color.
So over here on the mouse enter and this is one of the event listeners that we added into the dynamically
created element.
We update the background color to be read whenever we're on top of the element, and we also want it
to have an option to turn it back to its initial temporary color.
And that's where we had to use the temp color variable that we set here.
That element gets clicked.
Then we want to generate a brand new temporary color, apply it to the background, also incrementing
the score and then outputting the score so it's visible to the user.
Next, we want to create some animation with that element.
So adding in a couple variables that were generated using math random so that it's can be randomized
for each time that we generate them and then setting off the request animation frame.
So this kicked off the animation frame, which was contained in a function called move.
We generated a random speed using both random once again selected the element that we want to create
the interaction with, which was the element with the class of box, got the boundaries of its main
parent.
So this is where our box is going to be moving around in so that we got the boundaries so that we don't
go out of bounds for the element created, decreased the number of steps.
So this was one of those variables that we created.
So using steps gives us the ability to regenerate a direction and we're picking a direction at random.
So any of the four possible directions, that could be a random value generating around a value of steps.
So this is how many steps that will move in that one direction and keeping this all random.
So it's more interesting for the user and they can't they won't be able to expect what's going to happen
next and where it's going to move next.
So giving them all equal opportunity to move in any direction.
So that's up, down, left or right, restricted within the boundaries of the parent.
And then we updated those variables that we set the X and Y variables and using those X and Y variables,
we updated the style properties of that element box.
So if we go to inspect and I'll make this a little bit bigger so we can see it better element that we
created with the class of box and that's sitting with an output can see that this is constantly changing.
So the top and the left is constantly updating and constantly changing.
And then whenever we click it, we're actually updating that background color as well.
And that's all contained within the style property of that element and all dynamically set using JavaScript.
And then to complete the animation we call that move animation function once again and do everything
over and over and over again, creating smooth animations and transitions for our application.
Thanks again for taking this section and I hope you've enjoyed it as well if you have any questions
or need clarification on the content that was covered.
I'm always happy to help address those and answer those questions.
Source code has been included, so I do encourage you to take the source code, try it for yourself,
and get familiar with JavaScript methods that have been covered within the course.