DEV Community: Colin Kiama

Git Kingdoms - Feel confident about contributing to open-source projects

Colin Kiama — Sat, 18 Nov 2023 00:15:48 +0000

Introduction

I’m pretty comfortable with collaborating in open-source projects however, this wasn’t always the case. A couple of years ago, I was intimidated at the idea of contributing to someone else’s project publicly.

I used to think that I was the only one who felt like this but after asking people about this, I’m starting to suspect that many people feel the same way (Not a large enough sample size to verify that this is true across the board).

The downside of people feeling too intimidated to contribute to projects is that we miss out on many contributions that could advance open-source projects forward.

On the flip side, there are bad actors in the open-source community who don’t feel intimidated. These people waste maintainers’ time and slow down projects.

Hopefully, this guide will make maintainers’ lives easier by encouraging higher quality contributions.

Maintainers Are Human Too

Maintainers get their roles by:

Being one of the people who initially created/founded the project they are currently taking care of
Being granted the role through the recognition of their contributions
Being hired to be a maintainer

In all these cases, maintainers don’t owe you anything!

They work on projects in their free time or get paid to maintain projects by their employer. You aren’t the one paying.

Even donating doesn’t entitle you to make demands about the direction of the project (unless otherwise stated).

To make their lives easier, maintainers may add contributions guidelines and issue templates to their projects. This also helps contributors provide more detailed and useful information to maintainers about issues. These templates may also trigger automations too.

Status Quo

As you can see, there are plenty of tasks that maintainers do in projects. Some of them are doing these tasks in their free time.

It’s important to respect their time. Their free time could be reduced at any so please try to make their lives easier so that they can make the most out of it.

If you still don’t understand why you should respect maintainers’ rules and guidelines, then consider the following analogy.

Each project under a maintainer/user’s name is part of their kingdom. Since it’s their kingdom, they decide whether your contributions can be included into their projects so you must follow their rules to be able to contribute to the project.

If you don’t follow their rules, you’ll find that it will take longer for your changes to be reviewed than other contributors who are following the maintainer’s rules and guidelines. Your contributions could possibly be rejected or never reviewed!

If you don’t agree with the way maintainers run a project then there is a solution! Fork the project!

By forking the project, you have a copy of the changes made to the project up until the moment you forked it. You are free to apply your own changes on the existing work done and pull down changes from the upstream project over time.

You are free to manage your fork in whatever way you wish to do so!

Apologise Later

We’re human, we’re not perfect. We make mistakes sometimes.

Fortunately, we do understand this. Measures are in place in projects to reduce the impact of mistakes. Maintainers do appreciate the help.

If you have read through the contribution guidelines of a project and can confirm that you’ve followed all the instructions accordingly in your contributions, go ahead and submit your changes.

Any mistakes you’ve made will be addressed in feedback. The positive intent of our contribution is clear.

Conclusion

I believe that there is no need to be afraid of contributing to open-source projects. Especially if you have good intentions.

Bad actors don’t aren’t afraid so you should not be afraid either.

A Time-Saving Git Alias - "git sweep"

Colin Kiama — Fri, 01 Sep 2023 07:46:49 +0000

I never remember the command for cleaning my remote branches so I decided to create an alias for them.

The alias

git sweep

This is a shortcut for the git fetch --prune command and a script that finds branches marked as gone then deletes all of them. There's more detail about the process here: https://www.erikschierboom.com/2020/02/17/cleaning-up-local-git-branches-deleted-on-a-remote/

Setting the alias

You can use set them using the git config command or edit the git config file directly.

Here's the command to set the alias with the git config command:

git config --global alias.sweep "! git fetch -p && git for-each-ref --format '%(refname:short) %(upstream:track)' | awk '\$2 == \"[gone]\" {print \$1}' | xargs -r git branch -D"

Here's what the config file should look like with the alias added:

[alias]
sweep = ! "git fetch -p && git for-each-ref --format '%(refname:short) %(upstream:track)' | awk '$2 == \"[gone]\" {print $1}' | xargs -r git branch -D"

Special Thanks

Thank you Erik Schierboom for providing the solution. Hopefully, this gets added directly into git one day. This alias is super useful for maintaining your repositories.

Making Four-In-A-Row Using JavaScript - Part 9: Play Again (Finale)

Colin Kiama — Sun, 09 Jul 2023 12:34:23 +0000

Intro

In the previous blog post, you added the status area to the game. Players and spectators now clearly understand what's happening at any time during gameplay.

In this post, you'll add the ability to restart the game without having to refresh your browser.

You'll do this by adding a "Play Again" button to the game.

What Is The Play Again Button?

Let's take one more look at the mockup of the finished game:

The "Play Again" button is a button that:

Is only visible when the game ends (a player wins or the game ends in a draw).
Restarts the game and disappears when clicked on.

Creating The PlayAgainButton class

Just like the other components you've added so far, the "Play Again" button is also a game object.

In the src/components directory, create a file create a file called PlayAgainButton.js.

In that file, create a class called PlayAgainButton that extends from GameObject:

import GameObject from "./GameObject.js";

export default class PlayAgainButton extends GameObject {

}

You are also going to need some constants specific to this component too. Import PlayAgainButtonConfig:

import GameObject from "./GameObject.js";
import { PlayAgainButtonConfig } from "../constants/index.js";

export default class PlayAgainButton extends GameObject {

}

Next, add the drawing logic for the button's background. Add renderBackground() to the PlayAgainButton class:

export default class PlayAgainButton extends GameObject {
    renderBackground() {
        const backgroundGradient = this.context.createLinearGradient(this.x, this.y, this.x, this.y + this.height);
        backgroundGradient.addColorStop(0, PlayAgainButtonConfig.BACKGROUND_START_COLOR);
        backgroundGradient.addColorStop(1, PlayAgainButtonConfig.BACKGROUND_END_COLOR);

        this.context.fillStyle = backgroundGradient;
        this.context.strokeStyle = `${PlayAgainButtonConfig.BORDER_WIDTH}px black`;
        this.context.fillRect(this.x, this.y, this.width, this.height);
        this.context.strokeRect(this.x, this.y, this.width, this.height);
    }    
}

Then, override the clear() method from GameObject to also take into account the button's borders:

export default class PlayAgainButton extends GameObject {
    // ..

    clear() {
        const clearRectX = this.x - PlayAgainButtonConfig.BORDER_WIDTH;
        const clearRectY = this.y - PlayAgainButtonConfig.BORDER_WIDTH;
        const clearRectWidth = this.width + PlayAgainButtonConfig.BORDER_WIDTH * 2;
        const clearRectHeight = this.height + PlayAgainButtonConfig.BORDER_WIDTH * 2;

        this.context.clearRect(clearRectX, clearRectY, clearRectWidth, clearRectHeight);
    }
}

Now to add text to the button, add renderText() to the PlayAgainButton class:

export default class PlayAgainButton extends GameObject {
    // ..

    renderText() {
        this.context.fillStyle = "white";
        this.context.font = "16px Arial";
        this.context.textAlign = "center";
        this.context.textBaseline = "top";

        const textMetrics = this.context.measureText(PlayAgainButtonConfig.TEXT);
        const textHeight = textMetrics.actualBoundingBoxDescent;

        // Calculation ensures that text is displayed at the vertical center of the button
        const finalTextY = this.y + (this.height / 2) - textHeight / 2;

        this.context.fillText(PlayAgainButtonConfig.TEXT, this.x + PlayAgainButtonConfig.WIDTH / 2, finalTextY);
    }
}

Add the render() method to the PlayAgainButton class:

export default class PlayAgainButton extends GameObject {
    render() {
        this.context.save();
        this.renderBackground();
        this.context.restore();

        this.context.save();
        this.renderText();
        this.context.restore();
    }

    // ..
}

Rendering The Button

You'll now add the "Play Again" button to the game.
First, add the PlayAgainButton class to src/components/index.js so that it can be imported from there:

import Board from "./Board.js";
import StatusArea from './StatusArea.js';
import PlayAgainButton from "./PlayAgainButton.js";


export { Board, StatusArea, PlayAgainButton };

Now switch to src/FrontEnd.js. Import PlayAgainButton and PlayAgainButtonConfig:

import { FrontEndConfig, BoardConfig, StatusAreaConfig, StatusMessages, PlayAgainButtonConfig } from "./constants/index.js";
import { Board, StatusArea, PlayAgainButton } from "./components/index.js";
import { Constants } from "./gameLogic/index.js";

export default class FrontEnd {
    // ..
}

Add the playAgainButton field to the FrontEnd class:

export default class FrontEnd {
    game;
    canvas;
    width;
    height;
    context;
    board;
    statusArea;
    playAgainButton;
    gameOver;

    // ..
}

Then add createPlayAgainButton() to the FrontEnd class:

export default class FrontEnd {
    // ..

