Skip to content

Commit e05acd5

Browse files
Patel-Parth12Patel-Parth12
authored
Add files via upload
0 parents  commit e05acd5

File tree

3 files changed

+369
-0
lines changed

3 files changed

+369
-0
lines changed

‎Tic-Tac-Toe/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta name="viewport" content=
6+
"width=device-width, initial-scale=1.0">
7+
<!-- CSS file Included -->
8+
<link rel="stylesheet" type="text/css" href="tic.css">
9+
10+
</head>
11+
12+
<body>
13+
<div id="main">
14+
<h1>TIC TAC TOE</h1>
15+
<p id="ins">
16+
Game starts by just Tap on
17+
box<br><br>First Player starts as
18+
<b>Player X </b>And Second Player as
19+
<b>Player 0</b>
20+
</p>
21+
<br><br>
22+
<div class = "ui">
23+
<div class="row">
24+
<input type="text" id= "b1"
25+
class="cell" onclick="onPlayerTrun(1);"
26+
readonly>
27+
<input type="text" id= "b2"
28+
class="cell" onclick="onPlayerTrun(2);"
29+
readonly>
30+
<input type="text" id= "b3" class="cell"
31+
onclick="onPlayerTrun(3);"
32+
readonly>
33+
</div>
34+
<div class="row">
35+
<input type="text" id= "b4"
36+
class="cell" onclick="onPlayerTrun(4);"
37+
readonly>
38+
<input type="text" id= "b5"
39+
class="cell" onclick="onPlayerTrun(5);"
40+
readonly>
41+
<input type="text" id= "b6"
42+
class="cell" onclick="onPlayerTrun(6);"
43+
readonly>
44+
</div>
45+
<div class="row">
46+
<input type="text" id= "b7"
47+
class="cell" onclick="onPlayerTrun(7);"
48+
readonly>
49+
<input type="text" id= "b8"
50+
class="cell" onclick="onPlayerTrun(8);"
51+
readonly>
52+
<input type="text" id= "b9"
53+
class="cell" onclick="onPlayerTrun(9);"
54+
readonly>
55+
</div>
56+
</div>
57+
<br><br><br>
58+
59+
<button id="but" onclick="window.location.reload()">
60+
RESET
61+
</button>
62+
<br><br>
63+
<p id="print"></p>
64+
</div>
65+
<!-- JavaScript file included -->
66+
<script src="tic.js"></script>
67+
</body>
68+
69+
</html>

‎Tic-Tac-Toe/tic.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
h1 {
2+
color: orangered;
3+
margin-bottom: -5px;
4+
}
5+
p {
6+
margin-bottom: -10px;
7+
}
8+
.ui {
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
}
13+
.row {
14+
display: flex;
15+
}
16+
.cell {
17+
border: none;
18+
width: 80px;
19+
height: 80px;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: 24px;
24+
text-align: center;
25+
cursor: pointer;
26+
}
27+
.cell:active {
28+
outline: none;
29+
}
30+
/* 3*3 Grid */
31+
#b1{
32+
border-bottom: 1px solid gray;
33+
border-right: 1px solid gray;
34+
}
35+
36+
#b2 {
37+
border-bottom: 1px solid gray;
38+
border-right: 1px solid gray;
39+
border-left: 1px solid gray;
40+
}
41+
42+
#b3 {
43+
border-bottom: 1px solid gray;
44+
border-left: 1px solid gray;
45+
}
46+
47+
#b4 {
48+
border-top: 1px solid gray;
49+
border-bottom: 1px solid gray;
50+
border-right: 1px solid gray;
51+
}
52+
53+
#b5 {
54+
border: 1px solid gray;
55+
}
56+
57+
#b6 {
58+
border-top: 1px solid gray;
59+
border-bottom: 1px solid gray;
60+
border-left: 1px solid gray;
61+
}
62+
63+
#b7 {
64+
border-top: 1px solid gray;
65+
border-right: 1px solid gray;
66+
}
67+
68+
#b8 {
69+
border-top: 1px solid gray;
70+
border-right: 1px solid gray;
71+
border-left: 1px solid gray;
72+
}
73+
74+
#b9 {
75+
border-top: 1px solid gray;
76+
border-left: 1px solid gray;
77+
}
78+
/* Reset Button */
79+
#but {
80+
box-sizing: border-box;
81+
width: 95px;
82+
height: 40px;
83+
border: 1px solid dodgerblue;
84+
margin-left: auto;
85+
border-radius: 8px;
86+
font-family: Verdana,
87+
Geneva, Tahoma, sans-serif;
88+
89+
background-color: whitesmoke;
90+
color: dodgerblue;
91+
font-size: 20px;
92+
cursor: pointer;
93+
}
94+
95+
/* Player turn space */
96+
#print {
97+
font-family: Verdana,
98+
Geneva, Tahoma, sans-serif;
99+
color: dodgerblue;
100+
font-size: 20px;
101+
}
102+
103+
/* Main Container */
104+
#main {
105+
text-align: center;
106+
}
107+
108+
/* Game Instruction Text */
109+
#ins {
110+
font-family: Verdana,Geneva,
111+
Tahoma, sans-serif;
112+
color: dodgerblue;
113+
}

