Welcome back in this lesson, we are going to be setting up our game board, let's start with a little
bit of success, setting up our game play area.
Having a height of two hundred pecs and having a width of two hundred pixels, adding in a border so
that we can see where our game play areas, we also need to set up a series of boxes that we're going
to use in order to show the colors and give the user an area to see another class where we've got a
width and the boxes are going to be 50 percent white height is going to also be 50 percent so that we
end up with four boxes, a cube with four boxes and the color of the text inside the box, we can make
it black out in a text line.
So a center align the text and we're going to display them as in line block elements so that they stuck
together.
And then lastly, we've also got an active area.
So we want to have blocks that are active in this case.
We're going to update the border color.
So instead of a black border, it's going to be a red border.
And the font color is also going to be red.
Next, going down to our Timal set up an area that we can add and send messages to.
So this is how we can communicate with the player of the game and we're going to start by press start
button.
So that will be our message to the players.
We've got our start button.
We've got our game area now going into our Java's setting up our main objects to contain the elements
from the page using document query selector.
We're going to select the elements first.
Select the one with a class of message.
I'll make the screen a little bit more this way.
Space within the editor.
So first we're getting an object called message that's going to contain the element with the class of
message.
Also, we're going to have one for the game area and this is going to be where all of our game area
content is going to be.
So using query selector, again, selecting an element with a class of game area and then lastly, selecting
our button.
We only have one button so we can select the button using the button tag and then add let's add in a
click event for the button.
So using add event listener, the event that we're listening for is a click to an anonymous function
here.
So whenever the button is clicked, they're going to output for now.
Will output in the console, the word works.
So let's go ahead and try that out.
So refresh.
And now when we click the start button, we see that works gets put in the console.
So we're ready to proceed to the next step.
So go ahead and build out your gameplay area.
Select your elements, bring them into JavaScript as JavaScript objects, so they're ready to be used
within the scripting that we're going to be building out in the upcoming lessons.
Also adding an event listener to your button so that your button is fully functional and your game is
ready to start play and you'll be ready to move on to the next lesson.
We're going to continue to build out this application.