Intro
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 src
called constants
then, inside the directory you've just created (src/constants
), create a called index.js
with these contents:
export const FrontEndConfig = {
GAME_BACKGROUND_COLOR: "#122A67",
};
export const StatusMessages = {
DRAW: "DRAW!",
YELLOW_TURN: "YELLOW PLAYER'S TURN",
RED_TURN: "RED PLAYER'S TURN",
YELLOW_WIN: "YELLOW PLAYER WINS!",
RED_WIN: "RED PLAYER WINS!",
};
export const StatusAreaConfig = {
HEIGHT: 100,
PADDING_TOP: 40,
INNER_MARGIN: 28,
INDICATOR_WIDTH: 16,
};
export const BoardConfig = {
WIDTH: 284,
HEIGHT: 242,
MARGIN_TOP: 20,
MARGIN_LEFT: 18,
HORIZONTAL_PADDING: 18,
VERTICAL_PADDING: 16,
SLOT_MARGIN: 8,
SLOT_WIDTH: 28,
BACKGROUND_COLOR: "#1D48B8",
SLOT_OUTLINE_COLOR: "#225FFD",
};
export const TokenColor = {
NONE: "#D9D9D9",
YELLOW: "#EAC02B",
RED: "#EA2B2B",
};
export const PlayAgainButtonConfig = {
WIDTH: 128,
HEIGHT: 40,
TEXT: "Play Again",
MARGIN_BOTTOM: 80,
BORDER_WIDTH: 1,
BACKGROUND_START_COLOR: "#225FFD",
BACKGROUND_END_COLOR: "#1D48B8",
};
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Four in a row</title>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
<script src="src/index.js" type="module"></script>
</body>
</html>
Referencing The Canvas In Javascript
Next, you'll reference the <canvas>
element that you've added to the page from JavaScript.
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:
export default class FrontEnd {
constructor(game) {
this.game = game;
}
}
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.
In the FrontEnd
class's constructor, obtain a reference to the canvas element on the page and store it in a class field called canvas
:
export default class FrontEnd {
game;
canvas;
constructor(game) {
this.game = game;
this.canvas = document.getElementById("canvas");
}
}
Next, set 2 more fields called width
and height
to the canvas' width and height respectively:
export default class FrontEnd {
game;
canvas;
width;
height;
constructor(game) {
this.game = game;
this.canvas = document.getElementById("canvas");
this.width = canvas.width;
this.height = canvas.height;
}
}
This will come in handy later once you start drawing on the canvas.
Lastly, set the background of the canvas:
import { FrontEndConfig } from "./constants/index.js";
export default class FrontEnd {
game;
canvas;
width;
height;
constructor(game) {
this.game = game;
this.canvas = document.getElementById("canvas");
this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
this.width = canvas.width;
this.height = canvas.height;
}
}
Now let's see if you've referenced the canvas element properly.
In src/index.js
, update the code to create a new instance of the FrontEnd
class:
import { FourInARowGame } from "./gameLogic/index.js";
import FrontEnd from "./FrontEnd.js";
let frontEnd = new FrontEnd(new FourInARowGame());
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 FrontEnd
class:
import { FrontEndConfig } from "./constants/index.js";
export default class FrontEnd {
game;
canvas;
width;
height;
context;
constructor(game) {
this.game = game;
this.canvas = document.getElementById("canvas");
this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
this.width = canvas.width;
this.height = canvas.height;
this.context = this.canvas.getContext("2d");
}
}
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 FrontEnd
class:
export default class FrontEnd {
// ...
enableHiDPISupport() {
// Get the DPR and size of the canvas
const dpr = window.devicePixelRatio;
const rect = this.canvas.getBoundingClientRect();
// Set the "actual" size of the canvas
this.canvas.width = rect.width * dpr;
this.canvas.height = rect.height * dpr;
// Scale the context to ensure correct drawing operations
this.context.scale(dpr, dpr);
// Set the "drawn" size of the canvas
this.canvas.style.width = `${rect.width}px`;
this.canvas.style.height = `${rect.height}px`;
}
}
Now call the enableHiDPIDisplaySupport()
method in the FrontEnd
class constructor:
export default class FrontEnd {
constructor(game) {
this.game = game;
this.canvas = document.getElementById("canvas");
this.canvas.style.background = FrontEndConfig.GAME_BACKGROUND_COLOR;
this.width = canvas.width;
this.height = canvas.height;
this.context = this.canvas.getContext("2d");
this.enableHiDPIDisplaySupport();
}
// ...
}
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 100
:
export default class FrontEnd {
constructor(game) {
// ...
}
start() {
this.context.fillStyle = "white";
this.context.fillRect(20, 20, 50, 100); // fillRect(x, y, width, height);
}
}
Now go back to src/index.js
and call the start()
method on the FrontEnd
class instance that you created:
import { FourInARowGame } from "./gameLogic/index.js";
import FrontEnd from "./FrontEnd.js";
let frontEnd = new FrontEnd(new FourInARowGame());
frontEnd.start();
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.
Thanks for reading!
Top comments (0)