‎Tic-Tac-Toe/tic.js

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
let game_arr = [];
2+
let gamePlayer = true;
3+
const onPlayerTrun = function(i){
4+
if(!gamePlayer){
5+
return false;
6+
}
7+
if(isPositionisfree(i)){
8+
gamePlayer=false;
9+
setGameData(0,i);
10+
if(isWinnig(0,game_arr,false)){
11+
setMessage("Player X is Won");
12+
return false;
13+
}
14+
let computermove = computerMove(1);
15+
if(computermove){
16+
setGameData(1,computermove);
17+
}
18+
if(isWinnig(1,game_arr,false)){
19+
setMessage("Player 0 is Won");
20+
return false;
21+
}
22+
if(!isGameBordisFree()){
23+
setMessage("Draw");
24+
return false;
25+
}
26+
setMessage("Player X turn");
27+
28+
gamePlayer=true;
29+
}
30+
31+
};
32+
const isGameBordisFree = function(){
33+
return getCornerFreePosition(1,2,3,4,5,6,7,8,9).length > 0;
34+
};
35+
const computerMove=function(turn){
36+
setMessage("Player 0 turn");
37+
let oppTurn = (turn === 0)?1:0;
38+
let winingposition = getWiningPosition(turn);
39+
//console.log("getWiningPosition",turn,winingposition);
40+
if(winingposition){
41+
return winingposition;
42+
}
43+
winingposition = getWiningPosition(oppTurn);
44+
//console.log("getWiningPosition",oppTurn,winingposition);
45+
if(winingposition){
46+
return winingposition;
47+
}
48+
let freePosition;
49+
if(!isCornerisfree(oppTurn)){
50+
freePosition = getCornerFreePosition(5);
51+
if(freePosition.length > 0){
52+
return getRandomItem(freePosition);
53+
}
54+
}
55+
if(isCrossCorner(oppTurn)){
56+
freePosition = getCornerFreePosition(2,4,6,8);
57+
if(freePosition.length > 0){
58+
return getRandomItem(freePosition);
59+
}
60+
}
61+
62+
freePosition = getCornerFreePosition(1,3,7,9);
63+
if(freePosition.length > 0){
64+
return getRandomItem(freePosition);
65+
}
66+
freePosition = getCornerFreePosition(5);
67+
if(freePosition.length > 0){
68+
return getRandomItem(freePosition);
69+
}
70+
freePosition = getCornerFreePosition(2,4,6,8);
71+
if(freePosition.length > 0){
72+
return getRandomItem(freePosition);
73+
}
74+
75+
return null;
76+
};
77+
const getRandomItem=function(arr) {
78+
79+
// get random index value
80+
const randomIndex = Math.floor(Math.random() * arr.length);
81+
82+
// get random item
83+
const item = arr[randomIndex];
84+
85+
return item;
86+
};
87+
const getCornerFreePosition=function(...position){
88+
let freePosition = [];
89+
position.forEach(item=>{
90+
if(isPositionisfree(item)){
91+
freePosition.push(item);
92+
}
93+
});
94+
return freePosition;
95+
};
96+
const isCornerisfree=function(turn){
97+
let retValue = true;
98+
let char=getPlayerChar(turn);
99+
[1,3,7,9].forEach(item=>{
100+
if(!isPositionisfree(item) && game_arr[item]===char){
101+
retValue = false;
102+
return retValue;
103+
}
104+
});
105+
return retValue;
106+
};
107+
const isCrossCorner=function(turn){
108+
let char=getPlayerChar(turn);
109+
if(!isPositionisfree(1) && !isPositionisfree(9) && game_arr[1]===char && game_arr[9]===char){
110+
return true;
111+
}else if(!isPositionisfree(3) && !isPositionisfree(7) && game_arr[3]===char && game_arr[7]===char){
112+
return true;
113+
}
114+
return false;
115+
};
116+
const getWiningPosition=function(turn){
117+
let computerMovePosition;
118+
let char = getPlayerChar(turn);
119+
for(let i=1;i<=9;i++){
120+
if(isPositionisfree(i)){
121+
let copyGameBord = cloneArray(game_arr);
122+
copyGameBord[i]=char;
123+
if(isWinnig(turn,copyGameBord,true)){
124+
computerMovePosition=i;
125+
return computerMovePosition;
126+
}
127+
}
128+
}
129+
return computerMovePosition;
130+
};
131+
const cloneArray=function(arr){
132+
return arr.map(a => a);
133+
};
134+
const getPlayerChar=function(turn){
135+
return (turn === 0)?"X":"0";
136+
};
137+
const setGameData=function(turn,i){
138+
let char = getPlayerChar(turn);
139+
document.getElementById("b"+i).value = char;
140+
document.getElementById("b"+i).disabled = true;
141+
game_arr[i]=char;
142+
};
143+
const isWinnig=function(turn,gameBord,isdummy){
144+
let char = getPlayerChar(turn);
145+
if(winingCheck(gameBord,char,1,2,3,isdummy)){
146+
return true;
147+
}else if(winingCheck(gameBord,char,4,5,6,isdummy)){
148+
return true;
149+
}else if(winingCheck(gameBord,char,7,8,9,isdummy)){
150+
return true;
151+
}else if(winingCheck(gameBord,char,1,4,7,isdummy)){
152+
return true;
153+
}else if(winingCheck(gameBord,char,2,5,8,isdummy)){
154+
return true;
155+
}else if(winingCheck(gameBord,char,3,6,9,isdummy)){
156+
return true;
157+
}else if(winingCheck(gameBord,char,1,5,9,isdummy)){
158+
return true;
159+
}else if(winingCheck(gameBord,char,3,5,7,isdummy)){
160+
return true;
161+
}
162+
return false;
163+
};
164+
const setWiningColor = function(a,b,c){
165+
document.getElementById("b"+a).style = "color:red;";
166+
document.getElementById("b"+b).style = "color:red;";
167+
document.getElementById("b"+c).style = "color:red;";
168+
};
169+
const winingCheck=function(gameBord,ch,a,b,c,isdummy){
170+
let isWining = ch === gameBord[a] && gameBord[a] === gameBord[b] && gameBord[b] === gameBord[c];
171+
if(isWining && !isdummy){
172+
setWiningColor(a,b,c);
173+
}
174+
return isWining;
175+
};
176+
const isPositionisfree=function(i){
177+
if(game_arr[i]){
178+
return false;
179+
}
180+
return true;
181+
};
182+
const setMessage=function(msg){
183+
document.getElementById("print").innerText = msg;
184+
};
185+
setMessage("Player X turn");
186+
187+

0 commit comments

Comments
 (0)