Skip to content

Commit 4d74605

Browse files
imvbhargavimvbhargav
authoredApr 4, 2023
Add files via upload
1 parent d5fe0eb commit 4d74605

5 files changed

+253
-0
lines changed
 

‎Titato.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
2+
3+
body{
4+
height: 100%;
5+
width: 100%;
6+
margin: 0;
7+
text-align: center;
8+
background-color: #000;
9+
}
10+
11+
div {
12+
background-color: #000;
13+
margin: 1px;
14+
text-align: center;
15+
min-height: 1.4em;
16+
}
17+
18+
19+
.container{
20+
background-color: #511ac7;
21+
color: red;
22+
display: grid;
23+
grid-template-columns: repeat(3,1fr);
24+
font-size: 5em;
25+
padding: 5px;
26+
font-family: 'Open Sans', sans-serif;
27+
}
28+
29+
30+
.tic{
31+
color: #02e7f7;
32+
}
33+
34+
.toe{
35+
color: yellow;
36+
}
37+
38+
.header{
39+
color:#fff;
40+
background-color: #000;
41+
text-align: left;
42+
display: grid;
43+
font-size: 1.2em;
44+
grid-template-columns: repeat(3,1fr);
45+
}
46+
47+
.rht{
48+
text-align: right;
49+
}
50+
51+
#mid{
52+
text-align: center;
53+
}
54+
55+
button{
56+
background-color: #000;
57+
color:#fff;
58+
border: none;
59+
margin-right: 5px;
60+
}
61+
62+
button, button:focus, button:hover, button:active {
63+
outline: none;
64+
box-shadow:none;
65+
}
66+
67+
.tac{
68+
color: #fff;
69+
}
70+
71+
72+
@media screen and (min-width: 600px){
73+
.wrapper{
74+
width: 40%;
75+
align-items: center;
76+
transform: translate(75%,20%);
77+
}
78+
}

