Skip to content

Commit c0ef200

Browse files
Spyros03Spyros03
authored
Uploaded the app.
1 parent c93de5a commit c0ef200

File tree

4 files changed

+309
-0
lines changed

4 files changed

+309
-0
lines changed

‎WinningPatternsIDs.txt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
1 - first diagonal
2+
tl,mm,br == 1 5 9
3+
2 - second diagonal
4+
tr,mm,bl == 3 5 7
5+
3 - first row
6+
tl,tm,tr == 1 2 3
7+
4 - second row
8+
ml,mm,ml == 4 5 6
9+
5 - third row
10+
bl,bm,br == 7 8 9
11+
6 - first column
12+
tl,ml,rl == 1 4 7
13+
7 - second column
14+
tm,mm,bm == 2 5 8
15+
8 - third column
16+
tr,mr,br == 3 6 9

‎index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<script defer type="text/javascript" src="index.js"></script>
8+
<title>Tic Tac Toe !</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header>
13+
<div class="title">
14+
<h1>Tic Tac Toe !!!</h1>
15+
</div>
16+
</header>
17+
<div class="alert-box" ><h1 id="alert-box"></h1></div>
18+
<div class="table-area">
19+
<div class="row top">
20+
<div class="col left"><a href="javascirpt:void(0);" onclick="turnPlayed(1)"><div id="B1"></div></a></div>
21+
<div class="col mid"><a href="javascirpt:void(0);" onclick="turnPlayed(2)"><div id="B2"></div></a></div>
22+
<div class="col right"><a href="javascirpt:void(0);" onclick="turnPlayed(3)"><div id="B3"></div></a></div>
23+
</div>
24+
<div class="row mid">
25+
<div class="col left"><a href="javascirpt:void(0);" onclick="turnPlayed(4)"><div id="B4"></div></a></div>
26+
<div class="col mid "><a href="javascirpt:void(0);" onclick="turnPlayed(5)"><div id="B5"></div></a></div>
27+
<div class="col right"><a href="javascirpt:void(0);" onclick="turnPlayed(6)"><div id="B6"></div></a></div>
28+
</div>
29+
<div class="row bot">
30+
<div class="col left"><a href="javascirpt:void(0);" onclick="turnPlayed(7)"><div id="B7"></div></a></div>
31+
<div class="col mid"><a href="javascirpt:void(0);" onclick="turnPlayed(8)"><div id="B8"></div></a></div>
32+
<div class="col right"><a href="javascirpt:void(0);" onclick="turnPlayed(9)"><div id="B9"></div></a></div>
33+
</div>
34+
<div class="resetButton">
35+
<button onclick="reset()">RESTART</button>
36+
</div>
37+
</div>
38+
</div>
39+
</body>
40+
</html>

‎index.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
var board = [];
2+
for (var i = 1; i <=9; i++){
3+
board[i] = document.getElementById("B" + i.toString());
4+
}
5+
var alertbox = document.getElementById("alert-box");
6+
var turn = 1;
7+
var playSymbol = "X"
8+
var isOver = false;
9+
10+
11+
function turnPlayed(box){
12+
if (board[box].innerHTML !== ""){
13+
alertbox.innerHTML = "This box is already played";
14+
return;
15+
}
16+
if (turn % 2 == 0){
17+
playSymbol = "O";
18+
}
19+
if (isOver){
20+
return ;
21+
}
22+
board[box].innerHTML = playSymbol;
23+
var winningCondition = checkForWinners();
24+
if (winningCondition > 0){
25+
showWinner(winningCondition);
26+
isOver = true;
27+
}
28+
else {
29+
turn++;
30+
if (turn == 10){
31+
callDraw();
32+
}
33+
playSymbol = "X";
34+
}
35+
}
36+
37+
function checkForWinners(){
38+
if (board[5].innerHTML === playSymbol){
39+
if (board[1].innerHTML === playSymbol && board[9].innerHTML === playSymbol){
40+
return 1;
41+
}
42+
else if (board[3].innerHTML === playSymbol && board[7].innerHTML === playSymbol){
43+
return 2;
44+
}
45+
else if (board[4].innerHTML === playSymbol && board[6].innerHTML === playSymbol){
46+
return 4;
47+
}
48+
else if (board[2].innerHTML === playSymbol && board[8].innerHTML === playSymbol){
49+
return 7;
50+
}
51+
}
52+
if (board[1].innerHTML === playSymbol){
53+
if (board[2].innerHTML === playSymbol && board[3].innerHTML === playSymbol){
54+
return 3;
55+
}
56+
if (board[4].innerHTML === playSymbol && board[7].innerHTML === playSymbol){
57+
return 6;
58+
}
59+
}
60+
if (board[9].innerHTML === playSymbol){
61+
if (board[7].innerHTML === playSymbol && board[8].innerHTML === playSymbol){
62+
return 5;
63+
}
64+
if (board[6].innerHTML === playSymbol && board[3].innerHTML === playSymbol){
65+
return 8;
66+
}
67+
}
68+
return -1;
69+
}
70+
71+
function showWinner(winningCondition) {
72+
var turnedElements = [];
73+
if (winningCondition === 1){
74+
turnedElements = [1, 5, 9];
75+
}
76+
else if(winningCondition === 2){
77+
turnedElements = [3, 5, 7];
78+
}
79+
else if (winningCondition === 3){
80+
turnedElements = [1, 2, 3];
81+
}
82+
else if (winningCondition === 4){
83+
turnedElements = [4, 5, 6];
84+
}
85+
else if (winningCondition === 5){
86+
turnedElements = [7, 8, 9];
87+
}
88+
else if (winningCondition === 6){
89+
turnedElements = [1, 4, 7];
90+
}
91+
else if (winningCondition === 7){
92+
turnedElements = [2, 5, 8];
93+
}
94+
else if (winningCondition === 8){
95+
turnedElements = [3, 6, 9];
96+
}
97+
for (i of turnedElements){
98+
board[i].className = "winner";
99+
}
100+
alertbox.innerHTML = playSymbol + " player has Won!";
101+
isOver = true;
102+
}
103+
104+
function callDraw(){
105+
alertbox.innerHTML = "The game has ended in a Draw.";
106+
}
107+
108+
function reset(){
109+
for (var i = 1; i < board.length; i++){
110+
board[i].innerHTML = "";
111+
board[i].className = "";
112+
}
113+
alertbox.innerHTML = ""
114+
turn = 1;
115+
playSymbol = "X";
116+
isOver = false;
117+
}

