Looking for a simple Tic Tac Toe HTML5 game source code project? This free Tic Tac Toe game is created using HTML, CSS, and JavaScript and can run directly in a modern web browser.
It is a useful beginner project for anyone who wants to learn how JavaScript handles game logic, player turns, winning combinations, and user interaction.
Game Features
- Two-player Tic Tac Toe game
- Simple and modern design
- Player X and Player O turns
- Automatic winner detection
- Draw detection
- Restart game button
- No external libraries
- Easy to customize
- Works in modern web browsers
How to Use This Game
You can run this game without installing any special software.
Step 1: Create an HTML File
Create a new file named:
index.html
Step 2: Add the Code
Copy the complete source code below and paste it into the index.html file.
Step 3: Open the File
Save the file and open it in Chrome, Edge, Firefox, or another modern browser.
The Tic Tac Toe game will load automatically.
Complete Tic Tac Toe Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe Game</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #111827;
font-family: Arial, sans-serif;
color: white;
}
.game-container {
width: 100%;
max-width: 420px;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 8px;
}
.status {
margin-bottom: 20px;
font-size: 18px;
color: #d1d5db;
}
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
.cell {
aspect-ratio: 1;
border: none;
border-radius: 10px;
background: #1f2937;
color: white;
font-size: 48px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.cell:hover {
background: #374151;
}
.cell.x {
color: #38bdf8;
}
.cell.o {
color: #f472b6;
}
button.restart {
margin-top: 20px;
padding: 11px 24px;
border: none;
border-radius: 7px;
background: #2563eb;
color: white;
font-size: 16px;
cursor: pointer;
}
button.restart:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Tic Tac Toe</h1>
<div class="status" id="status">
Player X's Turn
</div>
<div class="board" id="board">
<button class="cell" data-index="0"></button>
<button class="cell" data-index="1"></button>
<button class="cell" data-index="2"></button>
<button class="cell" data-index="3"></button>
<button class="cell" data-index="4"></button>
<button class="cell" data-index="5"></button>
<button class="cell" data-index="6"></button>
<button class="cell" data-index="7"></button>
<button class="cell" data-index="8"></button>
</div>
<button class="restart" onclick="restartGame()">
Restart Game
</button>
</div>
<script>
const cells = document.querySelectorAll(".cell");
const statusText = document.getElementById("status");
let board = ["", "", "", "", "", "", "", "",];
let currentPlayer = "X";
let gameActive = true;
const winningPatterns = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
cells.forEach(cell => {
cell.addEventListener("click", handleCellClick);
});
function handleCellClick(event) {
const index = event.target.dataset.index;
if (board[index] !== "" || !gameActive) {
return;
}
board[index] = currentPlayer;
event.target.textContent = currentPlayer;
event.target.classList.add(currentPlayer.toLowerCase());
checkWinner();
}
function checkWinner() {
let winnerFound = false;
for (let pattern of winningPatterns) {
const a = board[pattern[0]];
const b = board[pattern[1]];
const c = board[pattern[2]];
if (
a !== "" &&
a === b &&
b === c
) {
winnerFound = true;
break;
}
}
if (winnerFound) {
statusText.textContent =
"Player " + currentPlayer + " Wins!";
gameActive = false;
return;
}
if (!board.includes("")) {
statusText.textContent = "It's a Draw!";
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusText.textContent =
"Player " + currentPlayer + "'s Turn";
}
function restartGame() {
board = ["", "", "", "", "", "", "", "",];
currentPlayer = "X";
gameActive = true;
statusText.textContent = "Player X's Turn";
cells.forEach(cell => {
cell.textContent = "";
cell.classList.remove("x", "o");
});
}
</script>
</body>
</html>
How the Game Works
The game board contains nine clickable cells.
JavaScript stores the current state of each cell and keeps track of whose turn it is. After every move, the script checks the possible winning combinations.
There are eight possible winning combinations:
- Three horizontal rows
- Three vertical columns
- Two diagonal lines
If one player completes a winning combination, the game displays the winner. If all nine cells are filled without a winner, the game displays a draw message.
How to Customize the Game
You can easily change the appearance of the game by editing the CSS.
For example, to change the board background:
background: #1f2937;
You can change the X color:
color: #38bdf8;
And the O color:
color: #f472b6;
You can also change the button color, board spacing, font size, border radius, and other visual elements.
Can I Add More Features?
Yes. This basic project can be expanded with many features, such as:
- Score tracking
- Single-player mode
- Computer opponent
- Difficulty levels
- Sound effects
- Winning animations
- Player name input
- Dark and light themes
- Mobile touch improvements
Adding these features is also a useful way to practice JavaScript.
Can Beginners Use This Source Code?
Yes. This project is suitable for beginners because the complete game is contained in one HTML file.
You can experiment with the HTML structure, CSS styling, and JavaScript functions separately to understand how each part works.
Final Thoughts
Tic Tac Toe is a small but useful project for learning the basics of interactive web development.
By modifying this source code, you can learn about JavaScript arrays, functions, event listeners, conditional logic, and game-winning conditions while building a working HTML5 browser game.
More free HTML, CSS, and JavaScript game source code will be added to this website.
SEO Information
SEO Title:
Free Tic Tac Toe Game Source Code in HTML, CSS & JavaScript
Slug:free-tic-tac-toe-game-source-code
Meta Description:
Get free Tic Tac Toe game source code built with HTML, CSS and JavaScript. Learn how to create, customize and run a simple two-player HTML5 browser game.
Category:
HTML Games / JavaScript Games
Suggested Keywords:free tic tac toe source code, tic tac toe HTML game, HTML5 game source code, JavaScript tic tac toe, free JavaScript game, HTML CSS JavaScript game, browser game source code