    createPlayAgainButton() {
        let buttonX = this.width / 2 - PlayAgainButtonConfig.WIDTH / 2;
        let buttonY = this.height - PlayAgainButtonConfig.MARGIN_BOTTOM;
        let button = new PlayAgainButton(this.context, buttonX, buttonY, PlayAgainButtonConfig.WIDTH, PlayAgainButtonConfig.HEIGHT);
        button.render();
        return button;
    }
}

In the start() method, set the playAgainButton field to the value returned from createPlayAgainButton():

export default class FrontEnd {
    // ..

    start() {
        this.statusArea = this.createStatusArea();
        this.board = this.createBoard();
        this.playAgainButton = this.createPlayAgainButton();

        document.body.addEventListener('click', (clickEvent) => {
            this.board.handleClick(clickEvent);
        });
    }
}

If you check the game in your browser with a server running, you'll see the "Play Again" button on the canvas:

It's great that the button shows up but nothing happens when you click on it. It's not supposed to show up at this stage of the game either 😂️. You'll fix these problems next.

Handling Input

The "Play Again" button is only supposed to be visible when the game ends. Also, the PlayAgainButton class handles clicks similarly to the Board class.

To get started with this, go back to src/components/PlayAgainButton.js. Add the buttonClicked and isEnabled fields to the PlayAgainButton class:

export default class PlayAgainButton extends GameObject {
    buttonClicked;
    isEnabled;

    // ..
}

Then add a constructor to the PlayAgainButton class. It will call the parent constructor and then set the isEnabled field to false:

export default class PlayAgainButton extends GameObject {
    constructor(context, x, y, width, height) {
        super(context, x, y, width, height);
        this.isEnabled = false;
    }

    // ..
}

Update render() so that it sets the isEnabled field to true at the end:

export default class PlayAgainButton extends GameObject {
    // .. 

    render() {
        this.context.save();
        this.renderBackground();
        this.context.restore();

        this.context.save();
        this.renderText();
        this.context.restore();

        this.isEnabled = true;
    }
}

To set the logic to run when the button is clicked, add setClickHandler() to the PlayAgainButton class:

export default class PlayAgainButton extends GameObject {
    // ..

    setClickHandler(handler) {
        this.buttonClicked = handler;
    }
}

Add handleClick() to process the click events that will be passed in:

export default class PlayAgainButton extends GameObject {
    // ..

    handleClick(clickEvent) {
        if (!this.isEnabled) {
            return;
        }

        const wasButtonClicked = clickEvent.offsetX >= this.x
            && clickEvent.offsetX <= this.x + this.width
            && clickEvent.offsetY >= this.y
            && clickEvent.offsetY <= this.y + this.height;

        if (!wasButtonClicked) {
            return;
        }

        this.buttonClicked();
    }
}

It checks if the location where a player has clicked was actually within the bounds of the button.

There's one more thing to add to the PlayAgainButton class now. It's the hide() method:

export default class PlayAgainButton extends GameObject {
    // ..

    hide() {
        this.isEnabled = false;
        this.clear();
    }
}

There are quite a few things you've added to the PlayAgainButton class. Similar to when you handled clicks on the board, it will all make sense after making use of these changes in the FrontEnd class.

In the FrontEnd class, update the start() method so that the click event handler callback also calls handleClick() on the playAgainButton field with the click event passed in:

export default class FrontEnd {
    // .. 

    start() {
        this.statusArea = this.createStatusArea();
        this.board = this.createBoard();
        this.playAgainButton = this.createPlayAgainButton();

        document.body.addEventListener('click', (clickEvent) => {
            this.board.handleClick(clickEvent);
            this.playAgainButton.handleClick(clickEvent);
        });
    }
}

Then in processMoveResult(), call render() on the playAgainButton field if the game is over:

export default class FrontEnd {
    // .. 
    processMoveResult(moveResult) {
        if (this.gameOver || moveResult.status.value === Constants.MoveStatus.INVALID) {
            return;
        }

        const indicatorColor = this.determineIndicatorColor(moveResult);

        this.statusArea.render(indicatorColor, this.pickStatusMessage(moveResult.status.value))
        this.board.render(this.game.currentBoard);


        if (moveResult.status.value === Constants.MoveStatus.WIN || moveResult.status.value === Constants.MoveStatus.DRAW) {
            this.gameOver = true;
        }

        if (this.gameOver) {
            this.playAgainButton.render();
        }
    }
}

Also, import FourInARowGame:

import { FrontEndConfig, BoardConfig, StatusAreaConfig, StatusMessages, PlayAgainButtonConfig } from "./constants/index.js";
import { Board, StatusArea, PlayAgainButton } from "./components/index.js";
import { Constants, FourInARowGame } from "./gameLogic/index.js";


export default class FrontEnd {
    // ..
}

Then, add a reset() method to the FrontEnd class:

export default class FrontEnd {
    // ..

    reset() {
        this.game = new FourInARowGame();
        this.gameOver = false;

        this.playAgainButton.hide();
        this.statusArea.render(this.game.currentTurn, this.pickStatusMessage(this.game.status));
        this.board.render(this.game.currentBoard);
    }
}

This is the main method that restarts the game.

Lastly, in createPlayAgainButton(), remove the call to render() on button and call setClickHandler() on button. Call reset() in the callback:

export default class FrontEnd {
    // ..

    createPlayAgainButton() {
        let buttonX = this.width / 2 - PlayAgainButtonConfig.WIDTH / 2;
        let buttonY = this.height - PlayAgainButtonConfig.MARGIN_BOTTOM;
        let button = new PlayAgainButton(this.context, buttonX, buttonY, PlayAgainButtonConfig.WIDTH, PlayAgainButtonConfig.HEIGHT);
        button.setClickHandler(() => this.reset());
        return button;
    }
}

Now if you check the game in your browser with a server running, you'll have a fully playable four-in-a-row game that you can replay after completing a game.

Conclusion

Congratulations! You've finished the game. Feel free to modify it however you like. Maybe change how some of the components look? You could add animations too!

The source code of the game is available here: https://github.com/colinkiama/four-in-a-row-walkthrough

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 8: Status Updates

Colin Kiama — Sat, 08 Jul 2023 10:44:45 +0000

Intro

Welcome back! In the previous blog post, you drew the game board and made the game playable by clicking on board columns. In this post, you'll be adding the status area component to your four-in-a-row game.

Breaking Down The Status Area Component

Let's refer back to the mockup of the finished game:

The status area is at the top. It's broken down into 2 parts:

Player Turn Indicator: Indicates the current player's turn by showing the associated player's colour.
Status Message: Describes what is happening at each stage of the game (whose turn is it? Which player won? etc.)

Together they inform players and spectators about what is happening in the game.

Creating The StatusArea Class

To get started, create a file under the src/components directory called StatusArea.js.

In the file that you've just created, create an empty class called StatusArea. This class will inherit GameObject:

import GameObject from "./GameObject.js";

export default class StatusArea extends GameObject {

}

Player Turn Indicator

The player turn indicator is a small circle that appears in the status area. It may have either of these states:

Yellow - Has a yellow colour when it's the yellow player's turn or the yellow player has won the game.
Red - Has a red colour when it's the red player's turn or the red player has won the game.
Invisible - The indicator is not visible when the game ends in a draw.

Now that you know how the player turn indicator behaves, the next step for you is to add it to your game.

Start Drawing The Player Turn Indicator

To start off, import the Constants object from the gameLogic directory as well as StatusAreaConfig and TokenColor from the constants directory:

import { Constants } from "../gameLogic/index.js";
import { StatusAreaConfig, TokenColor } from "../constants/index.js";
import GameObject from "./GameObject.js";

export default class StatusArea extends GameObject {

}

Then, add renderPlayerTurnIndicator() to the StatusArea class:

export default class StatusArea extends GameObject {
    renderPlayerTurnIndicator(indicatorColor) {
        let indicatorColorValue;

        switch (indicatorColor) {
            case Constants.PlayerColor.YELLOW:
                indicatorColorValue = TokenColor.YELLOW;
                break;
            case Constants.PlayerColor.RED:
                indicatorColorValue = TokenColor.RED;
                break;
            default:
                // Unknown color. Do not attempt to render player turn indicator.
                return;
        }

        this.context.fillStyle = indicatorColorValue;
        const indicatorY = this.y + StatusAreaConfig.INDICATOR_WIDTH / 2 + StatusAreaConfig.PADDING_TOP;
        this.context.beginPath();

        // Draws a circle using CanvasDrawingContext2D.arc(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
        this.context.arc(this.width / 2, indicatorY, StatusAreaConfig.INDICATOR_WIDTH / 2, 0, Math.PI * 2);

        this.context.closePath();
        this.context.fill();
    }
}

Next, add render() to the StatusArea class:

export default class StatusArea extends GameObject {
    render(indicatorColor) {
        this.context.save();
        this.clear();

        if (indicatorColor !== Constants.PlayerColor.NONE) {
            this.renderPlayerTurnIndicator(indicatorColor);
        }

        this.context.restore();
    }

    // ..
}

Before continuing any further, you need to expose the StatusArea class as a module through the src/components/index.js:

import Board from "./Board.js";
import StatusArea from './StatusArea.js';


