Skip to content

Commit 2083916

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#45 from prakashait9/tictactoe
Add Tic Tac Toe Game
2 parents 700cf40 + e5d1df1 commit 2083916

3 files changed

Lines changed: 384 additions & 0 deletions

File tree

‎TicTacToe/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Tic Tac Toe</title>
6+
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
7+
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
8+
<link rel="stylesheet" href="style.css">
9+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
10+
<script src='https://code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
11+
<script src="script.js"></script>
12+
</head>
13+
14+
<body>
15+
<div id="main">
16+
<div class="container-fluid">
17+
<div class="row">
18+
<div class="col-xs-4 cell" id="c11">
19+
</div>
20+
<div class="col-xs-4 cell" id="c12">
21+
</div>
22+
<div class="col-xs-4 cell" id="c13">
23+
</div>
24+
</div>
25+
<div class="row">
26+
<div class="col-xs-4 cell" id="c21">
27+
</div>
28+
<div class="col-xs-4 cell" id="c22">
29+
</div>
30+
<div class="col-xs-4 cell" id="c23">
31+
</div>
32+
</div>
33+
<div class="row">
34+
<div class="col-xs-4 cell" id="c31">
35+
</div>
36+
<div class="col-xs-4 cell" id="c32">
37+
</div>
38+
<div class="col-xs-4 cell" id="c33">
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
44+
<div id="dialog" title="Tic Tac Toe">
45+
<p>Choose X or O</p>
46+
</div>
47+
48+
49+
</body>
50+
51+
</html>

