Kai, Vanjibaba Gramin Vikas Mandal’s

Sau. Shantidevi Chavan Institute of

Engineering & Technology (Polytechnic)

Bhoras, Dhule Road, Chalisgaon, Dist: Jalgaon (MS)

Department of Computer Engineering

A PROJECT REPORT ON
“Tic-Tac-Toe Game”
-Submitted To -

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION MUMBAI

For Academic Year

2023-2024

-Submitted By-

Mr. Sarthak Prakash Joshi (Enrollment No : 2110040057)

Mr. Pravin Sunil Patil (Enrollment No :2110040047)

Mr.Shubham Chakradhar Joshi (Enrollment No :2110040100)

Mr. Sidharth Smadhan Pawar (Enrollment No : 2110040071)

1|Page
 Table of Contents

CHAPTER 1: INTRODUCTION .............................................................................. 1

1.1 OBJECTIVES ............................................................................................... 1
CHAPTER 2: AGENT ............................................................................................... 2
2.1 Agent ................................................................................................................. 2

2.2 Agent Environment Description ........................................................................ 3

CHAPTER 3: PROBLEM SPECIFICATION ........................................................... 4

CHAPTER 4: STATE SPACE REPRESENATION ................................................. 5
CHAPTER 5 : ALGORITHM USED ........................................................................ 6
6.1 Minimax Algorithm........................................................................................... 6

6.2 Alpha-Beta Pruning ........................................................................................... 6

CHAPTER 6 : OUTCOME ANALYSIS ................................................................... 7

CHAPTER 7: COADING IMPLEMENTATION ………………………………….8

CHAPTER 8: CONCLUSION ................................................................................... 9

2|Page
 CHAPTER 1: INTRODUCTION

Tic-tac-toe also known as noughts and crosses is a paper and pencil game for two
players, who take turns marking the spaces in a 3 x 3 grid traditionally. The player
who succeeds in placing three of their marks in a horizontal, vertical or diagonal row
wins the game. It is a zero- sum of perfect information game. This means that it is
deterministic, with fully observable environments in which two agents act alternately
and the utility values at the end of the game are always equal and opposite. Because
of the simplicity of tic-tac-toe, it is often used as pedagogical tool in artificial
intelligence to deal with searching of game trees. The optimal move for this game can
be gained by using minimax algorithm, where the opposition between the utility
functions makesthe situation adversarial, hence requiring adversarial search supported
by minimax algorithm with alpha beta pruning concept in artificial intelligence

1.1 OBJECTIVES

1.To develop Artificial intelligence-based tic-tac-toe game for humanVs AI by

implementing minimax algorithm with adversarial search concept.

2. To analyze the complexity of minimax algorithm through 4x4 tic tac toe game.

3. To study and implement alpha-beta pruning concept for improved speed of searching the

optimal choice in tic-tac toe game.

4. To study optimizing methods for alpha-beta pruning using heuristic evaluation function.

3|Page
 CHAPTER 2: AGENT

An agent perceives its environment through sensors and acts on the environment
through actuators. Its behavior is described by its function that maps the percept
to action. In tic tac toe there are two agents, the computer system and human. In
the AI-based tic-tac toe game the function is mapped using the minimax algorithm
alongside alpha beta pruning. The agent can be further described by following
factors:
Performance Measure: Number of wins or draws.

Environment: A 4x4 grid with 16 cells respectively, with opponent (human agent).
The cell once occupied by a mark cannot be used again. Task environment is
deterministic, fully observable, static, multi-agent, discrete, sequential.

Actuators: Display, Mouse (human agent)

Sensors: The opponent’s (human agent) input as a mouse pointer on a cell.

Furthermore, it is a utility-based agent since it uses heuristics and pruning concept

as utility function that measures its preferences among the states and chooses the
action that leads to the best expected utility i.e. winning or tie condition for the
computer system agent. The utility function is taken as +10 for winning situation
of maximizing agent or AI, -10 for winning situation of minimizing agent or
human player and 0 for draw condition.

4|Page
 2.3 Agent Environment Description