export { Board, StatusArea };

Now what you've implemented the rendering logic of the player turn indicator and exposed the StatusArea class through the components directory, you are now ready to start rendering the player turn indicator.

Render Player Turn Indicator

In src/FrontEnd.js import StatusAreaConfig and StatusArea:

import { FrontEndConfig, BoardConfig, StatusAreaConfig } from "./constants/index.js";
import { Board, StatusArea } from "./components/index.js";
import { Constants } from "./gameLogic/index.js";

export default class FrontEnd {
    // ..
}

Next, add the statusArea field to the FrontEnd class:

export default class FrontEnd {
    game;
    canvas;
    width;
    height;
    context;
    board;
    statusArea;
    gameOver;

    // ..

}

Add createStatusArea() to the FrontEnd class:

export default class FrontEnd {
    // ..

    createStatusArea() {
        let statusArea = new StatusArea(this.context, 0, 0, this.width, StatusAreaConfig.HEIGHT);
        statusArea.render(this.game.currentTurn);
        return statusArea;
    }
}

In start(), set statusArea to a new status area returned from createStatusArea():

export default class FrontEnd {
    // ..

    start() {
        this.statusArea = this.createStatusArea();
        this.board = this.createBoard();

        document.body.addEventListener('click', (clickEvent) => {
            this.board.handleClick(clickEvent);
        });
    }
}

Add determineIndicatorColor() to the FrontEnd class:

export default class FrontEnd {
    // ..

    determineIndicatorColor(moveResult) {
        if (moveResult.status.value === Constants.MoveStatus.DRAW) {
            return Constants.PlayerColor.NONE
        } else if (moveResult.status.value === Constants.MoveStatus.WIN) {
            return moveResult.winner;
        } else {
            return this.game.currentTurn;
        }
    }
}

Then, update processMoveResult() so that it also determines the next player's turn and passes in the colour of the next player to a call to the render() method on statusArea:

export default class FrontEnd {
    // ..

    processMoveResult(moveResult) {
        if (this.gameOver || moveResult.status.value === Constants.MoveStatus.INVALID) {
            return;
        }

        const indicatorColor = this.determineIndicatorColor(moveResult);

        this.statusArea.render(indicatorColor);
        this.board.render(this.game.currentBoard);

        if (moveResult.status.value === Constants.MoveStatus.WIN || moveResult.status.value === Constants.MoveStatus.DRAW) {
            this.gameOver = true;
        }
    }
}

Lastly, in createBoard(), update the call to the Board constructor so that the board when the game board is rendered, it's shifted down below the status area:

export default class FrontEnd {
    // ..

    createBoard() {
        let board = new Board(this.context, BoardConfig.MARGIN_LEFT, this.statusArea.height + BoardConfig.MARGIN_TOP, BoardConfig.WIDTH, BoardConfig.HEIGHT);
        board.setColumnSelectionHandler((columnIndex) => this.playMove(columnIndex));
        board.render(this.game.currentBoard);
        return board;
    }
}

If you check the game in your browser while a server is running, you'll see the indicator colour being rendered.

It'll update based on the current state of the game.

Status Messages

The status message is the text portion of the status area.

It is used to:

Display the current player's turn
Reveal which player has won a game
Shows when a game ends in a draw

Start Implementing Status Messages

Add the renderMessage() method to the StatusArea class:

export default class FrontEnd {
    // ..

    renderMessage(message) {
        this.context.fillStyle = "white";
        this.context.font = "bold 16px Arial";
        this.context.textBaseline = "top";
        this.context.textAlign = "center"; // Default value had vertical alignment issues. "center" fixes those in this case
        const messageY = this.y + StatusAreaConfig.PADDING_TOP + StatusAreaConfig.INNER_MARGIN;
        this.context.fillText(message, this.width / 2, messageY);
    }
}

Proceed by adding the message parameter to the render() method then calling renderMessage() in render():

export default class StatusArea extends GameObject {
    render(indicatorColor, message) {
        this.context.save();
        this.clear();

        if (indicatorColor !== Constants.PlayerColor.NONE) {
            this.renderPlayerTurnIndicator(indicatorColor);
        }

        this.renderMessage(message);
        this.context.restore();
    }

    // ..

Once you've done that, switch back to the src/FrontEnd.js file. Import StatusMessages from the constants directory:

import { FrontEndConfig, BoardConfig, StatusAreaConfig, StatusMessages } from "./constants/index.js";
import { Board } from "./components/index.js";
import { Constants } from "./gameLogic/index.js";

Now, add logic that determines which status message to display depending on the current state of the game. Add pickStatusMessage() to the FrontEnd class:

export default class FrontEnd {
    // ..

    pickStatusMessage(status) {
        switch (status) {
            case Constants.GameStatus.WIN:
                // The game is on the the next turn but the somebody has won from the previous turn. The winning player is the opposite of the player who currently has a turn.
                return this.game.currentTurn === Constants.PlayerColor.YELLOW ? StatusMessages.RED_WIN : StatusMessages.YELLOW_WIN;
            case Constants.GameStatus.DRAW:
                return StatusMessages.DRAW;
        }

        // At this point, we can assume that the game is either has just started 
        // or is still in progress.
        return this.game.currentTurn === Constants.PlayerColor.YELLOW ? StatusMessages.YELLOW_TURN : StatusMessages.RED_TURN;
    }
}

Then in the processMoveResult() method, update the render() call on statusArea so that it has an additional argument passed in. This argument is a method call to pickStatusMessage() with the status value of moveResult passed in:

export default class FrontEnd {
    // ..

    processMoveResult(moveResult) {
        if (this.gameOver || moveResult.status.value === Constants.MoveStatus.INVALID) {
            return;
        }

        const indicatorColor = this.determineIndicatorColor(moveResult);

        this.statusArea.render(indicatorColor, this.pickStatusMessage(moveResult.status.value))
        this.board.render(this.game.currentBoard);

        if (moveResult.status.value === Constants.MoveStatus.WIN || moveResult.status.value === Constants.MoveStatus.DRAW) {
            this.gameOver = true;
        }
    }
}

Lastly, repeat this same change in createStatusArea() except that the argument passed in to pickStatusMessage() will be the game's current status:

export default class FrontEnd {
    // ..

    createStatusArea() {
        let statusArea = new StatusArea(this.context, 0, 0, this.width, StatusAreaConfig.HEIGHT);
        statusArea.render(this.game.currentTurn, this.pickStatusMessage(this.game.status));
        return statusArea;
    }
}

If you check the game in your browser with a server running, you'll see that the status area will always reflect the current status of the game:

The player turn indicator will appear in states regarding a specific player
The status message will describe the current state of the game

Conclusion

Congratulations on getting this far! It's now clear to understand what is happening during gameplay.

Unfortunately, when the game ends, there's no way to start a new game without refreshing the page.

In the next (and final) part of this tutorial, you'll solve this problem by adding the final component to the game, the play again button.

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 7: Drawing The Board

Colin Kiama — Thu, 29 Jun 2023 18:43:46 +0000

Intro

Welcome back! In the previous blog post, you set up the canvas and created drawings on it. Now in this post, you'll draw the game board.

Game Objects

What Is A Game Object?

The game features multiple drawings on the canvas. These distinct drawings take up space both horizontally and vertically. They may be made up of other smaller related drawings. These distinct drawings will be referred to as "game objects".

Why Do We Need Game Objects?

Looking back at the breakdown of the game's UI. Three components can be identified:

Status Area
Game Board
Play Again Button

All of these components share the following things in common:

They have position
They have dimensions
All drawn on the canvas

When referring to these components in a generalised way, we'll be considering these common traits and properties only. In the context of this game, the general name for these components will be "Game Object". The components listed above are all game objects.

To represent this relationship in code, you'll create a GameObject class. The component classes will inherit from the GameObject class. This will avoid you from rewriting the common logic and properties shared across all the components.

Creating The GameObject Class

Unlike with the HTML elements, you will have to implement the size and positioning of game objects yourself. You'll also have to draw the game objects yourself too.

Create a directory under the src directory called components.

In the src/components directory, create a new file called GameObject.js.

In src/components/GameObject.js, add the following to the file:

export default class GameObject {
    x;
    y;
    width;
    height;
    context; // CanvasRenderingContext2D

    constructor(context, x, y, width, height) {
        this.context = context;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

    clear() {
        this.context.clearRect(this.x, this.y, this.width, this.height);
    }
}

Inheriting The GameObject Class

Now that you've created the GameObject class, in the src/components directory, create a new file named Board.js. After, in that file, create a Board class that inherits from the GameObject class:

import GameObject from "./GameObject.js";

export default class Board extends GameObject {

}

To test out whether the GameObject is being inherited by Board correctly, you'll recreate the last post's white rectangle drawing using the Board class.

Add a method called render() to the Board class that will render a white rectangle and then restore the state of the context object:

import GameObject from "./GameObject.js";

export default class Board extends GameObject {
    render() {
        this.context.save();
        this.clear();
        this.context.fillStyle = "white";
        this.context.fillRect(this.x, this.y, this.width, this.height);
        this.context.restore();
    }
}

Notice how the x, y, width, and height fields were not defined in Board. This is because they were inherited from GameObject.

Create a new file in src/components called index.js and fill it with the following contents:

import Board from "./Board.js";

export { Board };

This code block above exports the Board class as a module, making it available to import from src/components/index.js. There will be more components in the future. This change will simplify the code required to import multiple components over time.

Return to the FrontEnd class. Import the Board class from src/components/index.js:

import { FrontEndConfig } from "./constants/index.js";
import { Board } from "./components/index.js";

Add a field called board:

export default class FrontEnd {
    game;
    canvas;
    width;
    height;
    context;
    board;