‎style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
html {
2+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
3+
}
4+
5+
body {
6+
background-color: rgb(148, 49, 148);
7+
background: linear-gradient(45deg, rgb(148, 49, 148),rgb(68, 14, 68));
8+
background-repeat: no-repeat;
9+
background-attachment: fixed;
10+
margin: 0;
11+
}
12+
13+
div.container {
14+
background-color: rgba(206, 159, 200 , .45);
15+
height: 780px;
16+
width: 500px;
17+
display: block;
18+
margin: auto;
19+
margin-top: 100px;
20+
border-radius: 30px;
21+
}
22+
23+
header h1{
24+
text-align: center;
25+
color: white;
26+
box-sizing: border-box;
27+
padding-top: 50px;
28+
margin-bottom: 10px;
29+
}
30+
31+
.row{
32+
display: flex;
33+
flex-wrap: nowrap;
34+
width: 100%;
35+
align-items: center;
36+
height: 33%;
37+
}
38+
39+
.row::after{
40+
display: block;
41+
clear: both;
42+
content: "";
43+
}
44+
45+
.col {
46+
width: 33.33%;
47+
height: 100%;
48+
border: 2px solid rgb(92, 23, 119);
49+
}
50+
51+
.table-area {
52+
text-align: center;
53+
margin: auto;
54+
height: 60%;
55+
box-sizing: border-box;
56+
width: 90%;
57+
}
58+
59+
div.col a{
60+
font-size: 100px;
61+
font-weight: 900;
62+
text-decoration: none;
63+
text-align: center;
64+
line-height: 1.5;
65+
color: rgb(56, 11, 70);
66+
}
67+
68+
div.col div {
69+
width: 100%;
70+
height: 100%;
71+
}
72+
73+
div.alert-box {
74+
display: block;
75+
height: 32px;
76+
text-align: center;
77+
font-size: 14px;
78+
color: rgb(92, 23, 119);
79+
margin: 15px;
80+
}
81+
82+
.table-area button{
83+
margin-top: 35px;
84+
font-size: 30px;
85+
padding: 7px 35px;
86+
border-radius: 100px;
87+
background-color: rgba(227, 144, 235, 0.726);
88+
color: rgb(92, 23, 119);
89+
cursor: pointer;
90+
border-width: 1px;
91+
}
92+
93+
.table-area button:hover {
94+
color: rgba(227, 144, 235, 0.726);
95+
background-color: rgba(59, 6, 94, 0.726);
96+
}
97+
98+
.top .left{
99+
border-top: none;
100+
border-left: none
101+
}
102+
103+
.top .mid {
104+
border-top: none ;
105+
}
106+
107+
.top .right {
108+
border-top: none;
109+
border-right: none;
110+
}
111+
112+
.mid .left{
113+
border-left: none
114+
}
115+
116+
.mid .right {
117+
border-right: none;
118+
}
119+
120+
.bot .left{
121+
border-bottom: none;
122+
border-left: none
123+
}
124+
125+
.bot .mid {
126+
border-bottom: none ;
127+
}
128+
129+
.bot .right {
130+
border-bottom: none;
131+
border-right: none;
132+
}
133+
134+
.winner {
135+
background-color: rgba(16, 184, 86, 0.712);
136+
}

0 commit comments

Comments
 (0)