PROJECT TITLE

A Mini Project Report

Submitted in Partial fulfillment for the award of
Bachelor of Technology in CSE-AIDS

Submitted to
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA
BHOPAL (M.P)

MINI PROJECT REPORT

Submitted by
Yash kumar soni [Roll no. = 227]
Under the supervision of
Jyoti pasi
Designation

Department of CSE-AIDS
Lakshmi Narain College of Technology, Bhopal (M.P.)

Session
2023-24
LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL

DEPARTMENT OF CSE-AIDS

CERTIFICATE

This is to certify that the work embodied in this project work entitled ”Tic Tac Toe
Game” has been satisfactorily completed by the Yash kumar soni (Roll no. =
227). It is a bonafide piece of work, carried out under the guidance in
Department of CSE- AIDS, Lakshmi Narain College of Technology, Bhopal
for the partial fulfillment of the Bachelor of Technology during the academic
year 2023-2024.

Jyoti Pasi

Approved By

Dr. Tripti Saxena

Professor & Head

Department of CSE-AIDS
LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL

DEPARTMENT OF CSE-AIML

ACKNOWLEDGEMENT

We express our deep sense of gratitude to Prof. J YOTI PASI) department

of CSE-AIDS L.N.C.T., Bhopal. Whose kindness valuable guidance and timely
help encouraged me to complete this project.

A special thank goes to Dr. Tripti Saxena (HOD) who helped me in

completing this project work. He exchanged his interesting ideas & thoughts
which made this project work successful.

We would also thank our institution and all the faculty members without
whom this project work would have been a distant reality.

Signature

Yash kumar soni (Roll No. = 227)

 INDEX

S.NO. TOPICS PAGE No.

1. Problem Domain Description 1

2. Literature Survey 2-3

3. Mini objective & scope of project 4-5

4. Problem Analysis and requirement specification 6-8

5. Detailed Design(Modeling and ERD/DFD) 9-10

6. Hardware/Software platform environment 11

7. Snapshots of Input & Output 12

8. Coding 13-23

9. Project limitation and Future scope 24-25

10. References 26

Total 26 Pages
 CHAPTER 1

Problem Domain Description

Overview
Tic Tac Toe is a simple, two-player game where players
take turns marking spaces in a 3x3 grid.

Players
Player 1: Marks their moves with an "X".
Player 2: Marks their moves with an "O".

Rules
1. Turn Order: Players take turns to make a move, starting

with Player 1.
2. Move: On their turn, a player places their mark ("X" or
"O") in one of the empty cells.
3. Winning Condition: The first player to have three of
their marks in a row (horizontally ,

vertically, or diagonally) wins the

game.
4. Draw Condition: If all cells are filled and no player has
three in a row, the game ends in a
draw.
5. Invalid Move: Players cannot place their mark in a cell
that is already occupied. [1]
 CHAPTER 2

Literature Survey

Historical Background
Origins: The exact origins of Tic Tac Toe are unclear, but
the game is believed to have ancient roots.
Similar games were played in ancient Egypt
(circa 1300 BC) and Rome.
Evolution: The modern version of Tic Tac Toe emerged in
the 19th century, with its simple rules making
it a popular pastime.

Significance in Artificial Intelligence

Early AI Research: Tic Tac Toe has been instrumental in
the development of early AI. It was
one of the first games used to test AI
algorithms.
Minimax Algorithm: The minimax algorithm, a recursive
method for decision making in zero-
sum games, was first applied to Tic
Tac Toe.
Teaching Tool: Tic Tac Toe is often used in introductory AI
and computer science courses to teach
basic concepts of search algorithms,
decision-making processes, and game
strategy.
[2]
Mathematical Analysis
Game Theory: Tic Tac Toe is a classic example in the study of
combinatorial game theory and finite games. It
is
used to illustrate concepts such as game trees,
minimax algorithm, and Nash equilibrium.
Solvability: The game is mathematically solvable, meaning the
outcome (win, lose, or draw) can be determined
from any position assuming perfect play by both
players.
Complexity: Despite its simplicity, Tic Tac Toe introduces
fundamental concepts of more complex strategic
games. The game tree of Tic Tac Toe has 9!
(362,880) possible sequences of moves, but
symmetry reduces the number of unique games
significantly.

