Tic-Tac-Toe is a classic paper-and-pencil game often played by children and adults alike. It’s a two-player game played on a 3×3 grid. The players typically use ‘X’ and ‘O’ symbols to mark their moves on the grid, taking turns to do so. The objective of the game is to form a line of three of your symbols either horizontally, vertically, or diagonally on the grid.
The game starts with an empty grid, and players alternate turns placing their symbol in an empty cell. The first player to successfully create a line of three of their symbols wins the game. If all cells on the grid are filled without any player achieving a winning line, the game ends in a draw.
Tic Tac Toe is often used as a teaching tool for introducing the concepts of strategy, planning, and decision-making in a simple and accessible format. It’s also frequently implemented as a programming exercise due to its straightforward rules and structure, making it a great beginner project for learning game development or programming languages like JavaScript, Python, or Java.
You may also like : Design a Chess Board using HTML and CSS
Follow this video for complete guidance :
https://www.youtube.com/watch?v=T-65_AZDdx0&ab_channel=LetsTryThis%21
Tic Tac Toe, also known as noughts and crosses or Xs and Os, has a long history and its origins are not entirely clear. The game is simple in nature, requiring only a grid and two different symbols for players, making it likely that variations of the game have been played for centuries in different cultures.
One theory suggests that Tic-Tac-Toe may have originated in ancient Egypt, as early forms of the game have been found carved into the roofs of ancient Egyptian temples. Other theories propose that the game could have originated in ancient Rome or Greece, where similar grid-based games were played.
The modern version of Tic Tac Toe that we know today became popular in the 20th century, especially among schoolchildren, due to its simplicity and ease of play. It has since become a ubiquitous game, played both on paper and electronically, and has been implemented in various forms in computer software and online platforms. Despite its simplicity, Tic-Tac-Toe remains a timeless and engaging game enjoyed by people of all ages around the world.
Full Source Code for Tic-Tac-Toe Game:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tic-Tac-Toe Game using JavaScript</title>
<style type="text/css">
.board{
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}
.cell{
border:1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
cursor: pointer;
}
</style>
</head>
<body>
<div class="board" id="board"></div>
<script type="text/javascript">
const board = document.getElementById('board');
let currentPlayer = 'X';
const cells = [];
for(let i=0;i<9;i++){
const cell = document.createElement('div');
cell.classList.add('cell');
cell.addEventListener('click',handleClick);
board.appendChild(cell);
cells.push(cell);
}
function handleClick(e){
const cell = e.target;
if(cell.textContent === ''){
cell.textContent = currentPlayer;
currentPlayer = currentPlayer === 'X'?'0':'X';
}
}
</script>
</body>
</html>