The basic environment for tic tac toe game agent is a 4x4 grid with 16
cells respectively with opponent as human agent. The cell once occupied
by a mark cannot be used again. The agent has access to complete state of
environment at any point and can detect all aspects that are relevant to the
choice of action making the environment fully observable. Also, the next
state of environment can be completely determined by current state and
action executed which means environment is deterministic. It is a two-
player game with the opponent as human agent, so it is a multi-agent
environment. Beside the game environment has a finite number of states,
percepts and actions, making the environment static and discrete. Also,
the environment is sequential since the current choice of cell could affect
all future decisions. Thus, the task environment for the tic tac toe system
agent is sequential, deterministic, fully observable, static, discrete and a
multi-agent.

5|Page
CHAPTER 3: PROBLEM SPECIFICATION
Tic tac toe game has 16 cells for a 4x4 grid. The two players with their
respective marks as ‘X’ and ‘O’ are required to place their marks in their
turns one by one. Once the cell is occupied by a mark it cannot be used
again. The game is won if the agent is able to make a row or column or a
diagonal occupied completely with their respective marks. The game
terminates once the winning situation is gained or the cells are fully
occupied. The problem specification for this game is given below

Problem: Given a 4x4 grid, the agents has to find the optimal cell to fill with
respective marks.

Goals: To find the optimal cell to fill with respective marks and in order to win the
game, the cell must be filled such that one of the following criteria is satisfied:

1. A row is completely filled by a mark ‘X’ or ‘O’.

2. A diagonal is completely filled by a mark ‘X’ or ‘O’.

3. A column is completely filled by a mark ‘X’ or ‘O’.

If these criteria are not satisfied by both the agents, the game is terminated with a tie
situation.

6|Page
CHAPTER 4: STATE SPACE REPRESENATION

7|Page
 CHAPTER 5: ALGORITHM USED

6.1 Minimax Algorithm

Minimax is a recursive algorithm which is used to choose an optimal move for a
player assuming that the opponent is also playing optimally. Its objective is to
minimize the maximum loss. This algorithm is based on adversarial search
technique. In a normal search problem, the optimal solution would be a sequence
of actions leading to a goal state. Rather in adversarial search MAX finds the
contingent strategy, which specifies the MAX’s moves in the initial state, then
MAX’s moves in the states resulting from every possible response by MIN and
continues till the termination condition comes alternately. Furthermore, given a
choice, MAX prefers to move to a state of maximum value whereas MIN prefers
a state of minimum value.

6.2 Alpha-Beta Pruning

The problem with minimax search is that the number of game states it
has to examine is exponential in the depth of the tree. The minimax
algorithm recursively calls itself until any one of the agent wins or the
board is full which takes a lot of computation time and makes it
impossible to solve the 4X4 grid using standard minimax algorithm.

To solve this issue, we can use alpha-beta pruning algorithm which

eliminates large parts of the tree from considerations by pruning the tree.
When applied to a standard minimax tree, it returns the same move as

8|Page
minimax would, but it prunes away branches that cannot possibly
influence the final decision. Basically, this algorithm applies the
principle that there is no use expending search time to find out exactly
how bad an alternative is if you have a better alternative. Alpha- beta
pruning gets its name from the parameters that bound on the backed-up
values that appears anywhere along the path:

α= the value of the best choices (i.e. highest value) so far at any choice
point along the path for MAX

β= the value of the best choice (i.e. lowest value) so far at any choice
point along the path for MIN

9|Page
CHAPTER 6: OUTCOME ANALYSIS

The minimax algorithm performs a complete depth-first exploration of

the game tree. It recursively calls itself until a winning state of any agent

is found or the grid is full. If the maximum depth of the tree is m and

there are b legal moves at each point, then the time complexity of the

minimax algorithm is O (bm). The space complexity is O(bm) for

generating all actions at once. For 3X3 board, the possible number of

moves is (3 * 3)!

= 9! If the board size is increased to 4X4 there is exponential g

rowth and we experience an explosion of computational time. This

means we now get 16! Possible states which is an incredibly large

amount. So, we can estimate that computational time will be million

times higher than 3X3 board. Hence, the time cost is totally impractical,

making this algorithm infeasible in 4X4 board, but it serves as the basis

for the mathematical analysis of games and for more practical algorithm.

10 | P a g e
To implement the minimax algorithm for 4X4 board we have applied the

concept of alpha beta pruning for eliminating the solutions which would

not make impact on the final decision. Considering above parameters the

