Scribd
Upload
36 views15 pages

Akshay Css

Uploaded by

akshayarsul06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views15 pages

Akshay Css

Uploaded by

akshayarsul06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

MITHULALJI SARDA POLYTECHNIC, BEED

Micro Project On
“ Tic-Tac-Toe ”
Submitted By
Akshay Satish Arsul
Under The Guidance Of
Prof. Shekh
For The Subject
Client Side Scripting Language
Department Of
Computer Science And Engineering
2024-25

1
CERTIFICATE

This is to certify that Akshay Satish Arsul


from Mithulalji Sarda Polytechnic, Beed Institute Having
Enrollment no. 2214920327 has completed Micro Project of Third
year Client Side Scripting Language subject having Title Tic-Tac-
Toe Game during academic year 2024-2025 The project completed
by Student under the guidance of the faculty Prof. Shekh.

Name and signature of guide ……………………................................

2
Acknowledgement
A project work of a great significance is not possible without
the help of several people, directly or indirectly. First and fore
most we have immense happiness in expressing our sincere
thanks to our guide, Prof. Shinde for his valuable suggestion,
co-operating and continuous guidance.

We feel a deep sense of gratitude to Mr. Shaikh S.I., Head of


computer science department for his continuous
encouragement and for developing a keen interest in the field
of computer science. it's our pleasure to thank Mr. Khadke
R.N principal of Mithulalji Sarda Polytechnic. Beed, who is
always a constant source of inspiration.

We are very much thankful to all our faculty members whose


presence always inspires us to do better. Our happiness
culminates, when we recall the co-operation extended our
friends during the completion of this project.

Project Team:- Arsul Akshay Satish

3
Index

Sr.no Chapters Page.no


1. Introduction 05

2. Requirement 06

3. Snapshots 07
4. Code 08

5. Output of code 14
6. Reference 15

4
1. Introduction
Tic-tac-toe (American English), noughts and
crosses (Commonwealth English), or Xs and
Os (Canadian or Irish English) is a paper-and-pencil
game for two players who take turns marking the
spaces in a three-by-three grid with X or O. The player
who succeeds in placing three of their marks in a
horizontal, vertical, or diagonal row is the winner. It is
a solved game, with a forced draw assuming best
play from both players.
Tic-tac-toe is played on a three-by-three grid by two
players, who alternately place the marks X and O in
one of the nine spaces in the grid.

There is no universally agreed rule as to who plays first,


but in this article the convention that X plays first is
used.

Players soon discover that the best play from both


parties leads to a draw. Hence, tic-tac-toe is often
played by young children who may not have discovered
the optimal strategy.

5
2.Requirements
 Hardware:
Processor : intel i3.

Ram : 4gb/8gb

Storage : 256gb

 Software:

Operating system : windows 7/10

Software Tool : VS code /Chrome Browser

6
3.Snapshots

7
4.Code
 HTML FILE
<!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>
<link rel="stylesheet" href="style.css
">
</head>
<body>
<div class="msg-container hide">
<p id="msg">winner</p>
<button id="new-btn">New Game</button>

</div>
<main>
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="game">
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
</div>
</div>
<button id="reset-btn">Reset Game</button>

</main>
<script src="app.js"></script>
</body>
</html>

 CSS File
8
*{
margin:0;
padding: 0
}
body{
background-color: #548687;
text-align: center;
}
.container{
height: 70vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.game{
height:60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box{
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0px 0px 1rem rgba(0,0,0,0.3);
font-size: 8vmin;
color: #b0413e;
background-color: rgb(195, 197, 144);
}
#reset-btn{
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: white;
border-radius: 1rem;
border: none;
}

9
#new-btn
{
padding: 1rem;
font-size: 1.10rem;
background-color: #191913;
color: white;
border-radius: 1rem;
border: none;
}
#msg{
color: #ffffc7;
font-size: 6vmin;
}
.msg-container{
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1.5rem;
}
.hide{
display: none;
}

 Javascript File
let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");

10
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let draw = document.querySelector("#drw");

let turn = true;

let count= 0;//to track draw

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

//when we click on the button.


boxes.forEach((box) =>{
box.addEventListener("click",() =>{
console.log("box was clicked!")
if(turn){ //player 0
box.innerText ="O";
box.style.color="red";

turn=false;
}
else{ //player X
box.innerText ="X";
box.style.color="green";

turn =true;
}

box.disabled = true;
count++;

let isWinner = checkWinner();

if (count === 9 && !isWinner) {


gameDraw();
}
});
});

const gameDraw = () => {


msg.innerText = `Game was a Draw.`;
msgContainer.classList.remove("hide");
disableBoxes();
};

const disableBoxes = () => {


for (let box of boxes) {
box.disabled = true;

11
}
}

const enableBoxes = () => {


for (let box of boxes) {
box.disabled = false;
box.innerText = "";
}
}

const showWinnner = (winner) =>{

msg.innerText =`Congratulations,Winner is ${winner}`;


msgContainer.classList.remove("hide");
disableBoxes();

const checkWinner = () =>{


for(let pattern of winPatterns){

let pos1Val = boxes[pattern[0]].innerText;


let pos2Val = boxes[pattern[1]].innerText;
let pos3Val = boxes[pattern[2]].innerText;

if(pos1Val != "" && pos2Val != "" && pos3Val != ""){


if(pos1Val===pos2Val && pos2Val === pos3Val){
console.log("winner!",pos1Val);
showWinnner(pos1Val);
}
}
}

};

const resetGame = () => {


turn = true;
count =0;
enableBoxes();
msgContainer.classList.add("hide");

}
newGameBtn.addEventListener("click",resetGame);
resetBtn.addEventListener("click",resetGame);

12
5.Output of code

13
14
6. Reference
The reference from internet, following websites,
links have been used in the completion of this
project file:

 Websites:
https://www.youtube.com
https://www.geeksforgeeks.com

Following Books are used to have an idea about this


Project

 Client Side Scripting Language(CSS).

Various Articles used to implement this project.

15

You might also like