Educational Value
Learning Tool: The game is used in educational settings to teach
logic, strategy, and critical thinking. It is simple
enough for young children to understand but
complex enough to introduce basic
programming concepts.
Programming Projects: Many introductory programming
courses include projects to develop Tic
Tac Toe games, covering topics like user
interface design, algorithm
implementation, and game logic.

[3]
 CHAPTER 3

Mini Objective & Scope

Mini Objective
The mini objective of the Tic Tac Toe game project is to develop
a fully functional, interactive version of the Tic Tac Toe game
that can be played between two players or between a player
and a computer..

Scope of the Project

1. Functional Requirements:
*Game Board: Implement a 3x3 grid representing the
game board.
*Player Modes:
Two-player mode: Two human players take turns.
Single-player mode: A human player competes against
a computer opponent.
*User Interface: Design an intuitive and responsive
interface for players to interact with the
game.
*Game Rules Enforcement: Ensure that moves are valid
(e.g., no overwriting of cells) and alternate turns
between players.
*Winning Condition Detection: Automatically detect and
announce the game outcome: win, lose, or draw.
*Game Reset: Provide an option to start a new game
without restarting the application.
[4]
2. Non-Functional Requirements:
Usability: The game should be easy to use, with clear
instructions and feedback.
Performance: The game should respond quickly to user inputs.
Compatibility: Ensure compatibility across various devices and
screen sizes if developing a web-based or mobile

application.
3. Technical Requirements:
Programming Languages:
=> For web-based: HTML, CSS, JavaScript.
=> For standalone applications: Python, Java, or any other
preferred language.
Development Frameworks (optional): Use frameworks such as
React for web applications or libraries like Pygame for
Python-based implementations.
AI Implementation: Use the minimax algorithm to create an AI
opponent that plays optimally.
4. Project Phases:
Planning: Define detailed requirements and design the game
architecture.
Design: Create wireframes and design the user interface.
Implementation:
=> Develop the game board and user interface.
=> Implement game logic and rule enforcement.
=> Develop AI for the computer opponent.
Testing: Conduct thorough testing to ensure functionality,
usability, and performance.
Deployment: Deploy the game on a suitable platform (web
server, app store, etc.).
Documentation: Provide comprehensive documentation for[5]
 CHAPTER 4

Problem Analysis and Requirement Specification

Problem Analysis
Tic Tac Toe is a simple and popular game with straightforward
rules, making it an ideal project for learning basic game
development concepts.
Key Elements:
Game Board: A 3x3 grid where players place their marks (X or
O).
Players: Two players take turns to place their marks on the
board.
Game Logic: Rules that determine valid moves, win conditions,
and draw conditions.
User Interface: The visual representation of the game board
and the means by which players interact with
the game.
Requirement Specification
1. Functional Requirements:
Game Initialization:
*The game should initialize with an empty 3x3 grid.
*The game should indicate which player starts first
(typically
*Player 1 with 'X').
2.Player Input:
*The game should accept input from two players,
alternating turns.
*Players should be able to select an empty cell to place [6]
their mark (X or O).
Game Board Update:
The game board should update to reflect the player's move
immediately after input.
Win Condition:
The game should check for a win condition after each move.
A win is achieved when a player places three of their marks in
a horizontal, vertical, or diagonal row.
If a win condition is met, the game should announce the
winner and end the game.
Draw Condition:
The game should check for a draw condition when all cells
are filled.
If all cells are filled and no player has won, the game should
declare a draw and end the game.
Invalid Move Handling:
The game should prevent players from placing a mark in an
already occupied cell.
The game should prompt the player to make a valid move if
an invalid move is attempted.
Restart Option:
The game should provide an option to restart the game after
it ends.
2. Non-Functional Requirements:
Usability:
The game should have a user-friendly interface that is easy

to navigate and understand.

The game should provide clear instructions and feedback

to the players. [7]

Performance:
The game should respond quickly to player inputs and update
the game state without noticeable delay.
Reliability:
The game should consistently enforce the rules and accurately
detect win and draw conditions.
The game should handle invalid inputs gracefully without
crashing.
Portability:
The game should be able to run on various platforms, such as
web browsers, desktop applications, or mobile devices.

[8]
 CHAPTER 5

Detailed Design: Modeling and ERD/DFD

1. System Architecture
The Tic Tac Toe game system can be divided into several
components:
User Interface (UI): Handles user input and displays the game
board.
Game Logic: Manages the game rules, state, and win/draw
conditions.
Controller: Mediates interactions between the UI and the Game
Logic.

