Here's a simple implementation of a tic-tac-toe game using HTML, CSS, and JavaScript:
The game includes an AI-controlled computer player that makes random moves. The game ends when a player gets 5 symbols in a row horizontally, vertically, or diagonally, or if all the cells are filled without a winner.
You can copy this code and save it as an HTML file to see the tic-tac-toe game in action. When a player wins or the game ends in a draw, an alert will be shown, and you can start a new game by clicking "OK" on the alert.
Feel free to customize the styling or add additional features to the game as per your requirements.
<!DOCTYPE html>
<!-- https://www.websitefunctions.com -->
<html><head>
<title>Tic-Tac-Toe Game</title>
<style>
.board {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
width: 400px;
height: 400px;
}
.cell {
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Tic-Tac-Toe Game</h1>
<div class="board" id="board"></div>
<script>
// Game variables
let currentPlayer = "X";
let moves = 0;
let gameOver = false;
const cells = [];
const boardElement = document.getElementById("board");
// Create the game board
for (let i = 0; i < 8; i++) {
cells[i] = [];
for (let j = 0; j < 8; j++) {
const cell = document.createElement("div");
cell.className = "cell";
cell.addEventListener("click", () => makeMove(i, j));
cells[i][j] = cell;
boardElement.appendChild(cell);
}
}
// Event listener for cell clicks
function makeMove(row, col) {
const cell = cells[row][col];
if (cell.textContent === "" && !gameOver) {
cell.textContent = currentPlayer;
moves++;
if (checkWin(row, col)) {
alert("Player " + currentPlayer + " wins!");
gameOver = true;
} else if (moves === 64) {
alert("It's a draw!");
gameOver = true;
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
if (currentPlayer === "O" && !gameOver) {
setTimeout(makeComputerMove, 500);
}
}
}
}
// Check for a winning combination
function checkWin(row, col) {
const directions = [
{ dx: 1, dy: 0 }, // horizontal
{ dx: 0, dy: 1 }, // vertical
{ dx: 1, dy: 1 }, // diagonal (top-left to bottom-right)
{ dx: 1, dy: -1 } // diagonal (bottom-left to top-right)
];
for (let dir of directions) {
let count = 1;
let r = row;
let c = col;
// Check in positive direction
while (
r + dir.dy >= 0 &&
r + dir.dy < 8 &&
c + dir.dx >= 0 &&
c + dir.dx < 8 &&
cells[r + dir.dy][c + dir.dx].textContent === currentPlayer
) {
count++;
r += dir.dy;
c += dir.dx;
}
// Check in negative direction
r = row;
c = col;
while (
r - dir.dy >= 0 &&
r - dir.dy < 8 &&
c - dir.dx >= 0 &&
c - dir.dx < 8 &&
cells[r - dir.dy][c - dir.dx].textContent === currentPlayer
) {
count++;
r -= dir.dy;
c -= dir.dx;
}
if (count >= 5) {
return true; // Player wins
}
}
return false; // No win
}
// Make a move for the computer player
function makeComputerMove() {
const availableMoves = [];
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 8; j++) {
if (cells[i][j].textContent === "") {
availableMoves.push({ row: i, col: j });
}
}
}
const randomMove = availableMoves[Math.floor(Math.random() * availableMoves.length)];
makeMove(randomMove.row, randomMove.col);
}
</script>
</body>
</html>