Tic-Tac-Toe is one of the simplest yet most enjoyable games that people of all ages love to play. It’s a timeless game that perfectly balances logic and strategy. Today, developers can take this classic game to a new level by creating a digital version using Phaser.js, a powerful HTML5 game development framework. In this article, we’ll walk through how to create a fun and interactive Tic-Tac-Toe game using Phaser.js.the tic tac
The great thing about Phaser.js is that it simplifies game creation. You don’t need to be an expert in JavaScript or game design to build engaging browser games. With just a few steps, you can bring Tic-Tac-Toe to life, complete with a polished interface, click events, animations, and a touch of interactivity.
What Is Phaser.js?
Phaser.js is a free, open-source JavaScript framework for building games that run directly in web browsers. It supports both 2D and lightweight 3D games, making it a go-to choice for web developers. Phaser simplifies the game loop, input handling, animations, and physics — meaning you can focus more on creativity and less on complex coding logic.
Using Phaser.js, you can create everything from puzzle games to arcade shooters and even strategy games. It is fast, flexible, and works seamlessly on desktops and mobile browsers. For a project like Tic-Tac-Toe, Phaser provides an ideal balance between simplicity and performance.
Setting Up the Project
Before you begin creating your Tic-Tac-Toe game, you’ll need a basic development setup.
Install or include Phaser.js:
You can add the Phaser library by linking it in your HTML file. Use the latest Phaser version from a CDN or download it to your project folder.
Create your files:
You’ll typically have three files for this project:
index.html – your main HTML structure.
style.css – for visual styling.
game.js – for the actual game logic using Phaser.js.
- Basic HTML structure:
Your HTML file will include a simple element where the game will render. The Phaser script and your custom game script should also be linked at the bottom of the HTML file.
Initializing Phaser.js
Once your environment is ready, you can initialize Phaser by creating a new game configuration object in your game.js file. This object defines the width, height, background color, and scenes of your game.
const config = {
type: Phaser.AUTO,
width: 400,
height: 400,
backgroundColor: '#ffffff',
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
This code sets up a Phaser game window. The preload, create, and update functions control the game’s flow.
Designing the Tic-Tac-Toe Board
A Tic-Tac-Toe board has 3 rows and 3 columns, making 9 cells in total. You can represent each cell as a rectangle or an image. Using Phaser’s graphics module, you can draw lines to divide the grid.
function create() {
const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0x000000 } });
// Vertical lines
graphics.strokeLineShape(new Phaser.Geom.Line(133, 0, 133, 400));
graphics.strokeLineShape(new Phaser.Geom.Line(266, 0, 266, 400));
// Horizontal lines
graphics.strokeLineShape(new Phaser.Geom.Line(0, 133, 400, 133));
graphics.strokeLineShape(new Phaser.Geom.Line(0, 266, 400, 266));
// Initialize the board
this.board = [
['', '', ''],
['', '', ''],
['', '', '']
];
this.currentPlayer = 'X';
}
This simple code draws the Tic-Tac-Toe board. Each section of the grid will later detect clicks, allowing players to place their X or O.
Adding Player Interaction
The next step is to detect when a player clicks on a square and update the board accordingly. Phaser makes this process easy with its input system.
You can divide the board into clickable areas using Phaser’s zone feature:
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
let zone = this.add.zone(col * 133, row * 133, 133, 133).setOrigin(0);
zone.setInteractive();
zone.on('pointerdown', () => handleMove.call(this, row, col));
}
}
Now, every time the player clicks on a cell, the handleMove function will run to mark X or O.
Creating the Game Logic
The logic of Tic-Tac-Toe is simple: players take turns marking X and O on the grid. The goal is to get three symbols in a row — horizontally, vertically, or diagonally.
Here’s a sample logic function for handling moves:
function handleMove(row, col) {
if (this.board[row][col] !== '') return; // cell already used
this.board[row][col] = this.currentPlayer;
let text = this.add.text(col * 133 + 50, row * 133 + 40, this.currentPlayer, {
fontSize: '64px',
color: '#000'
});
if (checkWin(this.board, this.currentPlayer)) {
this.add.text(100, 380, `${this.currentPlayer} Wins!`, { fontSize: '24px', color: '#ff0000' });
this.scene.pause();
return;
}
if (isBoardFull(this.board)) {
this.add.text(100, 380, `It's a Draw!`, { fontSize: '24px', color: '#0000ff' });
this.scene.pause();
return;
}
this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
}
This function updates the board, displays the player’s symbol, checks for a win, and switches turns.
Checking for Wins
Winning conditions in Tic-Tac-Toe are straightforward. A player wins when three of their marks align in a row, column, or diagonal.
Here’s how to implement that logic:
function checkWin(board, player) {
for (let i = 0; i < 3; i++) {
if (board[i][0] === player && board[i][1] === player && board[i][2] === player) return true;
if (board[0][i] === player && board[1][i] === player && board[2][i] === player) return true;
}
if (board[0][0] === player && board[1][1] === player && board[2][2] === player) return true;
if (board[0][2] === player && board[1][1] === player && board[2][0] === player) return true;
return false;
}
This function checks all possible winning combinations for a given player.
Detecting a Draw
A draw happens when all cells are filled and no player has won. You can check this easily:
function isBoardFull(board) {
return board.every(row => row.every(cell => cell !== ''));
}
When this function returns true and no winner is found, the game ends in a tie.
Adding Visual Effects
To make your Tic-Tac-Toe game more fun, you can add visual feedback and animations. For instance:
Use color highlights when a player wins.
Add a short animation when placing X or O.
Display a restart button to play again.
You can use Phaser’s built-in tweens to add animations easily. Example:
this.tweens.add({
targets: text,
scale: 1.5,
duration: 200,
yoyo: true
});
This code will make each move “pop” visually for added engagement.
Restarting the Game
Once a game finishes, players should be able to restart easily. You can create a restart button that resets the board:
let restartButton = this.add.text(150, 420, 'Restart', { fontSize: '24px', color: '#008000' })
.setInteractive()
.on('pointerdown', () => this.scene.restart());
This provides a smooth and simple user experience.
Expanding the Game
Once you’ve built the basic version, you can expand your Tic-Tac-Toe project in exciting ways:
Add AI: Let players compete against the computer using simple AI logic.
Add Multiplayer Mode: Use WebSocket or Firebase for real-time multiplayer gameplay.
Add Themes: Change the background, grid colors, or player icons for a more personalized look.
Add Score Tracking: Keep track of wins, losses, and draws across multiple rounds.
These upgrades make your game more engaging and replayable.
Tips for Beginners
Start small: Focus on the game’s logic before adding animations or extra features.
Keep your code organized: Use functions and comments to separate different parts of the game.
Test often: Run your game after every major change to catch bugs early.
Use Phaser documentation: It’s an excellent way to learn about new features.
Why Phaser.js Is Great for Learning Game Development
Phaser.js is an excellent choice for developers who want to explore interactive web games. It combines simplicity with powerful features, allowing you to focus on gameplay instead of technical hurdles. The Tic-Tac-Toe project is a perfect entry point into game programming because it helps you understand the core aspects of game design, such as input handling, game loops, win detection, and user feedback.
Once you master small games like Tic-Tac-Toe, you can move on to more complex ones — all within the same framework.
Conclusion
Creating a Tic-Tac-Toe game using Phaser.js is an exciting and rewarding project that enhances your understanding of both JavaScript and interactive game design. From drawing the board and handling clicks to adding logic and animations, each step brings you closer to mastering game development.
Phaser.js allows even beginner developers to create something fun, functional, and visually appealing with minimal effort. Whether you’re making a simple browser game for learning or building a foundation for more advanced projects, Tic-Tac-Toe is a great starting point.
So open your code editor, set up Phaser.js, and start building your own Tic-Tac-Toe game today — a small but mighty step into the world of game development.