    // ...
}

Rewrite the start() method in the Board class:

Set the board field to a new instance of the Board class
Call the render() method on board

export default class FrontEnd {
    // ..

    start() {
        this.board = new Board(this.context, 20, 20, 50, 100);
        this.board.render();
    }
}

Notice that the Board uses the same constructor defined in GameObject.

If you check the game with your web server, you'll see the same white rectangle drawn on the canvas as the one you drew in the previous blog post.

Drawing The Game Board

Awesome! You've figured out how to create your game object and draw it on the canvas. Now it's time to draw the actual game board.

Board Background

In src/components/Board.js, import BoardConfig from the constants file:

import GameObject from './GameObject.js';
import { BoardConfig } from '../constants/index.js';

Then create a new method in the Board class called renderBoardBackground().

After, perform the following steps:

Move the code that draws the white rectangle into the renderBoardBackground() method
Replace the fill style with the BACKGROUND_COLOR field defined in the imported BoardConfig object.

import GameObject from "./GameObject.js";
import { BoardConfig } from "../constants/index.js";

export default class Board extends GameObject {
    render() {
        this.context.save();
        this.clear();
        this.renderBoardBackground();
        this.context.restore();
    }

    renderBoardBackground() {
        this.context.fillStyle = BoardConfig.BACKGROUND_COLOR;
        this.context.fillRect(this.x, this.y, this.width, this.height); 
    }
}

In the FrontEnd class, import BoardConfig from the constants file:

import { FrontEndConfig, BoardConfig } from "./constants/index.js";

Add a method called createBoard() then do the following:

In createBoard(), create a local variable that stores a new instance of the Board class, calls the render() method on it then returns it.
Rewrite the start() method so that the board field is set to the result returned from calling the createBoard() method

export default class FrontEnd {
    // ..

    start() {
        this.board = this.createBoard();
    }

    createBoard() {
        let board = new Board(this.context, BoardConfig.MARGIN_LEFT, BoardConfig.MARGIN_TOP, BoardConfig.WIDTH, BoardConfig.HEIGHT);
        board.render();
        return board;
    }
}

The board is now created with the positioning and dimensions from mockups of the game.

Now, with a web server running, if you check your game in your browser, you'll see that a blue rectangle has been rendered on the canvas.

Board Slots

Now you're ready to draw the slots on the board.

Add a parameter called nextBoard to the Board class' render() method:

export default class Board extends GameObject {
    render(nextBoard) {
        this.context.save();
        this.clear();
        this.renderBoardBackground();
        this.context.restore();
    }

    // ..

nextBoard will contain the state of the board. It's an array of arrays of numbers representing the tokens in each board position. These will be used to render the board tokens in the slots.

Next, add a method called renderSlots() to the Board class. To keep the upcoming drawing commands simple, you'll modify the point of origin where you start drawing the slots. This way, you won't have to consider padding in later drawing commands in renderSlots(). To do this, you'll use the CanvasRenderingContext2D.translate() method:

export default class Board extends GameObject {
    // ..

    renderSlots(nextBoard) {
        this.context.translate(this.x + BoardConfig.HORIZONTAL_PADDING, this.y + BoardConfig.VERTICAL_PADDING);
    }

Start drawing the slots.

Set the stroke colour and line width:

this.context.strokeStyle = BoardConfig.SLOT_OUTLINE_COLOR;
this.context.lineWidth = 2;

Store the radius of a slot in a local variable called slotRadius:

const slotRadius = BoardConfig.SLOT_WIDTH / 2;

Update import statements in src/components/Board.js to include TokenColor from the constants directory and Constants from the gameLogic directory:

import { BoardConfig, TokenColor } from "../constants/index.js";
import { Constants } from "../gameLogic/index.js";
import GameObject from "./GameObject.js";

Loop through each slot on the board and:

Calculate the positioning:
Obtain the token colour to render the slot with

for (let rowIndex = 0; rowIndex < Constants.BoardDimensions.ROWS; rowIndex++) {
    for (let columnIndex = 0; columnIndex < Constants.BoardDimensions.COLUMNS; columnIndex++) {
        // Note slot is a circle. (x, y) coordinates are the circle's centre.
        const totalSlotMarginsX = BoardConfig.SLOT_MARGIN * columnIndex;
        const totalPreviousSlotWidthsX = BoardConfig.SLOT_WIDTH * columnIndex;
        const slotX = totalSlotMarginsX + totalPreviousSlotWidthsX + slotRadius;

        const totalSlotMarginsY = BoardConfig.SLOT_MARGIN * rowIndex;
        const totalPreviousSlotWidthsY = BoardConfig.SLOT_WIDTH * rowIndex;
        const slotY = totalSlotMarginsY + totalPreviousSlotWidthsY + slotRadius;

        const tokenColorValue = nextBoard[rowIndex][columnIndex];

        let tokenColor;

        switch (tokenColorValue) {
            case Constants.BoardToken.YELLOW:
                tokenColor = TokenColor.YELLOW;
                break;
            case Constants.BoardToken.RED:
                tokenColor = TokenColor.RED;
                break;
            default:
                tokenColor = TokenColor.NONE
                break;
        }
    }
}

You now have the values you need to render each slot. To do so, add a method called renderSlot() to the Board class:

export default class Board extends GameObject {
    // ..

    renderSlot(x, y, radius, color) {
        this.context.beginPath();
        this.context.arc(x, y, radius, 0, Math.PI * 2);
        this.context.closePath();
        this.context.stroke();

        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.arc(x, y, radius - 1, 0, Math.PI * 2);
        this.context.closePath();
        this.context.fill();
    }
}

Now, call renderSlot() right after the switch block in renderSlots():

renderSlots(nextBoard) {
    this.context.translate(this.x + BoardConfig.HORIZONTAL_PADDING, this.y + BoardConfig.VERTICAL_PADDING);
    this.context.strokeStyle = BoardConfig.SLOT_OUTLINE_COLOR;
    this.context.lineWidth = 2;

    const slotRadius = BoardConfig.SLOT_WIDTH / 2;

    for (let rowIndex = 0; rowIndex < Constants.BoardDimensions.ROWS; rowIndex++) {
        for (let columnIndex = 0; columnIndex < Constants.BoardDimensions.COLUMNS; columnIndex++) {
            // Note slot is a circle. (x, y) coordinates are the circle's centre.
            const totalSlotMarginsX = BoardConfig.SLOT_MARGIN * columnIndex;
            const totalPreviousSlotWidthsX = BoardConfig.SLOT_WIDTH * columnIndex;
            const slotX = totalSlotMarginsX + totalPreviousSlotWidthsX + slotRadius;

            const totalSlotMarginsY = BoardConfig.SLOT_MARGIN * rowIndex;
            const totalPreviousSlotWidthsY = BoardConfig.SLOT_WIDTH * rowIndex;
            const slotY = totalSlotMarginsY + totalPreviousSlotWidthsY + slotRadius;

            const tokenColorValue = nextBoard[rowIndex][columnIndex];

            let tokenColor;

            switch (tokenColorValue) {
                case Constants.BoardToken.YELLOW:
                    tokenColor = TokenColor.YELLOW;
                    break;
                case Constants.BoardToken.RED:
                    tokenColor = TokenColor.RED;
                    break;
                default:
                    tokenColor = TokenColor.NONE
                    break;
            }

            this.renderSlot(slotX, slotY, slotRadius, tokenColor);
        }
    }
}

Add a call to renderSlots() in the render() method:

render(nextBoard) {
    this.context.save();
    this.clear();
    this.renderBoardBackground();
    this.renderSlots(nextBoard);
    this.context.restore();
}

Lastly, in the FrontEnd class, update the board.render() method call in createBoard() so that you pass in the current board state:

export default class FrontEnd {
    // ..

    createBoard() {
        let board = new Board(this.context, BoardConfig.MARGIN_LEFT, BoardConfig.MARGIN_TOP, BoardConfig.WIDTH, BoardConfig.HEIGHT);
        board.render(this.game.currentBoard);
        return board;
    }
}

If you check your browser now while your server is running, you'll see empty slots drawn on the board:

Making The Game Playable

You can attempt to hardcode a board state argument when calling the render() method on the board variable. The game will render the board state accordingly.

However, you currently aren't able to update the board state in-game.

One way to update the board state in-game is by responding to clicks on the canvas.

Unlike with HTML elements, you can't just rely on the built-in DOM events system to handle clicks on our game objects. Since you're drawing on the canvas, you'll have to handle the hit detection yourself and come up with your own event-handling interface.

Introducing Your Event Handling API

In this game, you'll detect clicks by listening for the click event on the body of the page and then pass on the event data to relevant game objects to be processed.

To get started with this, add a new method to the GameObject class called handleClick():

export default class GameObject {
    x;
    y;
    width;
    height;
    context;

