Narrator: Welcome back to project number three
of this section,
and this project is going to be the most exciting one
because now we will take everything that we learned
in the first two projects to a whole new level
and build a really cool and amazing game.
And this is the game that I was talking about
and it's called the pick game.
Now this project here
is really going to be a practice project.
So a project where you and me
will together reinforce all the skills that you have learned
up until this point,
because remember from the last section,
reinforcing knowledge is one of the most important things
that you can do to learn, right?
So in this project,
I will do a little bit less explaining than before,
at least about the stuff that we already learned,
because we are really just practicing here. Okay.
Now, if you're in a hurry and just want to learn the basics,
please feel free to skip this project.
But of course, I would still really advise you
to code along with me here,
but now let's see how this game actually works.
And in fact, you can try that along with me
because this time I hosted this demo, on a live website.
So you can access that by pickgamev2.netlify.app
And the link is also in the read me file
of the repository for this course on github.com.
But anyway, this is more of a real game now
because we actually have two players.
So you can play this with a friend or something
or just against yourself.
So the idea is that we roll a dice.
And so now I'm playing number one.
So this one is now the active player.
So I roll a dice,
And so you see that I rolled a two.
And so this number gets added to my current score down here.
Okay. So this is my current score for the current round.
And this year is my total score.
And so let's see how that's going to work
so I can roll the dice again now if I want to,
and now I rolled a four
and that four got added to the two that it had previously.
So now that's six and now I can choose to hold this score.
So if I click this button,
this score of the current round
will get added to my total score,
which right now is zero.
And so when I hold a den, my score will be zero now.
And we switched to player number two,
and now I can click roll dice again.
So we rolled a two and I can hold again.
And so now play it two as two points.
Now, the thing here is that whenever we roll a one,
we lose all our current score
and it's then the next players turn.
And so that's why sometimes we need to hold or points.
So let me show that to you.
And indeed, I rolled a one right away.
And so now it's player two again.
So let's keep rolling the dice.
And I will now again, wait for one
so that you can see that all my current score will be lost.
So that's a lot of points already there.
And now I rolled a one and a player lost all the points.
Okay. So I could have hold the points
and then I would have added all these points
here to my score.
So let's do that here
and again, a one.
And so yeah, now here I hold
and I edit them to these points.
And I think by now you get how the game works, right?
So the first player to reach 100 points then wins the game.
But I will now not demonstrate that
because that's going to take too long.
So we have these two buttons here,
and then we also have just like in the previous game,
a way of resetting the game.
So when I click here, as you might expect,
this dice will disappear
and all the scores are set back to zero.
And to understand this game a little bit better
for this application,
I designed something called a flow chart.
So let's take a look at that.
And this is what a flow chart looks like.
So basically it's a representation
of everything that can happen in the application.
So on the left side, we have in yellow,
the possible actions that the user can take.
And then from there we see what happens in the application.
As one of these options is basically chosen.
So as one of the actions is executed.
So whenever the user rolls to dice,
so clicks that roll dice button,
then we need to generate a random dice roll.
Then we displayed at dice roll,
and then we check whether it is a one.
If it's not one,
then add the dice roll to the current score.
And of course this play it, right?
So that is exactly the behavior that we saw
when we tested out the game earlier. Right?
Now, if the dice roll is actually a one,
then simply switch the player.
And so in this case, the dice roll will not get added
to the current score.
Next, the other option is that
the user wants to hold his score.
And then we add the current score to the total score.
Once that is done,
we must check if the score is above or equal 100,
because as I said, the player wins whenever the score
is at least 100 points, right?
And if it's not, then we just switch the player
and the game keeps on running.
Finally, when the user chooses to reset the game ,
we simply set all scores to zero
and set the player number one,
back to being the starting player.
All right. So this is a very nice way again,
to visualize what happens in the application.
And it's also a very good guide for us
to actually implement the application in coat.
So usually whenever I built a project like this one,
I like to draw a flow chart like this,
and it doesn't need to have all this precision
right from the start.
So we can just start out with a rough sketch
without the complete plan of what we're going to build.
But anyway, this is very helpful
before we actually start writing code
to have a good idea of what we will have to do.
And if you want to build your own flow charts
that look like this,
you can do so on diagrams.net.
So that's where I designed this flow chart,
and it's a very nice online drawing application
that is completely free and really easy and fast to use.
Now. Okay. And so now as always let's open up
or project folder. So I have to start a files here already,
and now I need a new vs code window.
And then I just opened a Pitt game.
And this time, since the application needs this whole space,
let's actually put it here on a separate desktop.
And then as we attest out,
I will just move here from one desktop to the other.
So let's make this bigger this time.
And so like always, we already have all our files here,
so let's take a look at them and JavaScript.
So here as always just the use strict,
then here we have all the styles
that we need for the application.
And we will take a look at them as we go
through the project.
And then finally the HTML file.
Okay, and they also actually included
the image of this flow chart here for you,
so that you can maybe take a look at it yourself
to make sure that you really understand how it works.
Okay. So take a minute or two to maybe test the app again
and check out this flow chart before we actually start.
Alright. Also, I wanted to show you that I have one image
here for each of the dices.
So dice one looks like this,
like two, it looks like this
and so on and so forth.
So we have one image for each of the possible six numbers.
So that's going to be important later,
but now let's just start to,
write a little bit of code here.
Let's get ourselves a new terminal here
so that we can take a look at the application
as it looks right now.
Interior. I like to minimize it a little bit life server.
Okay. And so this is our life version of the pic game.
So again, we are here at this local host at port 8080.
And if you are seeing some other ports,
that's no problem at all, as long as it works.
So maybe you still have something running on this port,
maybe from the previous project.
And then this project will run on another port.
That doesn't really matter.
So right now in the starting point,
this is what our application looks like.
But of course in the demo,
we don't see the dice in the beginning
and we don't see any scores here.
Okay. And so the first thing that we're going to do
is to basically put these scores to zero
and make this dice disappear.
And so that's going to be basically
the starting condition here.
So let's go back here to the coat.
And let me just tell you where
these initial values come from.
So this is the 43 score that we just saw,
and this is the 24.
And so let's take a moment to inspect the code
because as you already know,
we need the class names.
And in this case also the IDs to then identify
and select the elements.
So basically here we have one of these sections here
for each of the players
and you see that the first one is player zero.
And the second one is player one.
And I will explain you why
the players are called zero and one
instead of one and two,
probably in the next lecture.
So it will make sense by then.
okay. But now about the scores,
they are stored in this element
and in this one here.
And so you'll see both of them have to score class,
but then each of them has a different ID.
And so this time we need to select these two elements
using their unique ID instead of a class name.
So that's the idea of score dash dash zero
and score dash dash one.
So let's do that.
So const score one and then document query selector.
So this is the way that we learned it before.
And now here, we actually need the hash symbol.
So score zero. So actually I'm interested in zero here.
Okay. And so again, now we used the,
this hash because that is the selector for the ID
and a dot that we used to use is only four classes. Okay.
Now, when we're selecting using an ID.
Then there's actually another way of selecting an element.
And right now that's exactly what we're doing.
So we're interested in IDs, not in classes.
And so let me show you that other way of selecting elements
that only works by ID.
So let's call this one, score one,
and then again, we use document,
but then we're not calling query selector.
Instead we call get element by ID.
And then here, we just pass in the name of the ID.
So just score one.
So without the hash here,
because now we're not writing a selector,
we are only passing in the name of the ID
that we're looking for. Okay?
So this works exactly the same as this,
but the get element by ID
is supposed to be a little bit faster than query selector,
but I guess that's only relevant
if you're selecting like thousands of elements at once.
So usually I like to always use query selector,
but I still wanted to show you that there also exists
get element by ID. Alright?
And actually let's call these two here, score zero L,
which stands for element
because you might then confuse maybe this variable
here for simply the score value of players zero. Right?
And so in this case,
we are making it really clear that this is a dumb element.
So score is zero L all right. Okay.
So we're selecting these here
and now we can use the variables to do something on them.
And again, we do that
because probably we will need to do something with
these selected elements multiple times
throughout the application.
And so we just defined them once at the
top of our file instead of having to select
the same elements over and over again.
So let's just add a comment here.
And comments are also a good way of structuring the code
and also of planning how we will build some features.
So selecting elements.
And so in this project,
we will try to get a little bit more used
to actually write in comments. Alright?
Anyway, let's now set these initial conditions
of score zero element.
And then as you know, we use text content
and then we set it to zero. Alright?
And now the same four score one score,
one element.textcontent to zero.
And here we are specifying numbers, not strings,
but JavaScript will then automatically convert them
to strings to actually display them on the page.
So if we go now to the application
that should already be in effect,
and indeed you see that now the scores are actually at zero.
Great. Now all we have to do is to hide this dice here.
And so let's do that using the technique
that we learned in the previous project,
which is basically creating a hidden class
and then add that hidden class here at the beginning. Okay.
So let's go to our style.
And right now I don't have that class yet.
So that's just created
and I can close the terminal here.
Let's just do that at the very end.
So we create a class like this
and then we just set the display to none.
So that's exactly the class that we had in the
previous project as well. Okay.
And so now we can just add that class
to the dice at the beginning of the game.
So that's easy enough,
but first we need to select it.
So let's call it dice L for the dice element.
Let's check out what the ID or the class of it is.
And here we see that it's actually just this dice class.
So this image with his class of a dice,
so document not query selector dice.
And so here we have to start in conditions
and now let's simply do dice element.classlist.add.
And now simply this string,
which contains the name of the class
and that's the hidden class, give it a safe,
let's check it out.
And indeed, now the dice has gone
and let's see the HTML here, actually,
you now indeed we have the hidden class here,
besides the dice class. Great.
And then as we implement the roll dice functionality,
of course, we will want the dyes to be visible.
And then we can simply remove that class
again from the dice. Okay.
And actually that's exactly what we're going to do
in the next video.