Hey, welcome back.
How's it going?
Hope you're able to create a version of the game, this lesson, we're going to do a quick overview
of the gameplay just to make sure everything is working properly.
So we set out to create a game where we've got a start button.
And usually the best way to create the game is to do step by step, start working through.
And how your conditions of the game are going to work with the wind conditions are and what information
you need to present to the user.
So we start out with the game and we build out a game board.
So we've got all of the options underneath and we ask the player to start the game to select a case
and they can click from any one of the cases that are below.
So they've presented with 16 cases and this actually corresponds with the number of values we've got.
So we can actually add in any number of values and the number of cases will change.
You might want to apply a little bit of styling to that.
And then alongside the left and the right hand side are the hidden values that are contained in these
cases.
So the user selects anyone that they want.
So they selected number 11 and then the next move, what the player needs to do is now select three
cases.
So they select three more cases.
And too bad because that one was a high one and too bad again, because that was another high one and
great job and that was fairly low one.
So now my offer is low because I got rid of two of the high ones.
And the offer is a combination of all of these values divided by what is remaining.
So I can either accept it and walk away from the game right now at 22 or I could decline it and keep
playing.
So if I decline it again, I'm just clicking through randomly here.
So I don't actually know what the values are.
So second offer is an offer of thirteen, so it's getting even worse.
I'm not doing too good or I can select three more cases.
So how about I decline and I select three more cases and it looks like I got rid of the other good ones.
So right now I'm at offer number three and I'm at six.
So let's select three more cases and see what happens or we can decline it or we could accept six.
So it just seems to be getting worse and worse.
So I'm getting rid of some of the smaller ones.
I'm getting a great job and now I'm up to eight.
Or I can select one more case so I can decline it.
So I only have two cases left and I am also holding one case.
So that was the one that originally selected and I got rid of the large offer.
So now my offer is two.
I can accept it or I can decline it and it is the last offer.
So if I accept it, I walk away with two.
If I decline it, they just give me whatever's contained within the case.
And this time I walked away with one.
So I did the absolute worst I could do in the game.
And it's a good thing I can start the game again selecting another case and I can play through it as
many times as I want trying to optimize my gameplay.
So let's do a quick code review.
So we started out by setting up the index, the HTML file.
So this is our main structure file.
We determined what we want to present to the user and then how we're going to present it.
So we started out with basically that we wanted a three column website start button and then we've got
a couple models, which would be the core interaction for the user within the game.
Also applying some styling.
I'm not going to get into that, but I'm sure you can go through the styling and make it look a whole
lot better.
So this was just the basics in order to be able to present the content to the user.
And as I developed these games, oftentimes I don't like to focus too much on the styling, but in this
case, without styling, this game wouldn't really look very interesting.
So we had to apply some styling because it's a very wordy type game.
And then came JavaScript.
And of course, that's what you're here for, to learn more about JavaScript.
So we ran through how to construct our main app object, so that held all of our code within there.
We waited for the document content to load so same thing as J query on Ready.
So whenever the DOM content is loaded, we are ready to start interacting with it.
So the first thing that we did is we set up some of our game variables.
We did some calculations.
So use some of these newer features and JavaScript where we can filter and also sought so where we can
enter in some parameters and to sort and customize how we're doing the array sorting.
So we did that twice.
So one day, one time we sort it from high to low and the other one from where this one was from high
to low, and then this one was from low to high.
So two great examples also setting up some more game variables and then we got into the game place.
So this was all sitting in the in it.
So whenever the DOM content has loaded, that's all we want to set up and collect all of our objects
in a usable format.
So we create an object called Page that's stored all of the elements on the page.
So we don't have to constantly query into the DOM to select them.
And we also added our eventless and.
Here as well, so that was all set up, all of the interaction of the game and selecting of all the
page elements, so that way we could use them in the JavaScript.
So first thing we did is walk through how the player's going to start the game.
So we got rid of the start button, created a game board and set up some of these values and parameters
so that we're ready to go.
And also had a pop up message.
And this is the instructions for the player on what's happening next, built the two modal pop up.
So we've got pop up and pop up to this is the decision one.
And really they're kind of doing the same thing.
But the structure of the models is slightly different and it would take quite a bit of code to adjust
that.
So it's usually better to just take the shorter format and just create two separate models.
Here's the calculation which we're using within the offer pop up.
So when we start the game, first thing we want to do is build the game board.
So this one was a fairly complex set of lessons where we made some calculations on how we can make a
game board that's going to be dynamic depending on how much content we have to present, as well as
how much screen size we have to work with.
So we set up all of those calculations.
I know that was quite a bit and quite a bit of calculations right off the bat, but they seemed to work.
And of course, you can adjust them.
And the good thing about using variables is you can make adjustments and tweaks if you don't like how
it's being displayed and it will change how it's displayed.
So creating the elements, adding in the parameters into the elements.
So we added in and set them, styled them, position them and then added them onto the page.
And in this case, we're adding in those side elements.
So we're adding on the left side and the right side, breaking it down evenly between the two and calculating
out where the next one goes.
Then we're selecting an element randomly and pulling it out of our array or pushing it into our game
holding array so that we can reference it later on.
And then we constructing the element using a variable called maker and then also calculating where we're
placing it.
And if we're moving on to the next row.
And then the core gameplay was where we select the cases, and that was where we check what's within
the case.
And if in the case is we need to show what's in the case and we also need to calculate out how we can
move these values along within the cases.
And then most importantly, also what we can present to the user as the next step.
So make some calculations, use the various arrays where we're holding values that are in play and also
values that we've used.
And then also we're selecting the elements as we're constructing them.
So that made it really easy to hide the side ones and as well as to hide the main elements.
But of course, those ones are the ones that are clicked.
So a lot easier to detect and pick up.
We're passing messages back to the user so that they know what's going on and what's going on behind
the scenes in the code.
And that leads them to the next step where they get eventually they're going to get an offer.
And this is the decision point of the game where we within the close pop up.
So whenever they close the popup window, that moves them to the next step and if there's an offer there,
then the offer is going to be presented.
So that's where we got that offer condition.
And if the offer is there, then we run through all of the offer logic.
We calculate out how much content is left, how many, how much value is left in the hidden cases.
We divide it by the number of cases that are available.
So we create an offer for the player, make them choose whether they take the offer or if they want
to continue to play.
And then we also calculate out how many more cases they need to select until the next offer.
Or if it's their last case, then we let them know that as well.
So that's it for the game and the Game Logic.
And I hope you had an opportunity to try out some of the code.
And the really objective here is to just get comfortable with JavaScript, interacting with the DOM
and trying out some of these different functions that are very helpful as your coding and developing
your JavaScript code.
If you have any questions or comments, I'm always happy to hear from you.
Please let me know.
And as well, all of the source code is included and the best way to learn is just to try the content
out for yourself within your own editor and see how it works.
And I also do suggest that the way that the project is structured, that it's kind of a starter project
so that you can take on it and extend on it and really customize what's happening within the gameplay.
And I'm sure there's quite a few different directions that you can take the gameplay.
So please feel free to take the source code, try to first self extend on it and have fun with it.
And most of all, practice JavaScript and I'll see in the next one.