Instructor: Now it's time
to finally start coding up our game
and put into practice
what we learned so far about the DOM.
But, one more thing before that.
From now on, in all the coding lectures of a project
where we learn multiple new things
and concepts in one single lecture,
I will give you a quick summary like this one,
so that you can later reference what we did in each lecture,
and this will be very useful
in case that you need to ever come back
to these lectures later.
And that being said,
in this lecture we are going to learn
how to create our fundamental game variables,
how to generate a random number,
how to manipulate the DOM,
and how to read from the DOM.
So here we are back in our JavaScript file.
Let's create some empty space here.
Okay, so one thing that I didn't mention yet so far
is that this game is actually called The Pig Game.
So if you try to Google this,
you will then also find these exact same rules
and also some variations that we'll maybe talk about later.
Okay, well let's start.
So we need to first create a couple of variables
to keep track of the most important things
happening in our game.
And probably the most important thing of all
is the score for each player.
Now, I could go ahead and create a variable
for each player like this,
score1, set it to 0.
and score2 and set it to 0 as well.
But, we want to keep things clean,
and so I only want one variable.
So how are we going to do this?
We are going to use an array.
So I'm just going to call this one scores
and set both scores to 0 in the beginning, right?
Okay, and I also want a variable for the round score.
And this only needs to be one value
because we only have one score at a time,
one round score at a time, right?
So, roundScore
equals 0.
Now let's keep our code a little bit more organized,
so instead of doing it this way,
I'm actually going to declare all of these variable up here
like this,
so our scores and roundScores
and then remove the bar from here.
Okay, just like this.
So these are the variables for the scores.
What I also need is a variable
which will tell me which
is the current active player, right?
And this variable is to keep track of the player
that is currently playing.
So let me declare it here actually.
So activePlayer,
activePlayer
and then I will set it to 0.
So 0 will be the first player
and one will be the second player.
And I'm doing it this way
because later we will use this variable
to read the scores out of this array
and since this array is zero based,
we need the zero for the first element here
and then the one to read or write the second element.
Okay, so these are the basic variables that we need for now.
We will probably add some later,
but it's enough for now.
So let's now think about the dice.
So in order to create the dice,
we need to calculate a random number, right?
So let's call it dice.
And of course, as you know I need to declare it here.
So, dice, and now I'm going to use the math object.
And the math object is a JavaScript built-in object
that has a lot of properties and methods
for mathematical constants and functions
that can be very useful for us
to do this kind of calculations.
And the random one is one of them.
But let me actually show it to you in the console.
So I'm just going to set this to some value,
and then come back later here.
So to open the console, open Google Chrome
and actually I will simply open my file here,
so the index.html file,
which will then open our app and our user interface.
Okay, so here we have it.
So this is the default,
so when we open this we actually already have some
pre-filled numbers here,
as we can see in our HTML here.
So you see here, 43 is the score for player 0,
and 72 is the score for player 1.
Okay, but back to the console.
I'll hit Inspect
and then head over to the Console.
Now let's start by using the Math object.
So math. now there's a very handy method called random,
which basically gives me a random number
between zero and one.
So if I run this again, it will give me another number,
and another, and another, and another.
So these are all different, right?
Now, I don't want a number between zero and one, right?
I want a number between one and six.
So the first thing I'm going to do
is to multiply this value by six.
So let's clear the console.
So if I multiply this by six,
then we will have a number between zero and five, right?
So 0.9, 4.6, okay,
but you see the problem here
because these are decimals,
but we don't want decimals,
what we want is an integer, right?
So there's another very handy function, a math object,
which is called floor,
and the floor method
simply removes the decimal part of a number.
So let's test it.
For example, 4.6 will become four.
Okay, so we should do now is to use this
with the math random times six, right?
So I'm going to use math.floor
of math.random times six,
which is what we had before.
And now, this will give me a random number
between zero and five.
So zero, three, one, two,
two, one, four, four, three.
Okay, so as I said,
this will be a number between zero and five,
but we want from one to six, right?
So all we need to do now to make this perfect
is to simply add one.
Okay, so now this will give me a nice number
between one and six.
So let's now copy this,
and I did this in the console
so I could show you the facts
of the random number generator.
But now we want this in our code.
So I'm coming back here and paste it here.
So now our dice variable takes this random number
each time that it's defined.
So that's now console.log as dice.
You can close up the console.
Actually, you can't of course.
All right, so six
and if we now reload this,
then this time we have five, three, six.
So as you see, this is a random number now.
Okay, so this was the first thing.
Now the next thing is to actually do some DOM manipulation.
So let's do that.
So as I said in a theoretical lecture,
the object that will give us access to the DOM
is the document object, right?
So let's use that, document.
Now there are a couple of methods
that we can use to select elements from our webpage,
and the most useful one
and the one that I use all the time
is querySelector.
So again, I need to use the dot and then querySelector.
All right, and how does querySelector work?
Well querySelector is real easy to use
because it lets us select stuff
exactly the way we do it in CSS.
The only difference is that it only selects
the first element that it finds,
but there's a solution for that
that I will show you later.
But for now, what you need to know
is that it's really easy to select things with querySelector
because if we know how to select stuff in CSS,
then we can do it with querySelector.
So let's now select something from our page.
And what I want to do is to select this text here
and put the value of our dice right here.
So that we don't have to open up the console anymore
to see our value,
but instead we can print it right here.
So in our HTML, we see
that this 43 is right here.
So in order to select this, we need to use this id score 0,
and if we wanted to do the same thing for the other player,
which is player 1, then we'd have to use a score 1.
But now, all we need is score 0 here.
So we need a string here and then as you know from CSS,
in order to select ids, we use the hash symbol
and then simply score 0,
and that's it.
So now we have selected the element.
Now if want to change the text in this element,
then we need another method,
which is the text content method.
So textContent, and now we can simply say
that this should be the dice,
which is the variable that we define up here.
So I can now remove this, and check out our webpage.
So let's now really close the console
and reload this.
And now actually the dice appeared here,
not where I wanted it, not down here,
so let's reload this.
Okay, so the value appears here,
but it's no problem, right?
So, six, six,
and six again, and now two,
and five, all right.
So this is actually working,
not the way we intend it to,
but it's still working
because we actually had to select current,
current 0, not score 0,
because score is the global score and not the round score.
So let's put it in the current, great.
Now right in the beginning,
we defined a variable called activePlayer, right?
So this was to keep track of the player
that is currently playing,
and we're going to use this variable
to read and store values here,
but also this number here is used in our HTML.
For example here, so player 0 for score 0 and current 0.
And down here we have 1, 1, 1.
So we can also use the current player variable
to select stuff, right?
All we need to do is to build our string here.
So I can do current
and then plus activePlayer, right?
Because of type coercion, JavaScript will then convert
all of this to current 0, if this is 0,
but if it's 1, then it will be current 1,
which is exactly what we had before,
but now it's more dynamic
because then we only have to write it once.
So when we change the active player,
then the score will be printed in the other layer.
So let's test this.
So let's set this to 1,
and let's see how this works.
Okay, so now we have it here.
Let's try this again, roll the dice again.
So six, one, and two, and so on.
Okay, cool.
So what we did was to simply change the content
of an HTML element here.
Now to change the content of the selection,
there are actually two ways.
So we used the first one here,
which is textContent,
but there are two ways.
And the textContent that we have here
can only set plain text, so no HTML.
But if we want to put some HTML
also in the selected element,
then we have to use the inner HTML method
instead of the text content.
So let's see how that could work.
Let me comment this out,
and write it again.
So, document.querySelector
and I want again the current one.
What I'm going to do is like this,
activePlayer and now instead of textContent,
I'm going to use innerHTML.
And now I will write some HTML,
which of course needs to be a string once again
because if I would just write it like this
without being a string,
then the JavaScript parser would think
that it's just some JavaScript code,
which of course, if we have something like this,
then this is of course not JavaScript
and we would have an error.
So, every time we want to write some HTML here in our code,
it needs to be a string.
So let's now use the em element here around the dice value,
which will then emphasize it.
So basically, it will be an italic text.
So dice and then close this element.
So let's see what happens now.
All right, so now we have this italic text here.
So it's slightly to the side, right?
It is number four.
For six and so on and so on.
Okay, so what would happen if we would simply do this
with the textContent method that we used before?
textContent, so let's reload this once again
and then we would have all this text here
because once again with this method,
we can only set text and not HTML.
So then it would interpret all of this HTML code
as plain text.
So this is not what we want.
So this was just to illustrate you,
set it back to innerHTML,
and I will comment it here
because what we want really is this.
Okay, so we just did our very first DOM manipulation.
Which means that we used this querySelector method here
to manipulate, to change,
values and elements of our webpage.
Now we can also use this method
to actually only read elements from a webpage
and then store them in some variable for example.
So let's now do that.
I will create some space.
So let's simply create a random variable,
and this is just to show you
var x and once again, document.querySelector
and let's now use something else.
For example, the global score here, right,
which is 43.
So again, this is an id, so I use the id selector
that we already know from CSS
and then score 1,
and this time I'm just going to write it out like this,
or actually score 0,
because this is just to show you
how we could use a querySelector the other way.
Okay, and now the textContent.
So this time we don't set it to equal anything
because, again, this is just to read the value
or the content of the element with this id, score 0
and then store it here into variable x.
So let's quickly console.log x,
so that we can see that it also works this way around.
So I am going to hit Command + Alt + I
to bring up the console
and let's now reload the page,
and here we are.
So 43, which is the value that we read from here,
stored in our x variable
and then printed right here to the console.
So this works not only for setting,
but also for reading.
And in this case, when we do it like this,
we say that it's a setter
because we set a value.
And in this case, we say it's a getter
because we get a value.
All right, now there's only one more thing
that I want to show you in this lecture,
which is that we can also use the querySelector
to change the CSS of some element.
So let's now use the document object once again,
querySelector, which will return a selection
and I'm going to go back to the webpage.
And what we want to do now
is to hide this dice here right in the beginning,
so when we open up the game,
we don't want to see this dice
with this random number here, right?
So in CSS, we do that by setting the display property
to none, right?
So let's do that.
So in our HTML,
where do we have the dice?
And it's right here,
so it's this image here
with the dice class.
So this time we have not an id, but a class.
And to cite the class, it is the dot selector.
So all we need to do is .dice.
All right, so this gives us our selection,
and now instead of changing or getting new content,
we want to change the style.
So we first need to use the style method
and then the CSS property that we want to change,
and it's as simple as that.
So as I said, we want to change the display property
and set it to none.
So we write display
and then set it to none.
And that's really it.
So if you remember what CSS looks like,
let's take a look,
so this here is the property
and this is the value.
And in JavaScript what we do is
we use first the style method
and then this is the CSS property
and this is the CSS value
that we attribute to this property.
So let's see if this actually works by reloading this,
and yeah, here we go.
So our dice is now gone.
If we now Inspect this page,
let's actually do this,
and go here to our dice,
then you can see that the JavaScript what we did
was to basically changed the inline CSS
and set the display to none here.
So we also can see it in our HTML,
so we now have the style attribute here
and the display was set to none.
Okay, and that's it for this lecture.
Now, the next step would be to actually display the value
each time that we click our nice button here, right,
because right now, nothing really happens,
but what we want is to show our dice here
and to show our score
and right now, nothing of that happens.
So let's do that in our next lecture.