    constructor(context, x, y, width, height) {
        this.context = context;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

    clear() {
        this.context.clearRect(this.x, this.y, this.width, this.height);
    }

    handleClick(clickEvent) { }
}

handleClick() will be overridden by the GameObject class' inheritors. The inheritors will add logic to the handleClick() method for handling event data from clicks.

Implementing Your Event Handling API

Now, in the Board class, add a field called columnSelected. This will be used to store a callback. The callback will contain logic to run that will be defined in the FrontEnd class:

export default class Board extends GameObject {
    columnSelected;

    // ..
}

After that, add a method called setColumnSelectionHandler(), which will be used to set the logic that will run from the callback:

export default class Board extends GameObject {
    // ..

    setColumnSelectionHandler(callback) {
        this.columnSelected = callback;
    }
}

You now have the prerequisites for overriding handleClick() in the Board class.

Add the following methods to the Board class:

handleClick()
trySelectColumn()

export default class Board extends GameObject {
    // ..

    handleClick(clickEvent) {
        this.trySelectColumn(clickEvent);
    }

    trySelectColumn(clickEvent) {
        for (let columnIndex = 0; columnIndex < Constants.BoardDimensions.COLUMNS; columnIndex++) {
            const totalSlotMargins = BoardConfig.SLOT_MARGIN * columnIndex;
            const totalPreviousSlotWidths = BoardConfig.SLOT_WIDTH * columnIndex;
            const columnX = this.x + BoardConfig.HORIZONTAL_PADDING + totalSlotMargins + totalPreviousSlotWidths;

            const wasColumnClicked = clickEvent.offsetX >= columnX
                && clickEvent.offsetX <= (columnX + BoardConfig.SLOT_WIDTH)
                && clickEvent.offsetY >= this.y + BoardConfig.VERTICAL_PADDING
                && clickEvent.offsetY <= this.y + BoardConfig.HEIGHT - BoardConfig.VERTICAL_PADDING;

            if (wasColumnClicked) {
                this.columnSelected(columnIndex);
                break;
            }
        }
    }
}

The trySelectColumn() method figures out if the player clicked a column. If the player has clicked on a column, it will run the columnSelected callback with the selected column's position index. For example, the leftmost column would have an index of 0, and the third column would have an index of 2.

Adding the callback logic

Finally, you'll set up the click events in the FrontEnd class and handle them.

In the start method, add an event listener for clicks on the document's body. This will call the handleClick() method on the board with event data:

export default class FrontEnd {
    // ..

    start() {
        this.board = this.createBoard();

        document.body.addEventListener('click', (clickEvent) => {
            this.board.handleClick(clickEvent);
        });
    }
}

Now, you'll add the logic that will run in the Board class' selectedColumn callback.

Add a field called gameOver in the FrontEnd class. Set its value to false in the FrontEnd class' constructor:

export default class FrontEnd {
    game;
    canvas;
    width;
    height;
    context;
    board;
    gameOver;


    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.gameOver = false;

        this.enableHiDPISupport();
    }

    // ..
}

Update the import statements in src/FrontEnd.js to include Constants from the gameLogic directory:

import { FrontEndConfig, BoardConfig } from "./constants/index.js";
import { Board } from "./components/index.js";
import { Constants } from "./gameLogic/index.js";

Create the following methods: playMove() and processMoveResult():

export default class FrontEnd {
    // ..

    playMove(columnIndex) {
        let moveResult = this.game.playMove(columnIndex);
        this.processMoveResult(moveResult);
    }