time complexity or alpha-beta pruning is O (bm/2) in best case

i.e. depth is reduced to half in the best possible scenario. Even though

there is such huge reduction in time, the time complexity is still very large

considering our board. So, to decrease the computation time, the search

can be limited to certain level i.e. reduce the depth of search tree. The

maximum depth is taken as 9 in our system. But when reducing the depth

of search tree, the output is not optimal as we have cut-off 9 levels of our

search tree which is a very large number of nodes. Hence, we have used

heuristic evaluation function that approximates the true utility of a state

without doing a complete search. For this problem, the heuristic function

used is given by:

E(n) = M(n) – O(n)

where, M(n) is total of possible winning path of AI

O(n) is total of possible winning path of human player E(n) is total

11 | P a g e
evaluation for state n

This heuristic gives positive value if AI i.e. maximizing agent has more

chance or winning and negative value if the human player i.e.

minimizing agent has more chance of winning.

12 | P a g e
CHAPTER 7: coding implementation

index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<!-- CSS file Included -->

<link rel="stylesheet" type="text/css" href="game.css">

<!-- JavaScript file included -->

<script src="game.js"></script>

</head>

<body>

<div id="main">

<h1>------- TIC-TAC-TOE GAME -------</h1>

<p id="ins">

13 | P a g e
 Game starts by just Tap on

box<br><br>First Player starts as

<b>Player X </b>And Second Player as

<b>Player 0</b>

</p>

<br><br>

<div class = "ui">

<div class="row">

<input type="text" id= "b1"

class="cell" onclick="myfunc_3(); myfunc();"

readonly>

<input type="text" id= "b2"

class="cell" onclick="myfunc_4(); myfunc();"

readonly>

<input type="text" id= "b3" class="cell"

onclick="myfunc_5(); myfunc();"

readonly>

</div>
14 | P a g e
 <div class="row">

<input type="text" id= "b4"

class="cell" onclick="myfunc_6(); myfunc();"

readonly>

<input type="text" id= "b5"

class="cell" onclick="myfunc_7(); myfunc();"

readonly>

<input type="text" id= "b6"

class="cell" onclick="myfunc_8(); myfunc();"

readonly>

</div>

<div class="row">

<input type="text" id= "b7"

class="cell" onclick="myfunc_9(); myfunc();"

readonly>

<input type="text" id= "b8"

class="cell" onclick="myfunc_10();myfunc();"

readonly>
15 | P a g e
 <input type="text" id= "b9"

class="cell" onclick="myfunc_11();myfunc();"

readonly>

</div>

</div>

<br><br><br>

<button id="but" onclick="myfunc_2()"> RESET </button>

<br><br>

<p id="print"></p>

</div>

</body>

</html>

game.js

16 | P a g e
// Function called whenever user tab on any box

