In this lesson, we're going to be setting up the variables and the values that we're going to be using
in the upcoming lessons in order to run the game.
So we do need to set some default variables.
So setting up the values and these are the values of the particular options that are going to be hidden
within the cases.
So you can make up your own array.
And I'm just going to create a random one, add in around 16 different values.
And we're also going to make this game very dynamic and flexible.
So even if we want to remove or want to add in additional values, that's going to be as well possible.
So that's all of the different values that we have available to us.
And then also setting up a few objects as well to contain some of the page objects.
And I usually find that this is useful.
So I set things up as global objects that I can access and use throughout the game.
So this is going to contain all of the page content.
The main page object content.
Another one.
Another global object that's going to be called game.
So this is where we can add in all of the main game content that we're going to go through.
This is our main game object that we're going to utilize.
So page object is going to be related to the elements on the page.
The game object is going to be related to the game objects.
There is one function that I did want to introduce, and because we do need to have the values sorted
numerically.
And if you take this values and log out instead of console, log ready will log out the values and then
we'll do a values sort.
This is basic JavaScript array function and then also do the console log valves and we'll output that.
So what do you think is going to happen here when we do sort and if you said that it's going to do the
one 100, you're correct.
So even though these are numbers within the array, it treats them as strings.
So a lot of these array functions are string based.
So it converts the items within the array to a string and then it does the sort.
And that's why you're getting the ones, the twos, the threes, the force, the five sixes and so on.
So that's why you're getting that type of support.
So this is actually not what we want.
And I want to have a default sort of those values happening initially when we load the values so that
in case we do have some of the numbers that they're off as we're going to be building the game, we're
going to be iterating through those numbers.
And we do need to have them sorted numerically with the first one being the first one in the array and
then the largest number being the last one having the largest index in the array.
We can take the Vals array and then do a sort of use the sort function.
But we're going to pass in some parameters into the search function.
And this is a really neat trick with this function where when we're sorting through that, we're setting
the parameters on how we want to return it.
So we're returning the values of A and B that are being passed in.
We're subtracting A from B, so going into the Mozilla developer network.
So we have the sort sorts, the array in place and it returns back the sorted values.
So we already saw this, that it's able to sort it and it sorts it within and numeric a string format.
So we saw that we've got the one hundred thousand twenty one thirty.
So you can also pass in and do a compare function within the area so you can pass in the first element
and the second element.
So that's what we do.
And what the prototype does is when we pass in the parameters, it does the comparison.
There's more information about how that comparison works.
And so when we compare numbers and instead of strings, they compare the function, it can simply subtract
a B from A, and this means that the following will sort the array in ascending order.
And if we want to do it in descending order, we just do a B from A and that's going to do the descending
order.
So we're able to update the orders by simply updating which one we're subtracting from where.
And there's more information available.
And there's also the shorter format with the arrow expressions as well that can be done.
So this is a way around that and a way to get it back to looking at the numbers instead of looking at
the string values.
And as you can see, that now error rate is sorted properly and as expected, also, let's load some
additional parameters.
So now that we've got our game object, we can use that and set up the offers.
So this is at what point in the game?
We want to have offers showing up and these are again going to be added in.
So when there's 14 left, when there's four left and we're trying to make this game as dynamic as possible,
add another method in at the end here, which is going to be a filter.
So it's going to create a new array of all the elements.
And that passed the test.
And the test is that we want to make sure that we're opening up the cases and when we have cases left.
So we've got this many cases, as we've got within the vows.
And we know that if we've got less than the vows length, then we're going to run out of cases.
So there's no point to.
I have an offer at case 100, if we don't even have one hundred cases, so we want to make sure that
we filter out that and we don't throw any errors.
So I'll leave that hundred in there.
So just so you can see what I mean.
And the whole objective here, again, is to be as dynamic as possible with the game parameters so we
can update the number of values, we can update the order of the values are being presented with the
sort function.
And this one is creating the game offers array, but it's basing it on how many values we've got left
and how many values we have available.
So similar to what we just did with the sort, we're going to do a return and we're returning back the
value of X only if it matches the parameter.
And that's looking at and making sure that it's less than the value of vowels length.
And then one last one where what's similar to what we just did.
So taking those game offers and I want to sort them and because these are numbers we have to pass in
the parameters into sort function in order to be able to compare depending on the values.
And I want to actually order it.
So in this one, we started with the smallest number going to the largest, and I want to reverse sort
that.
So do you know how to do that instead of doing a return A plus B?
So let me show you what's going to be output.
If we do A, return A plus B and I'll copy the offers into the console so you can see the uptake take
place.
So this this is the offer.
So starting at one, two, four, 12 and 14.
But we are going to be starting that.
We need to have 14 first because we're starting out as we remove cases, the numbers are going to go
down and we want to be able to match at a particular point throughout the game that this is when we
want to send an offer through.
So that's where we need to reverse this.
And instead of A minus B, the comparison is going to be B minus A, and when I do that, the order
of the array changes and we've got the largest number first going down until it reaches the smallest
number.
And also notice as well that the one hundred got removed from that offers array because we don't have
one hundred cases.
Well, that if we have 16, what's going to get removed?
But then if I add in another number here, then it's going to automatically add that offer in at number
sixteen, the offers loaded.
So these are when the offers are going to be presented to the player and this is going to be fully dynamic
now because it's going to be dependent on how many values are within the values array and we've got
all of the parameters ready to go.
So this is all we need.
So now that we've set up all of the initial game parameters that we need in order to run the game,
and then, of course, these are dynamic now so they can be updated.
And as they're updated, they're going to change how the game is played and how we load the content
of the game.
And you can use whatever values we want within the values array as well as the game offers array.
Now, that's fully dynamic.
It will update itself and fully function within the gameplay.
And in this lesson, it was really about the sorting of the arrays that we can pass in parameters in
order to do a compare function in the array.
And there's more information about about it at the Mozilla Developer Network within the array prototype
sort method.
And it's going to give you more information as well as some really cool examples to find out more about
how this works.
So once you've set up your base game starting values, you're going to be ready to move on to the next
lesson.
We're going to apply some styling, so let's make this look nice, working on the different models,
working on the game screen so that we can be ready to do the communication in JavaScript to the player.
So that's to come in the next lesson.