    processMoveResult(moveResult) {
        if (this.gameOver || moveResult.status.value === Constants.MoveStatus.INVALID) {
            return;
        }

        this.board.render(this.game.currentBoard);

        if (moveResult.status.value === Constants.MoveStatus.WIN || moveResult.status.value === Constants.MoveStatus.DRAW) {
            this.gameOver = true;
        }
    }
}

In createBoard(), add a line before the call to render() on the board. In that line, call the setColumnSelectionHandler() method:

export default class FrontEnd {
    createBoard() {
        let board = new Board(this.context, BoardConfig.MARGIN_LEFT, BoardConfig.MARGIN_TOP, BoardConfig.WIDTH, BoardConfig.HEIGHT);
        board.setColumnSelectionHandler((columnIndex) => this.playMove(columnIndex));
        board.render(this.game.currentBoard);
        return board;
    }
}

If you check your browser now while your server is running, you'll now be able to place tokens on the board, based on which column you clicked on.

Conclusion

Congratulations! This was a long post (maybe the longest in this blog series so far!). Hopefully, it was worthwhile to you now that you've made a playable four-in-a-row game.

However, it's not quite clear what's going on in the game. The board stops updating when a player wins or the game ends in a draw. There's no indication of the current status of the game.

In the next post, you'll fix that problem. You'll add the status area component to the game. This will enable players and spectators to be aware of the current status of the game at any time.

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 6: Blank Canvas

Colin Kiama — Sat, 27 May 2023 19:53:32 +0000

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!

Making Four-In-A-Row Using JavaScript - Part 5: Reorganisation

Colin Kiama — Sun, 14 May 2023 20:10:56 +0000

Intro

In the previous blog post, you checked for wins and draws in FourInARowGame.

Now you'll be reorganising the work you've done so far in preparation the the HTML5 Canvas front-end that you'll be creating for the game.

Creating The Game Logic Directory

First, create a new directory in the src directory called gameLogic.

Now move the src/constants directory and src/FourInARowGame.js to src/gameLogic.

Lastly, create a file under src/gameLogic called index.js with the following contents:

import FourInARowGame from "./FourInARowGame.js";
import * as Constants from "./constants/index.js";

export { Constants, FourInARowGame };

From now on the core game logic will be stored in and referenced from src/gameLogic. The outside of src/gameLogic will be for the front end.

Importing From The Game Logic Module

You're now exporting your core game logic as a module from src/gameLogic/index.js. You'll now need to fix outdated imports of the FourInARowGame class.

To do this, fix the import statement in src/index.js so that you import the FourInARowGame class from the game logic module:

import { FourInARowGame } from "./gameLogic/index.js";

window.fourInARowGame = new FourInARowGame();

If you test the code in your web browser's console, you should still be able to interact with window.fourInARowGame just like before.

If not, please make sure that you've followed the instructions in this post correctly!

Great! Now, you're ready to start working on the front end in the next post.

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 4: Winning Ways and Tedious Ties

Colin Kiama — Sun, 30 Apr 2023 04:20:20 +0000

Intro

In the previous blog post, you implemented player moves.

Now you're ready to check for wins and draws in the game.

Checking For Wins

In four-in-a-row, there are three ways for a player to win a game:

Place 4 consecutive tokens horizontally
Place 4 consecutive tokens vertically
Place 4 consecutive tokens diagonally.

Since the board in the game has been created using an array of arrays, you can check for consecutive tokens by iterating through the game board, checking each direction for win lines.

Finding Win Lines

While the directions to check for wins are different, we still are checking for the same number of consecutive tokens in each direction so, we can create a method that checks for the win lines for you.

Add a static method to the FourInARowGame class called tryFindWinLine:

/**
 *
 * options: {
 *     startRowIndex,
 *     startColumnIndex,
 *     rowCountStep,
 *     columnCountStep
 * }
 *
 * Any missing options will be 0 by default.
 */
static tryFindWinLine(board, options) {
    // If `options` is null/undefined, set it's value to an empty object.
    options = options || {};

    let config = {
        startRowIndex: options.startRowIndex || 0,
        startColumnIndex: options.startColumnIndex || 0,
        rowCountStep: options.rowCountStep || 0,
        columnCountStep: options.columnCountStep || 0
    };

    let count = 0;
    let tokenToCheck = Constants.BoardToken.NONE;
    let winLine = [];

    for (let i = 0; i < Constants.BoardDimensions.WIN_LINE_LENGTH; i++) {
        let row = config.startRowIndex + config.rowCountStep * i;
        let column = config.startColumnIndex + config.columnCountStep * i;

        if (FourInARowGame.checkIfOutOfBounds(row, column)) {
            break;
        }

        let currentToken = board[row][column];
        if (currentToken === Constants.BoardToken.NONE) {
            break;
        }

        if (tokenToCheck === Constants.BoardToken.NONE) {
            tokenToCheck = currentToken;
        }

        if (currentToken === tokenToCheck) {
            count++;
        }

        winLine.push({ row: row, column: column });
    }

    if (count === Constants.BoardDimensions.WIN_LINE_LENGTH) {
        return {
            winLine: winLine,
            winner: FourInARowGame.boardTokenToPlayerColor(tokenToCheck),
        };
    }

    return {
        winLine: []
    };
}

The method above counts checks for consecutive tokens from a starting position. The behaviour of this method is controlled by the options object that is passed in.

startRowIndex and startColumnIndex sets the start position.

The rowCountStep and columnCountStep control the direction win lines will be checked in. For example, A rowCountStep of 0 and a columnCountStep of 1 will check for a win line horizontally from the start position.

Two other methods are called in checkForWinLine().

FourInARowGame.checkIfOutBounds() checks if a specified position is out of bounds. This allows us to stop checking for a win line early.

Add the static method to the FourInARowGame class:

static checkIfOutOfBounds(row, column) {
    return row < 0
        || row > Constants.BoardDimensions.ROWS
        || column < 0
        || column > Constants.BoardDimensions.COLUMNS;
}

The other method is another static one called FourInARow.boardTokenToPlayerColor() which turns board token values to player colour values.

Add it to the FourInARowGame class:

static boardTokenToPlayerColor(boardToken) {
    switch (boardToken) {
        case Constants.BoardToken.YELLOW:
            return Constants.PlayerColor.YELLOW;
        case Constants.BoardToken.RED:
            return Constants.PlayerColor.RED;
        default:
            return Constants.PlayerColor.NONE;
    }
}

Checking For Wins In All Directions

Now that you've created methods to help you find win lines on the board, you're now ready to start checking if a player has won the game.

Create a new static method to the FourInARowGame class called checkForWin():

// Each win line is an array of board position coordinates:
// e.g: winLine = [{row: 0, column: 0}, {row: 0, column: 1}, {row: 0, column : 2}, {row: 0, column: 3}]
static checkForWin(board) {
    // Starts from bottom left of the board and ends on top right of board
    for (let columnIndex = 0; columnIndex < Constants.BoardDimensions.COLUMNS; columnIndex++) {
        for (let rowIndex = Constants.BoardDimensions.ROWS - 1; rowIndex > -1; rowIndex--) {
            // Check for vertical win
            let verticalWinCheckResult = FourInARowGame.tryFindWinLine(board, {
                startRowIndex: rowIndex,
                startColumnIndex: columnIndex,
                rowCountStep: -1,
            });

            if (verticalWinCheckResult.winner) {
                return verticalWinCheckResult;
            }

            let horizontalWinCheckResult = FourInARowGame.tryFindWinLine(board, {
                startRowIndex: rowIndex,
                startColumnIndex: columnIndex,
                columnCountStep: -1,
            });

            if (horizontalWinCheckResult.winner) {
                return horizontalWinCheckResult;
            }

            let leftDiagonalWinCheck = FourInARowGame.tryFindWinLine(board, {
                startRowIndex: rowIndex,
                startColumnIndex: columnIndex,
                rowCountStep: -1,
                columnCountStep: -1
            });

            if (leftDiagonalWinCheck.winner) {
                return leftDiagonalWinCheck;
            }

            let rightDiagonalWinCheck = FourInARowGame.tryFindWinLine(board, {
                startRowIndex: rowIndex,
                startColumnIndex: columnIndex,
                rowCountStep: -1,
                columnCountStep: 1
            });

            if (rightDiagonalWinCheck.winner) {
                return rightDiagonalWinCheck;
            }
        }
    }

    return {
        winLine: [],
        winner: Constants.PlayerColor.NONE
    };
}

This method above checks for win lines in all directions from each board position. It then returns a WinCheckResult which is made up of:

a winLine which is a list of consecutive board positions
a winner, which contains the who won the game.

Notice how the rowCountStep and columnCountStep values are set for each direction.

Allowing Players To Win

Now that you have created a method that checks for wins, you can now detect wins and update the status of the game accordingly.

Update the evaluateGame() method so that it handles wins being detected:

evaluateGame(board) {
    let winCheckResult = FourInARowGame.checkForWin(board);

    if (winCheckResult.winner !== Constants.PlayerColor.NONE) {
        this.status = Constants.GameStatus.WIN;
        return {
            board: board,
            winner: winCheckResult.winner,
            status: {
                value: Constants.MoveStatus.WIN
            },
            winLine: winCheckResult.winLine
        };
    }

    // From this point, we can assume that a successful move was made and the game will
    // continue on.
    return {
        board: board,
        winner: Constants.PlayerColor.NONE,
        status: {
            value: Constants.MoveStatus.SUCCESS
        },
        winLine: []
    };
}

One more thing you need to do is update playMove() so that it re-evaluates the board when the game has already concluded:

playMove(columnIndex) {
    switch (this.status) {
        case Constants.GameStatus.START:
            this.status = Constants.GameStatus.IN_PROGRESS;
            break;
        case Constants.GameStatus.DRAW:
        case Constants.GameStatus.WIN:
            // The game is over at this point so
            // re-evaluate the latest board, returning the same game status
            // and board details.
            return this.evaluateGame(this.currentBoard);
        default:
            break;
    }

    let moveResults = this.performMove(columnIndex);

    // Do not change player turn if move is invalid
    if (moveResults.status !== Constants.MoveStatus.INVALID && moveResults.status.value !== Constants.MoveStatus.INVALID) {
        this.currentTurn = this.currentTurn === Constants.PlayerColor.YELLOW
            ? Constants.PlayerColor.RED
            : Constants.PlayerColor.YELLOW;
    }
    return moveResults;
}

Feel free to test this out in your browser's console.

When a move results in a win, the move result object in the output will have the status field with a value of win, winner will be set to either Red or Yellow and winLine will be filled with positions.

Subsequent calls to playMove() will produce the same output every time. The game is already over after all 😉.

Checking For A Draw

Not every four-in-a-row game concludes with a win. There are cases where the board is filled with no winner. In these cases, the game ends in a draw.

You're now going to add the ability to detect a draw.

First, add a static method called checkForFilledBoard() to the FourInARowGame class:

static checkForFilledBoard(board) {
    for (let j = 0; j < board.length; j++) {
        let boardColumn = board[j];
        for (let i = 0; i < boardColumn.length; i++) {
            let boardPosition = boardColumn[i];
            if (boardPosition === Constants.BoardToken.NONE) {
                return false;
            }
        }
    }

    return true;
}

Now, make another update to the evaluateGame() method so that it checks for a draw and if true, returns a MoveResult object that indicates that the game has ended with a draw:

evaluateGame(board) {
    let winCheckResult = FourInARowGame.checkForWin(board);

    if (winCheckResult.winner !== Constants.PlayerColor.NONE) {
        this.status = Constants.GameStatus.WIN;
        return {
            board: board,
            winner: winCheckResult.winner,
            status: {
                value: Constants.MoveStatus.WIN,
            },
            winLine: winCheckResult.winLine,
        };
    }

    // If board is full right now, we can assume the game to be a draw
    // since there weren't any winning lines detected.
    if (FourInARowGame.checkForFilledBoard(board)) {
        this.status = Constants.GameStatus.DRAW;

        return {
            board: board,
            winner: Constants.PlayerColor.NONE,
            status: {
            value: Constants.MoveStatus.DRAW,
            },
            winLine: [],
        };
    }

    // From this point, we can assume that a successful move was made and the game will
    // continue on.
    return {
        board: board,
        winner: Constants.PlayerColor.NONE,
        status: {
            value: Constants.MoveStatus.SUCCESS,
        },
        winLine: [],
    };
}

Feel free to test out these changes yourself in your browser's console. The MoveResult object returned in the output will have a status field with a value of draw.

If you encounter any errors or unexpected behaviour then please go over the code you've written so far and read over this post again.

Otherwise, congratulations! You've now implemented the core logic of a four-in-a-row game in JavaScript.

In the upcoming posts in this blog series, you'll be working on the HTML5 Canvas front-end for your game and integrating the state machine object you've created into it!

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 3: Making Moves

Colin Kiama — Wed, 19 Apr 2023 22:18:58 +0000

Intro

In the previous blog post, you set up your FourInARowGame class's fields.

Now you're ready to start implementing player moves and updating the state of the game accordingly.

Creating The Method

You'll start by creating a new method in the FourInARowGame class called playMove():

export default class FourInARowGame {
  // ..

  static createBoard() {
    // ..
  }