‎Titato.js

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
var winner=1;
2+
var draw=0;
3+
var xplayed=[[]];
4+
var oplayed=[[]];
5+
var ToWinCombinations=[
6+
[0,1],[3,4],[6,7],[0,3],[1,4],[2,5],[0,4],[2,4],[1,2],[4,5],[7,8],[3,6],[4,7],[5,8],[4,8],[4,6],[0,2],[3,5],[6,8],[0,6],[1,7],[2,8],[0,8],[2,6]
7+
];
8+
var audio = new Audio("Touch_Sound_Effect_(Private_Only)(128k).mp3");
9+
var audio_win = new Audio("win_sound(128k).mp3");
10+
var all_full=0;
11+
var turn= "x";
12+
const winningCombinations = [
13+
[0, 1, 2],
14+
[3, 4, 5],
15+
[6, 7, 8],
16+
[0, 3, 6],
17+
[1, 4, 7],
18+
[2, 5, 8],
19+
[0, 4, 8],
20+
[2, 4, 6] ];
21+
function turn_change(){
22+
if (turn=="x"){
23+
var trno= document.getElementById("turn");
24+
trno.innerHTML=" X";
25+
trno.style.color="#02e7f7";
26+
}
27+
else{
28+
var trnt=document.getElementById("turn");
29+
trnt.innerHTML=" O";
30+
trnt.style.color="yellow";
31+
}
32+
}
33+
34+
35+
36+
function change(i){
37+
if(winner){
38+
var tile=document.getElementsByClassName("tile")[i];
39+
if(tile.innerHTML!="x" && tile.innerHTML!="o"){
40+
if (turn=="x"){
41+
tile.innerHTML=turn;
42+
tile.style.color="#02e7f7";
43+
turn="o";
44+
turn_change();
45+
audio.play();
46+
audio.playbackRate=4.0;
47+
}
48+
else{
49+
tile.innerHTML=turn;
50+
tile.style.color="yellow";
51+
turn="x";
52+
turn_change();
53+
audio.play();
54+
audio.playbackRate=4.0;
55+
}
56+
}
57+
draw_check();
58+
if (draw){
59+
document.getElementById("mid").innerHTML="Draw";
60+
document.getElementById("mid").style.color="red";
61+
}
62+
win_check();
63+
}
64+
}
65+
66+
67+
function win_check(){
68+
var tile_info=document.getElementsByClassName("tile");
69+
for(var j=0;j<8;j++){
70+
const a = winningCombinations[j][0];
71+
const b = winningCombinations[j][1];
72+
const c = winningCombinations[j][2];
73+
if (tile_info[a].innerHTML=="x" && tile_info[b].innerHTML=="x" && tile_info[c].innerHTML=="x"){
74+
document.getElementById("mid").innerHTML="X wins";
75+
document.getElementById("mid").style.color="#02e7f7";
76+
tile_info[a].style.color="#33fb33";
77+
tile_info[b].style.color="#33fb33";
78+
tile_info[c].style.color="#33fb33";
79+
tile_info[a].style.backgroundColor="#0b3d06";
80+
tile_info[b].style.backgroundColor="#0b3d06";
81+
tile_info[c].style.backgroundColor="#0b3d06";
82+
audio_win.play();
83+
winner=0;
84+
}
85+
else if (tile_info[a].innerText=="o" && tile_info[b].innerText=="o" && tile_info[c].innerText=="o"){
86+
document.getElementById("mid").innerHTML="O wins";
87+
document.getElementById("mid").style.color="yellow";
88+
tile_info[a].style.color="#33fb33";
89+
tile_info[b].style.color="#33fb33";
90+
tile_info[c].style.color="#33fb33";
91+
tile_info[a].style.backgroundColor="#0b3d06";
92+
tile_info[b].style.backgroundColor="#0b3d06";
93+
tile_info[c].style.backgroundColor="#0b3d06";
94+
audio_win.play();
95+
winner=0;
96+
}
97+
98+
}
99+
}
100+
101+
function draw_check(){
102+
var tile_info=document.getElementsByClassName("tile");
103+
for(var t=0;t<9;t++){
104+
if (tile_info[t].innerText=="x" || tile_info[t].innerText=="o"){
105+
draw=1;
106+
}
107+
else{
108+
draw=0;
109+
break;
110+
}
111+
}
112+
}
113+
114+
function refresh(){
115+
var tile_info=document.getElementsByClassName("tile");
116+
for(var k=0;k<9;k++){
117+
document.getElementsByClassName("tile")[k].innerHTML=" ";
118+
document.getElementById("mid").style.color="#fff";
119+
tile_info[k].style.backgroundColor="#000";
120+
}
121+
winner=1;
122+
document.getElementById("mid").innerHTML="Play";
123+
124+
125+
}
126+
127+
128+
turn_change();
129+

‎Touch_Sound_Effect_(Private_Only)(128k).mp3

12.4 KB
Binary file not shown.

‎index.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<link href="Titato.css" rel=stylesheet type="text/css"/>
7+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
8+
rel="stylesheet">
9+
<title>Tic Tac Toe</title>
10+
</head>
11+
<body>
12+
<h1>
13+
<i class="tic">Tic</i>
14+
<i class="tac">Tac</i>
15+
<i class="toe">Toe</i>
16+
</h1>
17+
<div class="wrapper">
18+
<div class="header">
19+
<h3>Turn: <i id="turn">X</i></h3>
20+
<h3 id="mid">Play</h3>
21+
<h3 class="rht"><button onclick="refresh()"><i class="material-icons">refresh</i></button></h3>
22+
</div>
23+
<div class="container">
24+
<div class="tile" onclick="change(0)">
25+
</div>
26+
<div class="tile" onclick="change(1)">
27+
</div>
28+
<div class="tile" onclick="change(2)">
29+
</div>
30+
<div class="tile" onclick="change(3)">
31+
</div>
32+
<div class="tile" onclick="change(4)">
33+
</div>
34+
<div class="tile" onclick="change(5)">
35+
</div>
36+
<div class="tile" onclick="change(6)">
37+
</div>
38+
<div class="tile" onclick="change(7)">
39+
</div>
40+
<div class="tile" onclick="change(8)">
41+
</div>
42+
</div>
43+
</div>
44+
<script src="Titato.js" type="text/javascript" charset="utf-8"></script>
45+
</body>
46+
</html>

‎win_sound(128k).mp3

39.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)
Please sign in to comment.