‎TicTacToe/script.js‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
var isX = true;
2+
var isValid = false;
3+
var cells = [];
4+
var player = 1;
5+
var computer = 0;
6+
var currentPlayer = 1;
7+
var result = "";
8+
var intervalId;
9+
10+
$(document).ready(function () {
11+
$("#dialog").dialog({
12+
resizable: false,
13+
height: 160,
14+
modal: true,
15+
buttons: {
16+
"X": function () {
17+
isX = true;
18+
$(this).dialog("close");
19+
startGame();
20+
},
21+
"O": function () {
22+
isX = false;
23+
$(this).dialog("close");
24+
startGame();
25+
}
26+
}
27+
});
28+
});
29+
30+
function startGame() {
31+
emptyCells();
32+
if (isX) {
33+
player = 1;
34+
computer = 0;
35+
} else {
36+
player = 0;
37+
computer = 1;
38+
}
39+
40+
var rnd = Math.round(Math.random());
41+
if (rnd === 1) {
42+
currentPlayer = player;
43+
} else {
44+
currentPlayer = computer;
45+
}
46+
intervalId = setInterval(loop, 100);
47+
}
48+
49+
function loop() {
50+
if (currentPlayer === player) {
51+
isValid = true;
52+
} else {
53+
computerMove();
54+
currentPlayer = player;
55+
}
56+
57+
$(".cell").on("click", function () {
58+
if (isValid) {
59+
var sign = player === 0 ? "O" : "X";
60+
61+
var i = $(this).attr("id")[1] - 1;
62+
var j = $(this).attr("id")[2] - 1;
63+
if (cells[i][j] === -1) {
64+
cells[i][j] = player;
65+
$(this).html(sign);
66+
isValid = false;
67+
if (!whoWon(cells)) {
68+
currentPlayer = computer;
69+
}
70+
}
71+
}
72+
});
73+
74+
var winner = whoWon(cells);
75+
if (winner) {
76+
if (winner === "computer") {
77+
alert("You Lost, Better Luck Next Time.");
78+
} else {
79+
alert("Congratulations! You Won.");
80+
}
81+
result = winner;
82+
}
83+
else if (isTableFull(cells)) {
84+
result = "Tie";
85+
alert("Its a tie");
86+
}
87+
if (result !== "") {
88+
clearInterval(intervalId);
89+
result = "";
90+
cells = [];
91+
clearTable();
92+
startGame();
93+
}
94+
}
95+
96+
97+
function isTableFull(cells) {
98+
for (var i in cells) {
99+
for (var j in cells[i]) {
100+
if (cells[i][j] === -1) {
101+
return false;
102+
}
103+
}
104+
}
105+
return true;
106+
}
107+
108+
function whoWon(cells) {
109+
//horizontal match
110+
for (var i in cells) {
111+
if (cells[i][0] !== -1 &&
112+
cells[i][1] !== -1 &&
113+
cells[i][2] !== -1 &&
114+
cells[i][0] === cells[i][1] && cells[i][0] === cells[i][2]) {
115+
if (cells[i][0] === player) {
116+
return "player";
117+
}
118+
else {
119+
return "computer";
120+
}
121+
}
122+
}
123+
//vertical match
124+
for (var i in cells) {
125+
if (cells[0][i] !== -1 &&
126+
cells[1][i] !== -1 &&
127+
cells[2][i] !== -1 &&
128+
cells[0][i] === cells[1][i] && cells[0][i] === cells[2][i]) {
129+
if (cells[0][i] === player) {
130+
return "player";
131+
}
132+
else {
133+
return "computer";
134+
}
135+
}
136+
}
137+
138+
//diagonal match
139+
if ((cells[0][0] !== -1 &&
140+
cells[1][1] !== -1 &&
141+
cells[2][2] !== -1 &&
142+
cells[0][0] === cells[1][1] && cells[0][0] === cells[2][2]) ||
143+
(cells[0][2] !== -1 &&
144+
cells[1][1] !== -1 &&
145+
cells[2][0] !== -1 &&
146+
cells[0][2] === cells[1][1] && cells[0][2] === cells[2][0])) {
147+
if (cells[1][1] === player) {
148+
return "player";
149+
}
150+
else {
151+
return "computer";
152+
}
153+
}
154+
155+
return false;
156+
}
157+
158+
function computerMove() {
159+
var arr = freeCells();
160+
var arr2 = bestMove();
161+
var sign = computer === 0 ? "O" : "X";
162+
var x = Math.round(Math.random() * arr.length);
163+
164+
if (arr2.length >= 1) {
165+
var i = arr2[0];
166+
var j = arr2[1];
167+
} else if (arr.length >= 1) {
168+
var i = arr[x][0];
169+
var j = arr[x][1];
170+
}
171+
if ((arr.length >= 1 || arr2.length >= 1) && cells[i][j] === -1) {
172+
var a = parseInt(i) + 1;
173+
var b = parseInt(j) + 1;
174+
new Promise(function (resolve, reject) {
175+
$("#c" + a + b).html(sign);
176+
resolve();
177+
}).then(function () {
178+
cells[i++][j++] = computer;
179+
})
180+
return 0;
181+
}
182+
}
183+
184+
function freeCells() {
185+
var arr = [];
186+
for (var i in cells) {
187+
for (var j in cells[i]) {
188+
if (cells[i][j] === -1) {
189+
arr.push([i, j]);
190+
}
191+
}
192+
}
193+
return arr;
194+
}
195+
196+
function bestMove() {
197+
var computerInLine = 0;
198+
var playerInLine = 0;
199+
var a = 0;
200+
var maybe = null;
201+
//check rows
202+
for (var i in cells) {
203+
for (var j in cells[i]) {
204+
if (cells[i][j] !== -1) {
205+
if (cells[i][j] === computer) {
206+
computerInLine++;
207+
} else {
208+
playerInLine++;
209+
}
210+
} else {
211+
a = j;
212+
}
213+
}
214+
if (computerInLine === 2 && a !== 0) {
215+
return [i, a];
216+
} else if (playerInLine === 2 && a !== 0) {
217+
maybe = [i, a];
218+
}
219+
a = 0;
220+
computerInLine = 0;
221+
playerInLine = 0;
222+
}
223+
224+
//check columns
225+
for (var j in cells) {
226+
for (var i in cells[i]) {
227+
if (cells[i][j] !== -1) {
228+
if (cells[i][j] === computer) {
229+
computerInLine++;
230+
} else {
231+
playerInLine++;
232+
}
233+
} else {
234+
a = i;
235+
}
236+
}
237+
if (computerInLine === 2 && a !== 0) {
238+
return [a, j];
239+
} else if (playerInLine === 2 && a !== 0) {
240+
maybe = [a, j];
241+
}
242+
a = 0;
243+
computerInLine = 0;
244+
playerInLine = 0;
245+
}
246+
247+
//check diagonals
248+
var h = 0;
249+
a = -1;
250+
var b = -1;
251+
playerInLine = 0;
252+
computerInLine = 0;
253+
for (var k = 0; k < 3; k++) {
254+
if (cells[k][h] !== -1) {
255+
if (cells[k][h] === computer) {
256+
computerInLine++;
257+
} else {
258+
playerInLine++;
259+
}
260+
} else {
261+
a = k;
262+
b = h;
263+
}
264+
265+
if (computerInLine === 2 && a !== -1 && b !== -1) {
266+
return [a, b];
267+
} else if (playerInLine === 2 && a !== -1 && b != -1) {
268+
maybe = [a, b];
269+
}
270+
271+
h++;
272+
}
273+
274+
h = 0;
275+
a = -1;
276+
b = -1;
277+
playerInLine = 0;
278+
computerInLine = 0;
279+
280+
for (var k = 2; k >= 0; k--) {
281+
if (cells[k][h] !== -1) {
282+
if (cells[k][h] === computer) {
283+
computerInLine++;
284+
} else {
285+
playerInLine++;
286+
}
287+
} else {
288+
a = k;
289+
b = h;
290+
}
291+
292+
if (computerInLine === 2 && a !== -1 && b !== -1) {
293+
return [a, b];
294+
} else if (playerInLine === 2 && a !== -1 && b != -1) {
295+
maybe = [a, b];
296+
}
297+
298+
h++;
299+
}
300+
301+
if (maybe !== null) return maybe;
302+
return [];
303+
}
304+
305+
function clearTable() {
306+
for (var a = 1; a <= 3; a++) {
307+
for (var b = 1; b <= 3; b++) {
308+
$("#c" + a + b).html("");
309+
}
310+
}
311+
}
312+
313+
function emptyCells() {
314+
for (var a = 0; a < 3; a++) {
315+
cells.push([-1, -1, -1]);
316+
}
317+
}

‎TicTacToe/style.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.cell {
2+
background-color: #0493ed;
3+
width: 200px;
4+
height: 200px;
5+
margin: 10px;
6+
font-size: 100px;
7+
color: white;
8+
text-align: center;
9+
line-height: 200px;
10+
}
11+
#main {
12+
min-height: 100%;
13+
min-height: 100vh;
14+
display: flex;
15+
align-items: center;
16+
}

0 commit comments

Comments
 (0)