First of all, great job following along with this series! You've completed the first 50% of this tutorial so far!
In the previous blog post, you reorganised the project in preparation for work on the front end of the game. This is the post where the work starts.
Here's your expected outcome at the end of this tutorial:
Here's a breakdown of the image above:
- Top part: Status Area - Displays the colour of the current player's turn as well as a status message explaining what's happening in the game.
- Middle part: Game Board - Displays where players have placed their tokens in the game.
- Bottom Part: Play Again Button: Restarts the game. Shows up when the game is over.
This post will be focused on setting up the canvas - where each part of the game will be displayed on.
Setting Up Constants (Again)#
In the same way that you created a constants file for the game logic, you'll also need to create one for the front end.
Create a new directory in
constants then, inside the directory you've just created (
src/constants), create a called
index.js with these contents:
; ; ; ; ; ;
Setting Up The Canvas#
Adding Canvas To The Body#
First, you'll need to add the
<canvas> element to the
<body> of the page. It'll need to have a
width of 320, a
height of 480, and an
id of "canvas". You do this in
index.html. It should look like this:
Four in a row
Next, you'll reference the
Create a new file called in the
src directory called
FrontEnd.js. This will handle the front-end logic of the game.
Add the following code to the file you've just created:
The constructor of the
FrontEnd class has a parameter called
game which contains an instance of the
FourInARowGame class. The
FourInARowGame instance will be stored in the
FrontEnd class in the
game field. This will be used to update and retrieve the core game's state.
Next, you'll set up the canvas.
FrontEnd class's constructor, obtain a reference to the canvas element on the page and store it in a class field called
Next, set 2 more fields called
height to the canvas' width and height respectively:
This will come in handy later once you start drawing on the canvas.
Lastly, set the background of the canvas:
Now let's see if you've referenced the canvas element properly.
src/index.js, update the code to create a new instance of the
; ; ;
If you run an HTTP server and check the address it's pointing to, you should see a blue rectangle (That's the canvas you've created!):
Drawing On The Canvas#
Let's proceed to draw on the canvas. To do this you'll need to get a 2D canvas rendering context. Another way to think about this is that you're getting a set of art supplies (paints, paintbrushes, stencils, etc.) made for creating 2D drawings.
You'll set this rendering context object in the
context field of your
Next up, you'll need to scale the canvas for high-resolution displays to prevent issues with blurry drawings.
First, create a method called
enableHiDPIDisplaySupport() in the
Now call the
enableHiDPIDisplaySupport() method in the
FrontEnd class constructor:
You're now ready to start drawing on the canvas.
Create a method called
start() in the
FrontEnd class and draw a white rectangle with a width of
50 and a height of
Now go back to
src/index.js and call the
start() method on the
FrontEnd class instance that you created:
; ; ; ;
Now, if you check your project with an HTTP server, in your browser, you'll see a blue canvas with a white rectangle drawn on it:
Congratulations, you've covered the basics of drawing using the HTML5 Canvas API!
In the next post, you'll draw the game board on the canvas.
That's all for now! 👋️