function myfunc() {

// Setting DOM to all boxes or input field

var b1, b2, b3, b4, b5, b6, b7, b8, b9;

b1 = document.getElementById("b1").value;

b2 = document.getElementById("b2").value;

b3 = document.getElementById("b3").value;

b4 = document.getElementById("b4").value;

b5 = document.getElementById("b5").value;

b6 = document.getElementById("b6").value;

b7 = document.getElementById("b7").value;

b8 = document.getElementById("b8").value;

b9 = document.getElementById("b9").value;

var b1btn, b2btn, b3btn, b4btn, b5btn,

b6btn, b7btn, b8btn, b9btn;

17 | P a g e
 b1btn = document.getElementById("b1");

b2btn = document.getElementById("b2");

b3btn = document.getElementById("b3");

b4btn = document.getElementById("b4");

b5btn = document.getElementById("b5");

b6btn = document.getElementById("b6");

b7btn = document.getElementById("b7");

b8btn = document.getElementById("b8");

b9btn = document.getElementById("b9");

// Checking if Player X won or not and after

// that disabled all the other fields

if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' ||

b2 == 'X') && (b3 == 'x' || b3 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b4btn.disabled = true;

b5btn.disabled = true;
18 | P a g e
 b6btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;

b1btn.style.color = "red";

b2btn.style.color = "red";

b3btn.style.color = "red";

else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' ||

b4 == 'X') && (b7 == 'x' || b7 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b2btn.disabled = true;

b3btn.disabled = true;

b5btn.disabled = true;

b6btn.disabled = true;

b8btn.disabled = true;
19 | P a g e
 b9btn.disabled = true;

b1btn.style.color = "red";

b4btn.style.color = "red";

b7btn.style.color = "red";

else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' ||

b8 == 'X') && (b9 == 'x' || b9 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b3btn.disabled = true;

b4btn.disabled = true;

b5btn.disabled = true;

b6btn.disabled = true;

20 | P a g e
 b7btn.style.color = "red";

b8btn.style.color = "red";

b9btn.style.color = "red";

else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' ||

b6 == 'X') && (b9 == 'x' || b9 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b4btn.disabled = true;

b5btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b3btn.style.color = "red";

b6btn.style.color = "red";
21 | P a g e
 b9btn.style.color = "red";

else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' ||

b5 == 'X') && (b9 == 'x' || b9 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b2btn.disabled = true;

b3btn.disabled = true;

b4btn.disabled = true;

b6btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b1btn.style.color = "red";

b5btn.style.color = "red";

b9btn.style.color = "red";

else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' ||

22 | P a g e
 b5 == 'X') && (b7 == 'x' || b7 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b4btn.disabled = true;

b6btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;

b3btn.style.color = "red";

b5btn.style.color = "red";

b7btn.style.color = "red";

else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' ||

b5 == 'X') && (b8 == 'x' || b8 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

23 | P a g e
 b1btn.disabled = true;

b2btn.disabled = true;

b4btn.disabled = true;

b6btn.disabled = true;

b7btn.disabled = true;

b9btn.disabled = true;

b2btn.style.color = "red";

b5btn.style.color = "red";

b8btn.style.color = "red";

else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' ||

b5 == 'X') && (b6 == 'x' || b6 == 'X')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player X won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b3btn.disabled = true;
24 | P a g e
 b7btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;

b4btn.style.color = "red";

b5btn.style.color = "red";

b6btn.style.color = "red";

// Checking of Player X finish

// Checking for Player 0 starts, Is player 0 won or

// not and after that disabled all the other fields

