Demo of Phaser Tic Tac Toe
Welcome back! In our previous dev log, we discussed the potential of Discord Activities as an emerging game platform. Now we’ll start building our own Discord-integrated game step-by-step. This will be structured into three stages:
Stage 1: Create a simple web demo game using Phaser 3 (today’s post!)
Stage 2: Integrate our game into Discord Activities
Stage 3: Add real-time multiplayer gameplay
For today we’ll detail Stage 1, where we'll build a standalone, customizable Tic Tac Toe game using Phaser and React as our foundational tech stack.
We won’t go into too much detail about how Phaser works (we’ll save that for another day), but if you’d like to learn more about the tool check out Phaser documentation and Scott Westover’s Youtube channel for tutorials.
🎮 About the Game & Framework
Our goal in this post is to create a small, easily customizable Tic Tac Toe demo game using Phaser 3, a JavaScript framework designed specifically for developing browser-based HTML5 games. Although Godot, Cocos, and Unity are powerful game engines as well, we chose to build a Phaser demo because it’s fast to develop, easy to debug, and integrates easily with other web technologies we'll use in later phases. Additionally, if you have experience with web development or JavaScript (like me!), you'll find Phaser intuitive and easy to pick up.
If you'd prefer not to set up your own environment immediately, you can clone my repository and follow along with the code in the next steps.
🚀 Frameworks and Tools for this demo
Phaser 3: A powerful HTML5 game framework.
React + Vite: For building a responsive UI and quick development workflow.
pnpm (or npm): For dependency management and easy setup.
TypeScript: Ensures maintainability and clarity of our game logic.
🧑💻 Let's Build Our Tic Tac Toe Demo
✅ Step 1: Initialize the Project
Open your terminal and run these commands to set up your project with Phaser’s official template:
pnpm install phasermkdir tic-tac-toe
cd tic-tac-toepnpm create @phaserjs/game@latest
Respond to the CLI prompts as follows:
Project Name: tic-tac-toe
Client Framework: React
Template: Minimal (Single Phaser Scene)
Development Language: TypeScript
Phaser will automatically configure a minimal React + TypeScript + Vite project.
✅ Step 2: Setting up the Tic Tac Toe Scene
Replace the contents of your Game.ts file (src/game/scenes/Game.ts) with our Tic Tac Toe game logic from below:
import from "phaser";
import from "../EventBus";
export class Game extends Scene {
board: string[][];
currentPlayer: string;
cellSize: number;
gameOver: boolean;
constructor()
init() {
// Initialize game state variables
this.board = [
["", "", ""],
["", "", ""],
["", "", ""],
];
this.currentPlayer = "X";
this.cellSize = 200; // assuming a 600x600 game canvas
this.gameOver = false;
}
preload() {
// Optionally load a background image (or any other assets)
this.load.setPath("assets");
this.load.image("background", "bg.png");
}
create() {
// Optionally add a background image stretched to cover the canvas
this.add.image(300, 300, "background").setDisplaySize(600, 600);
// Draw the grid lines using a Graphics object
const graphics = this.add.graphics();
graphics.lineStyle(4, 0x000000, 1);
// Vertical grid lines
graphics.strokeLineShape(
new Phaser.Geom.Line(this.cellSize, 0, this.cellSize, 600)
);
graphics.strokeLineShape(
new Phaser.Geom.Line(this.cellSize * 2, 0, this.cellSize * 2, 600)
);
// Horizontal grid lines
graphics.strokeLineShape(
new Phaser.Geom.Line(0, this.cellSize, 600, this.cellSize)
);
graphics.strokeLineShape(
new Phaser.Geom.Line(0, this.cellSize * 2, 600, this.cellSize * 2)
);
// Create interactive zones for each cell of the grid
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
const cellX = col * this.cellSize;
const cellY = row * this.cellSize;
const zone = this.add
.zone(cellX, cellY, this.cellSize, this.cellSize)
.setOrigin(0)
.setInteractive();
zone.row = row;
zone.col = col;
zone.on("pointerdown", () => {
this.handleCellClick(row, col);
});
}
}
// Let the rest of the app know the current scene is ready.
EventBus.emit("current-scene-ready", this);
}
handleCellClick(row: number, col: number) {
// Ignore clicks if the game is over or the cell is already taken
if (this.gameOver || this.board[row][col] !== "")
// Mark the board and draw the player's symbol
this.board[row][col] = this.currentPlayer;
this.drawMark(row, col, this.currentPlayer);
// Check for win or draw conditions
if (this.checkWin(this.currentPlayer)) {
this.gameOver = true;
this.showMessage(`$ wins!`);
} else if (this.checkDraw()) {
this.gameOver = true;
this.showMessage("Draw!");
} else {
// Switch turns
this.currentPlayer = this.currentPlayer === "X" ? "O" : "X";
}
}
drawMark(row: number, col: number, mark: string | string[]) {
// Calculate center position for the text in the cell
const posX = col * this.cellSize + this.cellSize / 2;
const posY = row * this.cellSize + this.cellSize / 2;
this.add
.text(posX, posY, mark, {
fontSize: "120px",
color: "#000",
})
.setOrigin(0.5);
}
checkWin(player: string) {
// Check rows for win
for (let i = 0; i < 3; i++) {
if (
this.board[i][0] === player &&
this.board[i][1] === player &&
this.board[i][2] === player
) {
return true;
}
}
// Check columns for win
for (let j = 0; j < 3; j++) {
if (
this.board[0][j] === player &&
this.board[1][j] === player &&
this.board[2][j] === player
) {
return true;
}
}
// Check diagonals for win
if (
this.board[0][0] === player &&
this.board[1][1] === player &&
this.board[2][2] === player
) {
return true;
}
if (
this.board[0][2] === player &&
this.board[1][1] === player &&
this.board[2][0] === player
) {
return true;
}
return false;
}
checkDraw() {
// If any cell is empty, it's not a draw yet
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (this.board[i][j] === "") {
return false;
}
}
}
return true;
}
showMessage(message: string | string[]) {
// Create a semi-transparent overlay and display the message
const graphics = this.add.graphics();
graphics.fillStyle(0xffffff, 0.8);
graphics.fillRect(0, 250, 600, 100);
this.add
.text(300, 300, message, {
fontSize: "40px",
color: "#000",
})
.setOrigin(0.5);
}
}
This code defines a Phaser scene that implements a basic Tic Tac Toe game. Here's a simple breakdown of what each part does:
Initialization:
The init() method sets up the game’s initial state, including an empty 3x3 board, setting the starting player to "X", defining the cell size for a 600x600 canvas, and marking the game as not over.Asset Loading:
The preload() method loads a background image from the assets folder. This image is later used to fill the game canvas.Scene Setup:
In the create() method, the scene displays the background and draws the Tic Tac Toe grid by creating vertical and horizontal lines. It then creates interactive zones for each cell on the board so that when you click on a cell, it triggers a cell-click handler.Game Logic:
The handleCellClick() method handles player moves. When a cell is clicked, it:Checks if the cell is already occupied or if the game is over.
Updates the board with the current player’s mark.
Draws the player's symbol in the cell.
Checks if the move wins the game or if the game ends in a draw.
Switches the turn to the other player if the game continues.Display Updates:
The drawMark() method visually displays a player's mark (X or O) in the center of the clicked cell.
The showMessage() method creates an overlay to display messages (like a win or draw announcement) once the game ends.Win/Draw Conditions:
The checkWin() method examines rows, columns, and diagonals to determine if the current player has won.
The checkDraw() method checks if every cell on the board is filled, indicating a draw if no win has been detected.
Overall, this code creates a functional Tic Tac Toe game where two players on the same computer can click on cells to place their marks, with the game automatically determining if someone wins or if the game ends in a draw. (We’ll eventually add online multiplayer functionality so you can play with your friends!)
🚀 Running Your Game
Within the root directory of the game run:
pnpm install
pnpm run dev
Open the displayed URL (usually http://localhost:8080/) to see your Tic Tac Toe game live!
🌟 Next Steps & Future Stages
Now you now have a functional Tic Tac Toe game built with Phaser and React!
Up next:
Stage 2: Integrate our Phaser game into Discord Activities using the Embedded App SDK.
Stage 3: Add multiplayer functionality with real-time synchronization.
We'll provide walkthroughs and hands-on code to help you get started quickly. Stay tuned, and see you in the next dev log next week!
Happy building! 🚀✨