2. Class Diagram (Modeling)

Class Diagram:

[9]
3. Entity-Relationship Diagram (ERD)

Player Game

Game_id
Player_id
Mark CurrentTurn
Board
Player_name

4. Data Flow Diagram (DFD)

[10]
 CHAPTER 6

Hardware/Software platform environment

Software Environment
Development Tools:
Integrated Development Environment (IDE):
Visual Studio Code
Version Control System:
Git (with GitHub, GitLab, or Bitbucket for remote repositories)
Build Tools:
npm (for JavaScript projects)
Make (for C/C++ projects)
Programming Languages:
Primary Language: Java, Python, JavaScript, C#, or any language
suitable for the platform chosen
Optional Languages: HTML/CSS (for web interface)
Frameworks/Libraries:
Frontend (if applicable):
HTML5, CSS3, JavaScript
React, Angular, or Vue.js (optional)
Backend (if applicable):
Node.js (JavaScript)
Flask/Django (Python)
Spring Boot (Java)
Operating System:
Development OS: Windows 10/11, macOS, or any Linux distribution
Target OS:
Windows, macOS, Linux (for desktop)
Android, iOS (for mobile)

[11]
CHAPTER 7

Snapshots of Input & Output

[12]
CHAPTER 8

Coding

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xo-game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<a href="single.html"><button class="single">Single Player</button></a>
<a href="multi.html"><button class="multi">Multi Player</button></a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p class="game-info"></p>
<div class="tic-tac-toe">
[13]
 <div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</div>

<button class="btn">New Game</button>

</div>
<script src="index2.js"></script>
</body>
</html>

JavaScript for Single player

const boxes = document.querySelectorAll(".box");

const gameInfo = document.querySelector(".game-info");
const newGameBtn = document.querySelector(".btn");

let currentPlayer;
let gameGrid;

const winningPositions = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
]; [14]
function initGame() {
currentPlayer = "X";
gameGrid = ["","","","","","","","",""];

boxes.forEach((box, index) => {

box.innerText = "";
boxes[index].style.pointerEvents = "all";
box.classList = `box box${index+1}`;
});

newGameBtn.classList.remove("active");
gameInfo.innerText = `Current Player - ${currentPlayer}`;

// If the computer starts the game, make the first move

if (currentPlayer === "O") {
computerMove();
}
}

initGame();

function swapTurn() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
gameInfo.innerText = `Current Player - ${currentPlayer}`;
}

function checkGameOver() {
let winner = "";

winningPositions.forEach((position) => {
if (gameGrid[position[0]] !== "" &&
gameGrid[position[0]] === gameGrid[position[1]] &&
gameGrid[position[1]] === gameGrid[position[2]]) {

winner = gameGrid[position[0]];
boxes.forEach((box) => {
box.style.pointerEvents = "none";
}); [15]
 boxes[position[0]].classList.add("win");
boxes[position[1]].classList.add("win");
boxes[position[2]].classList.add("win");
}
});

if (winner !== "") {

gameInfo.innerText = `Winner Player - ${winner}`;
newGameBtn.classList.add("active");
return;
}

let fillCount = gameGrid.filter(box => box !== "").length;

if (fillCount === 9) {
gameInfo.innerText = "Game Tied !";
newGameBtn.classList.add("active");
}
}

function handleClick(index) {
if (gameGrid[index] === "") {
boxes[index].innerText = currentPlayer;
gameGrid[index] = currentPlayer;
boxes[index].style.pointerEvents = "none";
swapTurn();
checkGameOver();

// If it's the computer's turn and the game is still active, let the
computer make a move
if (currentPlayer === "O" && !document.querySelector(".active")) {
setTimeout(computerMove, 500);
}
}
} [16]
function computerMove() {
let emptyCells = gameGrid.reduce((acc, val, idx) => {
if (val === "") {
acc.push(idx);
}
return acc;
}, []);

// Function to check for winning or blocking moves

function findMove(marker) {
for (let position of winningPositions) {
let [a, b, c] = position;
// Check for winning move
if ((gameGrid[a] === marker && gameGrid[b] === marker && gameGrid[c] ===
"") ||
(gameGrid[a] === marker && gameGrid[c] === marker && gameGrid[b] === "")
||
(gameGrid[b] === marker && gameGrid[c] === marker && gameGrid[a] ===
"")) {
return [a, b, c];
}
}
return null; // Return null if no winning or blocking move is found
}

// Check for winning move

let winningMove = findMove("O");
if (winningMove) {
// Make winning move
for (let index of winningMove) {
if (gameGrid[index] === "") {
handleClick(index);
return;
}
}
}
[17]
 // Check for blocking move
let blockingMove = findMove("X");
if (blockingMove) {
// Make blocking move
for (let index of blockingMove) {
if (gameGrid[index] === "") {
handleClick(index);
return;
}
}
}

// If no winning or blocking move, proceed with a random move

let randomIndex = Math.floor(Math.random() * emptyCells.length);
let computerMoveIndex = emptyCells[randomIndex];

handleClick(computerMoveIndex);
}