else if ((b1 == '0' || b1 == '0') && (b2 == '0' ||

b2 == '0') && (b3 == '0' || b3 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b4btn.disabled = true;

b5btn.disabled = true;
25 | P a g e
 b6btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;

b1btn.style.color = "red";

b2btn.style.color = "red";

b3btn.style.color = "red";

else if ((b1 == '0' || b1 == '0') && (b4 == '0' ||

b4 == '0') && (b7 == '0' || b7 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b2btn.disabled = true;

b3btn.disabled = true;

b5btn.disabled = true;

b6btn.disabled = true;

b8btn.disabled = true;
26 | P a g e
 b9btn.disabled = true;

b1btn.style.color = "red";

b4btn.style.color = "red";

b7btn.style.color = "red";

else if ((b7 == '0' || b7 == '0') && (b8 == '0' ||

b8 == '0') && (b9 == '0' || b9 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b3btn.disabled = true;

b4btn.disabled = true;

b5btn.disabled = true;

b6btn.disabled = true;

b7btn.style.color = "red";
27 | P a g e
 b8btn.style.color = "red";

b9btn.style.color = "red";

else if ((b3 == '0' || b3 == '0') && (b6 == '0' ||

b6 == '0') && (b9 == '0' || b9 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b4btn.disabled = true;

b5btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b3btn.style.color = "red";

b6btn.style.color = "red";

b9btn.style.color = "red";

else if ((b1 == '0' || b1 == '0') && (b5 == '0' ||

28 | P a g e
 b5 == '0') && (b9 == '0' || b9 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b2btn.disabled = true;

b3btn.disabled = true;

b4btn.disabled = true;

b6btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b1btn.style.color = "red";

b5btn.style.color = "red";

b9btn.style.color = "red";

else if ((b3 == '0' || b3 == '0') && (b5 == '0' ||

b5 == '0') && (b7 == '0' || b7 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

29 | P a g e
 b1btn.disabled = true;

b2btn.disabled = true;

b4btn.disabled = true;

b6btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;

b3btn.style.color = "red";

b5btn.style.color = "red";

b7btn.style.color = "red";

else if ((b2 == '0' || b2 == '0') && (b5 == '0' ||

b5 == '0') && (b8 == '0' || b8 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b1btn.disabled = true;

b3btn.disabled = true;

b4btn.disabled = true;
30 | P a g e
 b6btn.disabled = true;

b7btn.disabled = true;

b9btn.disabled = true;

b2btn.style.color = "red";

b5btn.style.color = "red";

b8btn.style.color = "red";

else if ((b4 == '0' || b4 == '0') && (b5 == '0' ||

b5 == '0') && (b6 == '0' || b6 == '0')) {

document.getElementById('print')

.innerHTML = "Congratulations.....!Player 0 won the game";

b1btn.disabled = true;

b2btn.disabled = true;

b3btn.disabled = true;

b7btn.disabled = true;

b8btn.disabled = true;

b9btn.disabled = true;
31 | P a g e
 b4btn.style.color = "red";

b5btn.style.color = "red";

b6btn.style.color = "red";

// Checking of Player 0 finish

// Here, Checking about Tie

else if ((b1 == 'X' || b1 == '0') && (b2 == 'X'

|| b2 == '0') && (b3 == 'X' || b3 == '0') &&

(b4 == 'X' || b4 == '0') && (b5 == 'X' ||

b5 == '0') && (b6 == 'X' || b6 == '0') &&

(b7 == 'X' || b7 == '0') && (b8 == 'X' ||

b8 == '0') && (b9 == 'X' || b9 == '0')) {

document.getElementById('print')

.innerHTML = "Match Tie";

else {
32 | P a g e
 // Here, Printing Result

if (flag == 1) {

document.getElementById('print')

.innerHTML = "Player X Turn";

else {

document.getElementById('print')

.innerHTML = "Player 0 Turn";

// Function to reset game

function myfunc_2() {

location.reload();

b1 = b2 = b3 = b4 = b5 = b6 = b7 = b8 = b9 = '';

}
33 | P a g e
// Here onwards, functions check turn of the player

// and put accordingly value X or 0

flag = 1;

function myfunc_3() {

if (flag == 1) {

document.getElementById("b1").value = "X";

document.getElementById("b1").disabled = true;

flag = 0;

else {

document.getElementById("b1").value = "0";

document.getElementById("b1").disabled = true;

flag = 1;

function myfunc_4() {
34 | P a g e
 if (flag == 1) {

document.getElementById("b2").value = "X";

document.getElementById("b2").disabled = true;

flag = 0;

else {

document.getElementById("b2").value = "0";

document.getElementById("b2").disabled = true;

flag = 1;

function myfunc_5() {

if (flag == 1) {

document.getElementById("b3").value = "X";

document.getElementById("b3").disabled = true;

flag = 0;

}
35 | P a g e
 else {

document.getElementById("b3").value = "0";

document.getElementById("b3").disabled = true;

flag = 1;

function myfunc_6() {

if (flag == 1) {

document.getElementById("b4").value = "X";

document.getElementById("b4").disabled = true;

flag = 0;

else {

document.getElementById("b4").value = "0";

document.getElementById("b4").disabled = true;

flag = 1;

}
36 | P a g e
}

function myfunc_7() {

if (flag == 1) {

document.getElementById("b5").value = "X";

document.getElementById("b5").disabled = true;

flag = 0;

else {

document.getElementById("b5").value = "0";

document.getElementById("b5").disabled = true;

flag = 1;

function myfunc_8() {

if (flag == 1) {

document.getElementById("b6").value = "X";
37 | P a g e
 document.getElementById("b6").disabled = true;

flag = 0;

else {

document.getElementById("b6").value = "0";

document.getElementById("b6").disabled = true;

flag = 1;

function myfunc_9() {

if (flag == 1) {

document.getElementById("b7").value = "X";

document.getElementById("b7").disabled = true;

flag = 0;

else {

document.getElementById("b7").value = "0";
38 | P a g e
 document.getElementById("b7").disabled = true;

flag = 1;

function myfunc_10() {

if (flag == 1) {

document.getElementById("b8").value = "X";

document.getElementById("b8").disabled = true;

flag = 0;

else {

document.getElementById("b8").value = "0";

document.getElementById("b8").disabled = true;

flag = 1;

39 | P a g e
function myfunc_11() {

if (flag == 1) {

document.getElementById("b9").value = "X";

document.getElementById("b9").disabled = true;

flag = 0;

else {

document.getElementById("b9").value = "0";

document.getElementById("b9").disabled = true;

flag = 1;

Game.css

h1 {

color: orangered;

margin-bottom: -5px;

}
40 | P a g e
p{

margin-bottom: -10px;

.ui {

display: flex;

flex-direction: column;

align-items: center;

.row {

display: flex;

.cell {

border: none;

width: 80px;

height: 80px;

display: flex;

align-items: center;

justify-content: center;
41 | P a g e
 font-size: 24px;

text-align: center;

cursor: pointer;

.cell:active {

outline: none;

/* 3*3 Grid */

#b1{

border-bottom: 1px solid gray;

border-right: 1px solid gray;

#b2 {

border-bottom: 1px solid gray;

border-right: 1px solid gray;

border-left: 1px solid gray;

}
42 | P a g e
#b3 {

border-bottom: 1px solid gray;

border-left: 1px solid gray;

#b4 {

border-top: 1px solid gray;

border-bottom: 1px solid gray;

border-right: 1px solid gray;

#b5 {

border: 1px solid gray;

#b6 {

border-top: 1px solid gray;

43 | P a g e
 border-bottom: 1px solid gray;

border-left: 1px solid gray;

#b7 {

border-top: 1px solid gray;

border-right: 1px solid gray;

#b8 {

border-top: 1px solid gray;

border-right: 1px solid gray;

border-left: 1px solid gray;

#b9 {

border-top: 1px solid gray;

border-left: 1px solid gray;

44 | P a g e
}

/* Reset Button */

#but {

box-sizing: border-box;

width: 95px;

height: 40px;

border: 1px solid dodgerblue;

margin-left: auto;

border-radius: 8px;

font-family: Verdana,

Geneva, Tahoma, sans-serif;

background-color: whitesmoke;

color: dodgerblue;

font-size: 20px;

cursor: pointer;

45 | P a g e
/* Player turn space */

#print {

font-family: Verdana,

Geneva, Tahoma, sans-serif;

color: dodgerblue;

font-size: 20px;

/* Main Container */

#main {

text-align: center;

/* Game Instruction Text */

#ins {

font-family: Verdana,Geneva,

Tahoma, sans-serif;

color: dodgerblue; }
46 | P a g e
 Final output

47 | P a g e
48 | P a g e
49 | P a g e
DESCRIPTION:

Basic javascript game

In this project, we will create a Tic-Tac-Toe Game using JavaScript. We

will be using validation checks to implement the game features. The UI

is designed using CSS so it is easy to create. In the game, Player-1 starts

playing the game and both players make their moves in consecutive

turns. The player who makes a straight 3-block chain wins the game.

This game is built on the front-end using simple logic and validation

checks only.

Project Structure:

• index.html

• game.css

• game.js

following code in respective files.

index.html: This file contains the structure of the project. game.css: This

file contains the styling of the application. game.js: This file contains the

Run index.html in browser.

Check Me here: https://chit2021.github.io/Tic-Tac-Toe/

50 | P a g e
 CHAPTER 6: CONCLUSION

With the basis of minimax algorithm for mathematical analysis alongside

speeding up the computation by alpha beta pruning concept and
optimizing the utility function using heuristic function, the 4x4 tic tac toe
game was developed. We explored that a 4x4 tic tac toe, an adversary
search technique game in artificial intelligence, can be developed using
these techniques. Increasing the size of this game would create a huge
time complexity issue with the same algorithm and techniques, for which
other logics must be further researched.

51 | P a g e
 References

[1] K. Kask. [Online]. Available: https://www.ics.uci.edu/~kkask/Fall-

2016%20CS271/slides/04-games.pdf. [Accessed 02 01 2020].

[2]G. Surma. [Online]. Available: https://towardsdatascience.com/tic-tac-

toe-creating- unbeatable- ai-with-minimax-algorithm-8af9e52c1e7d.

[Accessed 20 12 2019].

[3] P. G. ,. P. S. P. Sunil Karamchandani, "A Simple Algorithm For

Designing An Artificial Intelligence Based Tic Tac Toe Game".

[4]12 09 2019. [Online]. Available: https://www.edureka.co/blog/alpha-

beta-pruning-in-ai. [Accessed

20 11 2019].

52 | P a g e