Congratulations on making it to the end of this section, and I know we were fairly fast paced, so
that's why I always like to do a quick code review and go over some of the finer details of what we've
done in the earlier lessons in order to wrap up this section.
So, first of all, we started out by setting up our success and styling, tried to keep it to a minimum
with a little bit of adding of the styling to make it look interesting.
But we did keep it to a minimum as well as the HTML.
And of course, these ones can be created with JavaScript as well.
But usually I do like to have some HTML in order to kind of get the project started once we start the
project.
And you are welcome to update this so that it's all just JavaScript as well and you can easily create
these elements on the fly as we build out the rest of the game board instead of having them already
hard coded into the HTML.
So next it came to the JavaScript and this is what you came for and this is what the course is all about.
It's all about working and interacting with JavaScript.
We had to set some default variables in the beginning in order to have some values, in order to utilize
those in the upcoming lessons.
And we set a variable for blocks.
So this was essentially that element that is the player and this is the one that we're going to be manipulating
and moving as the player moves around the board.
We also have our score.
This gave us really easy access to the element with the class A score and then our game area.
And we also utilize the game area, the get bounding client rectangles.
This was really important because it gave us the barriers and the parameters that we needed to contain
in order to work within the game area.
It also helped to calculate what our game grid looked like.
So we've got our game box and we calculated how many X and how many Y.
So basically the horizontal and vertical squares that we needed in order to build our grid, we set
up a default variable called squares.
So this was to hold all of our elements, arrays in all of the elements that are the squares within
the game grid so that we could easily access them, manipulate them and update them within our JavaScript
code.
Then we set up some values for the players.
So these are some just generic values.
We've got the speed at 100 and we could also take this and utilize that within the box, offset height
and offset with if we wanted to.
So if you do have different heights and widths, you might want to have a speed for X and speed for
a Y if you want to extend on it.
Easiest way, of course, is to keep them both the same and then hardcoded at one hundred.
But if you do want to have some more flexibility in the game, you're welcome to update those values
and update them correspondingly and accordingly.
We set the document content loaded at that listener.
So this listens for whatever our document content has loaded like the name implies.
And once it does load, then that's where we fire off, build and build.
What that does is it's a function that creates our whole gameplay.
It creates the player character, the box adds the classic box, sets the starting X and Y positions,
updates the box styling, and then appends it to our game area.
So that's visible to the player.
And we also build out our grid within this function as well.
You could break this apart to separate it out, but for now, this is a really simple game and we've
got all of this happening within the original build.
So that's why we're just keeping it this way.
But of course, you could separate out if you get more complex with the game built also than we are
setting out and we're starting with the counter of one.
This is our first square.
We're looping through all of the game box X and Y, if that's the count, how many squares we need across,
how many rows, how many columns we need and we're building out the grid.
So creating the elements dynamically, using JavaScript, updating their inner HTML with the value of
counters so that we know that they've all got different numbers.
And then also taking that squares counter, adding our square class to that element and then finally
appending it to our game area.
So it's visible to the player and then update counter so that we always have a different value there
for the inter HTML.
So it makes them all unique and also helps the player better understand what's square there on.
Of course, then we launched the function make active and what make active does is it selects from all
of the squares that we just built randomly using that squares array, which is global, taking the length
value of it.
And we're checking to make sure that zero is not the selected random value.
And if it is, then we need to select again.
And also we're taking our player square and we're making sure that we're not selecting the same square
that the player is currently sitting on, because then you're going to not have smooth gameplay and
we can get rid of the console message.
We don't need that anymore.
And we're selecting and we're adding the class list of active also.
Then we're ending the function.
And if it's not, doesn't meet these parameters and we're crunching make active again.
So basically it will run this function until we get our desired.
Result, which is none of these are going to be true, so next we have our user interaction and that
is done with adding that listner for key up some of the user presses a key and the key goes up.
That's where we add our key function.
So we limiting it to only certain keys that we're going to be use utilizing.
And that's the left up, right down.
Now, you don't have to do this.
You can use it by the key presses and attaching values to those key presses, of course, and then checking
for those key presses.
But this is just another way to kind of make your code a little bit cleaner and restrict some of the
key presses.
And then you can, of course, add in different key presses and you can also have certain keys that
do the same thing.
So if we wanted to add in some character keys, that could move it left up, right down, we could do
it in this way a lot easier.
So that's another advantage to doing it.
This format sort of checking to see if the key code exists in our object.
And if it does, then we pass it into the handler function.
And this is where we're just processing in that key value.
We're getting the key value and then we're checking to see what the key value is.
And if it's left, then we're also checking to see it, make sure that the player hasn't gone out of
bounds.
And if they're good to move left, then we decrease the box value of X.
So this allows us to reset that value where we're moving the exposition and then we're also decreasing
the value of the square so that we're calculating out which square the player is actually on.
So this helps us avoid having to have collision detection, because once these two match wherever the
boxes and the player square is, then we can really easily select from our squares array and figure
out what square the player is on.
And then we need that, of course, to check to see if the player has hit the active square.
So those two do need to match.
We have our right and with right.
We need to also account.
So we've got our game area right position.
So this is the furthest pixel point on the game area, which is right.
But we also need to subtract our offset width of the box because otherwise we know that this box isn't
zero wide.
So we need to make sure that we're accounting for that and the same thing for the bottom so the bottom.
And we need to subtract the offset height in this case.
So that gives us the ability to keep the player in balance and then up as straightforward, just like
left.
We're just making sure to see that it's greater than the area top.
Next, we're setting updating the style properties of the element.
So this is what actually creates the visual movement.
We're updating that style value within the element of the class of box, and then we're using that box
X and Y variables that we set within the object.
And then lastly here, we're checking to see if the squares player squares so the player squares the
square that the player is on and the squares is the array that contains all the square elements.
So we checked to see if this element has a class of active.
And if it does, then we've found our target and then we remove that class of octaves so that we only
have one on screen at a time and we make another one and then we increment the score plus plus and also
we update the inner HTML of the score.
So essentially that's our entire application, fully functional and gives you the ability to move through
the board and select and find those green squares.
And I always do suggest that you play through it a few times just to make sure that you've got the functionality
that you were looking for.
And in this case, it does seem like everything is working as expected.
We even have the ability to dynamically adjust the height and the width of our game board and have our
functionality still there and working.
So go ahead and try this out for yourself.
Make sure that your own project is working the same way that this one is.
And if you do need any if you do have any questions or need any additional clarification, I'm always
happy to help clarify content as well as if I've got a lot of questions.
I'll actually add additional content into this course to help clarify any of the objectives that we're
covering.
Thanks again for taking the course and this section.
I'll see you in the next one.