boxes.forEach((box, index) => {

box.addEventListener("click", () => {
handleClick(index);
});
});

newGameBtn.addEventListener("click", initGame);

[18]
Java script of multi player
const boxes = document.querySelectorAll(".box");
const gameInfo = document.querySelector(".game-info");
const newGameBtn = document.querySelector(".btn");

let currentPlayer;
let gameGrid;

const winningPositions = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];

//let's create a function to initialise the game

function initGame() {
currentPlayer = "X";
gameGrid = ["","","","","","","","",""];
//UI pr empty bhi karna padega boxes ko
boxes.forEach((box, index) => {
box.innerText = "";
boxes[index].style.pointerEvents = "all";
//one more thing is missing, initialise box with css properties again
box.classList = `box box${index+1}`;
});
newGameBtn.classList.remove("active");
gameInfo.innerText = `Current Player - ${currentPlayer}`;
}
initGame(); [19]
function swapTurn() {
if(currentPlayer === "X") {
currentPlayer = "O";
}
else {
currentPlayer = "X";
}
//UI Update
gameInfo.innerText = `Current Player - ${currentPlayer}`;
}

function checkGameOver() {
let answer = "";

winningPositions.forEach((position) => {
//all 3 boxes should be non-empty and exactly same in value
if( (gameGrid[position[0]] !== "" || gameGrid[position[1]] !== "" ||
gameGrid[position[2]] !== "")
&& (gameGrid[position[0]] === gameGrid[position[1]] ) &&
(gameGrid[position[1]] === gameGrid[position[2]])) {

//check if winner is X
if(gameGrid[position[0]] === "X")
answer = "X";
else {
answer = "O";
}

//disable pointer events

boxes.forEach((box) => {
box.style.pointerEvents = "none";
})

//now we know X/O is a winner

boxes[position[0]].classList.add("win");
boxes[position[1]].classList.add("win");
boxes[position[2]].classList.add("win");
}
}); [20]
 //it means we have a winner
if(answer !== "" ) {
gameInfo.innerText = `Winner Player - ${answer}`;
newGameBtn.classList.add("active");
return;
}

//We know, NO Winner Found, let's check whether there is tie

let fillCount = 0;
gameGrid.forEach((box) => {
if(box !== "" )
fillCount++;
});

//board is Filled, game is TIE

if(fillCount === 9) {
gameInfo.innerText = "Game Tied !";
newGameBtn.classList.add("active");
}
}
function handleClick(index) {
if(gameGrid[index] === "" ) {
boxes[index].innerText = currentPlayer;
gameGrid[index] = currentPlayer;
boxes[index].style.pointerEvents = "none";
//swap karo turn ko
swapTurn();
//check koi jeet toh nahi gya
checkGameOver();
}
}

boxes.forEach((box, index) => {

box.addEventListener("click", () => {
handleClick(index);
})
});

newGameBtn.addEventListener("click", initGame); [21]