  playMove(columnIndex) {
    return {
      board: this.currentBoard,
      winner: Constants.PlayerColor.NONE,
      status: {
        value: Constants.MoveStatus.SUCCESS,
      },
      winLine: [],
    };
  }
}

Note: You're just returning mock data for now. You'll properly implement this method later on.

The playMove() method takes in a columnIndex argument. From this input, a move will be attempted and the result of the move will be evaluated and returned. The code example above shows a MoveResult object being returned in the playMove() method. A MoveResult can contain:

The current state of the board after a move has been played
The winner
The status of the move
The win line - an array of positions of 4 consecutive tokens were located if found.

Interacting With Your State Machine

Exposing Your State Machine Object

Now, to try out your code, you'll interact with your Four-In-A-Row state machine in your browser.

First, you'll need to expose the object so that the browser's console can access it. One way you can do this is by adding an instance of the FourInARowGame class to the window object. Let's do that right now. Replace the contents of src/index.js with the following:

import FourInARowGame from "./FourInARowGame.js";

window.fourInARowGame = new FourInARowGame();

Now, ensure that an HTTP server is running from the root of your project and navigate to the server's address in your web browser.

Open up the console in your browser's developer tools (The keyboard shortcut to open in it Google Chrome is CTRL + Shift + J) in your web browser then enter in: window.fourInARowGame. You should see an output of the FourInARowGame instance object. In Google Chrome it looks like this:

FourInARowGame {startingColor: 'yellow', currentTurn: 'yellow', status: 'start', board: Array(6)}

There is also the option to expand the object so you can view more details about the object.

If you don't see some sort of representation of a FourInARow instance object then please go over your code and check that you've followed the instructions correctly!

Play A (Fake) Move

Now, call the playMove() method from the FourInARow instance, in the browser console window.

First, store the state machine in an easier-to-reference variable called game:

let game = window.fourInARowGame;

Then, call the playMove() method with the columnIndex parameter set to 0:

game.playMove(0);

Your browser's console window should output something resembling the MoveResult object you discussed earlier:

{board: Array(6), winner: 'none', status: {…}, winLine: Array(0)}

When expanded, you get more details:

{board: Array(6), winner: 'none', status: {…}, winLine: Array(0)}
    board: (6) [Uint8Array(7), Uint8Array(7), Uint8Array(7), Uint8Array(7), Uint8Array(7), Uint8Array(7)]
    status: {value: 'success'}
    winLine: []
    winner: "none"
    [[Prototype]]: Object

Now that you know the type of result that you're expecting after calling playMove(), let's properly implement the method so that it returns real data based on the state of the board.

Implementing The Method (For Real This Time!)

Firstly, you'll update the playMove() method in your FourInARowGame class so that it checks the current status of the game before allowing the player to make a move.

It wouldn't make sense for a player to be able to perform a move when the game has already ended in a win or a draw.

You'll also update the current status of the game from GameStatus.START to being GameStatus.IN_PROGRESS.

playMove(columnIndex) {
    switch (this.status) {
        case Constants.GameStatus.START:
            this.status = GameStatus.IN_PROGRESS;
            break;
        case Constants.GameStatus.DRAW:
        case Constants.GameStatus.WIN:
            // The game is over at this point so
            // re-evaluate the latest board, returning the same game status
            // and board details.

            // TODO: Implement this properly
            console.log("Game already ended in win or draw. re-evaluating latest game state);
        default:
            break;
    }
}

You'll re-evaluate the latest game state when a win or draw happens later.

For now, let's continue focusing on allowing a player to make a move that changes the game's state.

You will first create a method called performMove():

performMove(columnIndex) {
  // ...
}

Now you need to create a copy of the current board that you can modify without changing the value of this.currentBoard.

To do this, you'll create a static method called deepBoardCopy():

static deepBoardCopy(oldBoard) {
  let newBoard = new Array(Constants.BoardDimensions.ROWS);

  for (let rowIndex = 0; rowIndex < Constants.BoardDimensions.ROWS; rowIndex++) {
      newBoard[rowIndex] = new Uint8Array(Constants.BoardDimensions.COLUMNS);
      for (let columnIndex = 0; columnIndex < Constants.BoardDimensions.COLUMNS; columnIndex++) {
          newBoard[rowIndex][columnIndex] = oldBoard[rowIndex][columnIndex];
      }
  }

  return newBoard;
}

Now store the board copy in a variable called nextBoard:

performMove(columnIndex) {
  let nextBoard = FourInARowGame.deepBoardCopy(this.currentBoard);
}

The next thing you need to do is to perform the move on the board, to do this you'll create a method called tryPerformMove():

tryPerformMove(columnIndex, nextBoard) {
    let isMoveValid = false;

    for (let i = nextBoard.length - 1; i > -1; i--) {
        let boardRow = nextBoard[i];
        let boardPosition = boardRow[columnIndex];

        if (boardPosition !== Constants.BoardToken.NONE) {
            continue;
        }

        boardRow[columnIndex] = FourInARowGame.playerColorToBoardToken(this.currentTurn);
        isMoveValid = true;
        break;
    }

    if (!isMoveValid) {
        return {
            status: Constants.MoveStatus.INVALID,
        };
    }

    return {
        status: Constants.MoveStatus.SUCCESS,
        board: nextBoard
    };
}

The method above checks the column in the board the player specified from the bottom to the top for an empty position and then attempts to add the current player's token to the board position. Later it returns the result.

There is a static method here called playerColorToBoardToken that was used, this sets the value in the board position to a numeric value that is associated with the current player's colour.

Add it to the FourInARowGame class too:

static createBoard() {
    // ...
}

static playerColorToBoardToken(playerColor) {
    switch (playerColor) {
        case Constants.PlayerColor.YELLOW:
            return Constants.BoardToken.YELLOW;
        case Constants.PlayerColor.RED:
            return Constants.BoardToken.RED;
        default:
            return Constants.BoardToken.NONE;
    }
}

Now you'll go back to the performMove() method and set the current game board to the board in the object returned from the tryPerformMove() method:

performMove(columnIndex) {
  let nextBoard = FourInARowGame.deepBoardCopy(this.currentBoard);

  let moveAttemptResult = this.tryPerformMove(columnIndex, nextBoard);

  if (moveAttemptResult.status === Constants.MoveStatus.INVALID) {
    return {
        board: nextBoard,
        winner: Constants.PlayerColor.NONE,
        status: {
            message: "Returned column is filled",
            value: Constants.MoveStatus.INVALID
        },
        winLine: []
    }
  }

  // From this point, the board move was successful.
  this.currentBoard = moveAttemptResult.board;
}

If the value of the moveAttemptResult.status is MoveStatus.Invalid then you return a MoveResult which has the same structure as the move data you returned in your fake playMove() method implementation.

Lastly, you need to create a method called evaluateGame() which will be used to check if the status of the game has changed and then returns a MoveResult.

For now, you'll just return the MoveResult of a successful move, which also indicates that the game is still in progress.

evaluateGame(board) {
    // From this point, you can assume that a successful move was made and the game will
    // continue on.
    return {
        board: board,
        winner: Constants.PlayerColor.NONE,
        status: {
            value: Constants.MoveStatus.SUCCESS
        },
        winLine: []
    };
}

Make sure that you return the result of this method in performMove():

performMove(columnIndex) {
  let nextBoard = FourInARowGame.deepBoardCopy(this.currentBoard);

  let moveAttemptResult = this.tryPerformMove(columnIndex, nextBoard);

  if (moveAttemptResult.status === Constants.MoveStatus.INVALID) {
    return {
        board: nextBoard,
        winner: Constants.PlayerColor.NONE,
        status: {
            message: "Returned column is filled",
            value: Constants.MoveStatus.INVALID
        },
        winLine: []
    }
  }

  // From this point, the board move was successful.
  this.currentBoard = moveAttemptResult.board;
  return this.evaluateGame(moveAttemptResult.board);
}

Now the MoveResult will show an updated board value based on the column the player placed their token in.

To complete your updates to the playMove() method, you'll add a few more lines to it:

playMove(columnIndex) {
    switch (this.status) {
        case Constants.GameStatus.START:
            this.status = Constants.GameStatus.IN_PROGRESS;
            break;
        case Constants.GameStatus.DRAW:
        case Constants.GameStatus.WIN:
            // The game is over at this point so
            // re-evaluate the latest board, returning the same game status
            // and board details.

            // TODO: Implement this properly
            console.log("Game already ended in win or draw. re-evaluating latest game state");
        default:
            break;
    }

    let moveResult = this.performMove(columnIndex);

    // Only change current turn while the game is still in progress.
    if (moveResult.status.value === Constants.MoveStatus.SUCCESS) {
        this.currentTurn = this.currentTurn === Constants.PlayerColor.YELLOW
            ? Constants.PlayerColor.RED
            : Constants.PlayerColor.YELLOW;
    }

    return moveResult;
}

You perform a move, update the current turn to the opposing player's turn then return the results of the move.

Testing Out Your Changes

You added quite a few changes, let's test them out.
Assuming you have a local HTTP server running at the root of the project, navigate to the server's address in your web browser and open the browser console window again.

First, enter the following line in your browser's console:

let game = window.fourInARowGame;

Now call the playMove() method with the columnIndex parameter set to 1 instead of 0 to add the token to the second column on the game board:

game.playMove(1);

You should see a MoveResult object returned. If you expand the object and then expand the board field, you'll see that the value 1 has been added to the bottom of the second column on the board.

If you do, congratulations!

If not, please go over this post carefully to check for mistakes you may have made.

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 2: Beginning

Colin Kiama — Wed, 19 Apr 2023 22:18:39 +0000

Intro

In the last blog post, you set up the prerequisites and file structure of the project.

Now let's start implementing the logic of the game.

Rules Of The Game

Four-in-a-row is a two-player game played on a 6 (rows) x 7 (columns) rack board, where the objective is to be the first player to form a vertical, horizontal or vertical line with four of your tokens.

The player who meets the objective first, wins. If the board is filled and there is no winner, the game ends in a draw.

Each token a player puts down a column falls to the lowest available space within a column.

Preparing To Implement The Logic

Constants

Now that you'll know the rules, you'll now write down relevant constant values that you'll be using throughout this project.

Create a new JavaScript file called index.js in src/constants.

Now add the following to the file you've just created:

export const GameStatus = {
  IN_PROGRESS: "in-progress",
  START: "start",
  WIN: "win",
  DRAW: "draw",
};

export const MoveStatus = {
  INVALID: "invalid",
  WIN: "win",
  SUCCESS: "success",
  DRAW: "draw",
};

export const PlayerColor = {
  NONE: "none",
  YELLOW: "yellow",
  RED: "red",
};

export const BoardDimensions = {
  ROWS: 6,
  COLUMNS: 7,
  WIN_LINE_LENGTH: 4,
};

export const BoardToken = {
  NONE: 0,
  YELLOW: 1,
  RED: 2,
};

Setting Up The State Machine

Now you will create a state machine which represents a four-in-a-row game.

Create a new JavaScript file called FourInARowGame.js in /src and add the following to it:

import * as Constants from "./constants/index.js";

export default class FourInARowGame {
  // State machine code is going to be here!
}

These lines reference the constants you wrote in src/constants/index.js, making them available to use in FourInARowGame.js. It also creates a class called FourInARowGame.

Simple Fields

To get the game going, you'll need to be aware of the following:

The current game's status - To know whether the game has ended or not and if it has ended, how it ended
The current turn - To figure out which player's token to put down when a move is next played
The starting colour player token - To determine who starts the game
The state of the board - To know which tokens have been placed on the board

Let's add these fields to your FourInARowGame class:

export default class FourInARowGame {
  startingColor;
  currentTurn;
  status;
  currentBoard;

  // More to come...
}

Regarding the starting colour, there isn't any rule about which colour should start but you'll set it to yellow:

export default class FourInARowGame {
  // ..

  constructor() {
    this.startingColor = Constants.PlayerColor.YELLOW;
  }
}

Next up is the currentTurn and status. Since the game has just started, you'll set the value of currentTurn to the value of startingColor and set the value of status to GameStatus.START:

export default class FourInARowGame {
  // ..

  constructor() {
    this.startingColor = Constants.PlayerColor.YELLOW;
    this.currentTurn = this.startingColor;
    this.status = Constants.GameStatus.START;
  }
}

Initialising The Board Field

Now, for the currentBoard field, you will initially set its value to an empty board; a single board in a game of Four-In-A-Row has 6 rows and 7 columns (42 positions in total). You'll use an array of arrays to represent this structure in JavaScript.

The first step is creating a static method in the FourInARowGame class that creates an empty board for you:

export default class FourInARowGame {
  // ..

  static createBoard() {
    let board = new Array(Constants.BoardDimensions.ROWS);

    for (let i = 0; i < Constants.BoardDimensions.ROWS; i++) {
      board[i] = new Uint8Array(Constants.BoardDimensions.COLUMNS);
      board[i].fill(Constants.BoardToken.NONE);
    }

    return board;
  }
}

Notice that Uint8Array was used instead of Array in the enclosed loop. This is because numbers in JavaScript are stored as the Number data type by default, which stores 64-bit floating point numbers. You will only be using 3 possible numbers in each board position so Uint8 makes more sense which is the smallest numeric data type that your range of possible numbers fits in.

This saves memory considering that there are 42 positions in a board.

Now you can finish off initialising the currentBoard field:

export default class FourInARowGame {
  constructor() {
    // ..

    this.currentBoard = FourInARowGame.createBoard();
  }
}

You are now ready to implement the logic that runs when a player makes a move.

You'll do this in the next post!

Thanks for reading!

Making Four-In-A-Row Using JavaScript - Part 1: Setup

Colin Kiama — Wed, 19 Apr 2023 22:17:59 +0000

Intro

In this blog series, I'll be walking you through how to make an HTML 5 Canvas Game.

Outline:

First, you'll create the core logic of the game - A back-end.
After implementing the back-end logic of the game, you'll create a front-end for the game using the HTML5 Canvas API.

The benefit of this approach is that you reduce the scope of bugs with core game logic by storing it all in a state machine object. The front end will simply be an interface for interacting with the state machine object.

Another benefit of this approach is that you'll have flexibility when choosing how to implement the game's front end. Maybe you'll find another way to use the HTML5 Canvas API. Maybe you'll use the built-in HTML elements. You could even try recreating the front end with WebGL or a game engine.

After this tutorial, you will be free to explore these various options!

Now, let's get started!

Prerequisites

You'll need the following to be able to complete this tutorial:

A text editor (I recommend using Visual Studio Code if you're unsure) - This is where you'll be writing your code.
A Web browser with access to developer tools - you'll be interacting with the browser console throughout the tutorial, especially at the start since the game won't have a front-end yet. I'll be using Google Chrome throughout this tutorial.
An HTTP Server (I recommend using the Live Server Visual Studio Code extension). This is required because you'll be using ECMAScript Modules without any JavaScript build tools. Attempting to try this without an HTTP server will result in a CORS error.

Note: I strongly recommend using an HTTP Server with live reload support. You'll feel at peace knowing that you don't have to manually refresh your browser and possibly clear your cache to see the latest changes that you've made!

Setup

Directory Structure

First, create a directory where you'll write the code for the game. I suggest naming it "four-in-a-row".

Then, create this directory structure in the "four-in-a-row" project:

/src
   /constants

The HTML File

Now let's set up the HTML file.

Create a file called index.html in the root of the project directory.

Add this to the file's contents:

<!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>
    <script src="src/index.js" type="module"></script>
  </body>
</html>

The code above sets the title of your page to "Four in a row", matches the page's width and scale to the device's screen width and scale, and references a JavaScript file called index.js. This will be the entry point for your code for the game.

Entry point

Now, create the file: src/index.js.

You'll now do a quick check to see if the script file has been referenced correctly.

Add the following to src/index.js:

console.log("Hello world");

Next, start an HTTP server in the root of your project directory.

When you visit the address of the server, you'll see an empty page. This is normal, you haven't added any controls or styling. However, if you open the developer tools in your web browser and select the console, you should see the following message:

Hello world

If you don't see the message above, you probably didn't follow the instructions properly. Please go back over the previous steps and ensure that you've completed them.

Otherwise, congratulations! You've completed the first part of this tutorial! 🥳

In the next post, you'll begin the creation of the back end by creating a four-in-a-row state machine!

Thanks for reading!

Get started with debugging Vala programs in Sublime Text

Colin Kiama — Mon, 23 Aug 2021 09:50:18 +0000

Prerequisites

This tutorial assumes that you have a Vala program setup with Meson Build project structure.

Vala is pretty underrated programming language in my opinion (but I'll probably get into that in another post). Find out more about it here: https://wiki.gnome.org/Projects/Vala

Find out more about meson here: https://mesonbuild.com

Step 1

Install the Sublime Debugger package: https://packagecontrol.io/packages/Debugger

Step 2

Install the LLDB adapter for it: Debugger > Install Adapters

Step 3

Build your program if you haven't already. In the code's root directory, run this command:

meson build && ninja -C build

Note: Meson Debug Build. The setup command use the 'debug' build flag by default. It also inserts debug build flag arguments too like -g.

Step 4

Ensure that you've opened a sublime text project. If not, create one. It's necessary for the debugger to work. You can do so by selecting: Project > Save Project As..

Save the project file to the root directory of your code.

Step 5

Add debugger configuration project settings

You can also add debugger configuration templates in Debugger > Add or Select Configuration then select the type of configuration you want to add. For this project, we'll pick lldb.

At the time of writing this, these were the following options:

LLDB: Launch
LLDB: Attach by PID
LLDB: Attach by Name
LLDB: Custom Launch
LLDB: Debug Cargo Output
LLDB: Debug Cargo Tests

For this project , we'll pick LLDB: Launch.

Now the project configuration file should open up with the configuration template added.

Customise the debugger_configurations field so that it looks something like this:


    "debugger_configurations":
    [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Launch (LLDB)",
            "program": "${workspaceFolder}/build/<your_program_name_here>",
            "args": [""],
            "cwd": "${workspaceFolder}",
            "terminal": "console"
        },
    ]

Step 6

Start debugging.
Select: Debugger > Open, to reveal the debugger's UI. You'll be able to press the play button to get started.

You can place breakpoints by clicking left of line numbers in the editor.

In the Debugger UI, the down arrow is for stepping over and the left and right arrows are for stepping out and in your code respectively.

This is just a small taste of what the debugger pakcage offers. You can find out more about it in the project's readme: https://github.com/daveleroy/sublime_debugger

Happy debugging! 😄