*,*::before,*::after { .single:hover{
box-sizing: border-box; background-color:rgba(255, 255,
margin: 0; 255, 0.25) ;
padding: 0; }
font-family: 'Poppins', 'sans-serif'; .multi:hover{
} background-color:rgba(255, 255,
.container{ 255, 0.25) ;
width: 100vw; }
height: 100vh; .multi{
background-image: color:white;
url(background1.jpg); font-size: 25px;
background-size: cover; position:absolute;
background-position: center; top:65%;
display: grid; left:50%;
place-items: center; transform:translateX(-50%);
} background-color: black;
h1{ border-radius: 1rem;
font-size: 60px; border: 1px solid rgba(255, 255,
padding: 20px ; 255, 0.25);
align-items: center; padding: 0.5rem 1rem;
color: yellow; cursor: pointer;
} box-shadow: -3px 3px blue;
.single{ }
color:white; .game-info{
font-size: 25px; color:white;
position:absolute; position:absolute;
top:45%; top:3rem;
left:50%; left:50%;
transform:translateX(-50%); transform:translateX(-50%);
background-color: black; background-color: rgba(255, 255,
border-radius: 1rem; 255, 0.15);
border: 1px solid rgba(255, 255, 255, border-radius: 1rem;
0.25); border: 1px solid rgba(255, 255,
padding: 0.5rem 1rem; 255, 0.25);
cursor: pointer; padding: 0.5rem 3rem;
[22]
box-shadow: -3px 3px blue; }
.tic-tac-toe{ bottom:3rem;
width:90%; left:50%;
max-width:20rem; transform:translateX(-50%);
background-color: black; background-color: rgba(255, 255,
border-radius: 1rem; 255, 0.15);
border: 1px solid rgba(255, 255, 255, border-radius: 1rem;
0.25); border: 1px solid rgba(255, 255,
padding: 2rem; 255, 0.25);
display: grid; padding: 0.5rem 2rem;
grid-template-columns: repeat(3, 1fr); cursor:pointer;
aspect-ratio: 1/1; display: none;
} }
.box{ .btn.active{
position:relative; display: flex;
width:100%; }
aspect-ratio: 1/1; .win{
cursor: pointer; background-color: rgba(0, 255, 0,
font-size: 3rem; 0.3);
color:white; }
display: flex; @media (max-width:480px){
justify-content: center; .container{
align-items: center; width: 100vw;
} }
.box1, .box2, .box4, .box5{ h1{
border-right:2px solid white; font-size: 60px;
border-bottom:2px solid white; padding: 10px;
} }
.box3, .box6{ .single{
border-bottom: 2px solid white; width: max-content;
} }
.box7, .box8{ .tic-tac-toe{
border-right:2px solid white; padding: 30px;
} }
.btn{ .game-info{
color:white; width: max-content;
[23]
position: absolute; }}
 CHAPTER 9

Project limitation and Future scope

Project Limitations
Simple Game Mechanics:
Limitation: The game only supports basic 3x3 Tic Tac Toe,
limiting strategic depth and replayability.
Impact: Players may quickly lose interest after a few
rounds.
Two-Player Local Mode Only:
Limitation: The current implementation only supports two
players on the same device.
Impact: This restricts the game's accessibility and
enjoyment to situations where both players are physically
present.

Future Scope
Enhanced Game Mechanics:
Expansion: Introduce larger grid sizes (e.g., 4x4, 5x5) or
different variations of the game (e.g., 3D Tic Tac Toe).
Benefit: Increases the game's complexity and strategic
depth, offering more challenges and replay value.
Online Multiplayer Support:
Expansion: Implement online multiplayer functionality,
allowing players to compete over the internet.
Benefit: Broadens the player base and enables friends and
strangers to play together, enhancing social interaction.
[24]
AI Opponent:
Expansion: Develop various levels of AI opponents, from beginner
to expert.
Benefit: Allows solo play, helps players improve their skills, and
provides a challenging experience for all skill levels.

Online Multiplayer:
Implementing online multiplayer functionality to allow players to

compete against others over the internet.

Integrating with social media platforms for sharing scores and
inviting friends to play.
Error Handling and Robustness:
Enhancing error handling to cover a wider range of edge cases
and ensure the game runs smoothly under all conditions.
Implementing comprehensive logging and debugging tools for
better maintenance and troubleshooting.
Persistent Storage:
Adding functionality to save game progress, player profiles, and
high scores using a database or local storage.
Allowing players to resume games from where they left off.
Cross-Platform Compatibility:
Ensuring the game runs seamlessly on various platforms,
including
desktops, web browsers, and mobile devices.
Optimizing performance for different device specifications and
screen sizes.
Educational Features:
Adding tutorials and hints to help new players learn the game.
Implementing a learning mode that teaches strategies and tactics

for winning.
[25]
 CHAPTER 10

References

https://chatgpt.com/ = Chat GPT

https://www.google.com/ = Google
https://www.youtube.com/ = Youtube
https://developer.mozilla.org/en-US/ = MDN

[26]