Skip to content

Commit 337622e

Browse files
abhipshapatroabhipshapatro
authored
Merge pull request #13 from DragonUncaged/tictoc
added all the html css and js file
2 parents 6e1ba18 + 4803088 commit 337622e

5 files changed

Lines changed: 498 additions & 0 deletions

File tree

‎16- Tic-Tac-Toe with 2 player/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Tic-Tac-Toe with 2 player
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![](https://github.com/DragonUncaged/Amazing-Js-Projects/blob/tictactoe/Tic-Tac-Toe%20with%202%20player/assets/tictactoe-demoo.gif)
9+
=======
10+

‎16- Tic-Tac-Toe with 2 player/assets/tictactoe-demoo.gif‎

265 KB
Loading

‎16- Tic-Tac-Toe with 2 player/index.html‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Pure CSS Tic-tac-toe</title>
6+
<meta
7+
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
8+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'><link rel="stylesheet" href="./style.css">
9+
10+
</head>
11+
<body>
12+
<!-- partial:index.partial.html -->
13+
<div class="tic-tac-toe">
14+
<input class="player-1 left first-column top first-row first-diagonal turn-1" id="block1-1-1" type="radio"/>
15+
<label class="turn-1" for="block1-1-1"></label>
16+
<input class="player-1 middle second-column top first-row turn-1" id="block1-1-2" type="radio"/>
17+
<label class="turn-1" for="block1-1-2"></label>
18+
<input class="player-1 right third-column top first-row second-diagonal turn-1" id="block1-1-3" type="radio"/>
19+
<label class="turn-1" for="block1-1-3"></label>
20+
<input class="player-1 left first-column center second-row turn-1" id="block1-2-1" type="radio"/>
21+
<label class="turn-1" for="block1-2-1"></label>
22+
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-1" id="block1-2-2" type="radio"/>
23+
<label class="turn-1" for="block1-2-2"></label>
24+
<input class="player-1 right third-column center second-row turn-1" id="block1-2-3" type="radio"/>
25+
<label class="turn-1" for="block1-2-3"></label>
26+
<input class="player-1 left first-column bottom third-row second-diagonal turn-1" id="block1-3-1" type="radio"/>
27+
<label class="turn-1" for="block1-3-1"></label>
28+
<input class="player-1 middle second-column bottom third-row turn-1" id="block1-3-2" type="radio"/>
29+
<label class="turn-1" for="block1-3-2"></label>
30+
<input class="player-1 right third-column bottom third-row first-diagonal turn-1" id="block1-3-3" type="radio"/>
31+
<label class="turn-1" for="block1-3-3"></label>
32+
<input class="player-2 left first-column top first-row first-diagonal turn-2" id="block2-1-1" type="radio"/>
33+
<label class="turn-2" for="block2-1-1"></label>
34+
<input class="player-2 middle second-column top first-row turn-2" id="block2-1-2" type="radio"/>
35+
<label class="turn-2" for="block2-1-2"></label>
36+
<input class="player-2 right third-column top first-row second-diagonal turn-2" id="block2-1-3" type="radio"/>
37+
<label class="turn-2" for="block2-1-3"></label>
38+
<input class="player-2 left first-column center second-row turn-2" id="block2-2-1" type="radio"/>
39+
<label class="turn-2" for="block2-2-1"></label>
40+
<input class="player-2 middle second-column center second-row first-diagonal second-diagonal turn-2" id="block2-2-2" type="radio"/>
41+
<label class="turn-2" for="block2-2-2"></label>
42+
<input class="player-2 right third-column center second-row turn-2" id="block2-2-3" type="radio"/>
43+
<label class="turn-2" for="block2-2-3"></label>
44+
<input class="player-2 left first-column bottom third-row second-diagonal turn-2" id="block2-3-1" type="radio"/>
45+
<label class="turn-2" for="block2-3-1"></label>
46+
<input class="player-2 middle second-column bottom third-row turn-2" id="block2-3-2" type="radio"/>
47+
<label class="turn-2" for="block2-3-2"></label>
48+
<input class="player-2 right third-column bottom third-row first-diagonal turn-2" id="block2-3-3" type="radio"/>
49+
<label class="turn-2" for="block2-3-3"></label>
50+
<input class="player-1 left first-column top first-row first-diagonal turn-3" id="block3-1-1" type="radio"/>
51+
<label class="turn-3" for="block3-1-1"></label>
52+
<input class="player-1 middle second-column top first-row turn-3" id="block3-1-2" type="radio"/>
53+
<label class="turn-3" for="block3-1-2"></label>
54+
<input class="player-1 right third-column top first-row second-diagonal turn-3" id="block3-1-3" type="radio"/>
55+
<label class="turn-3" for="block3-1-3"></label>
56+
<input class="player-1 left first-column center second-row turn-3" id="block3-2-1" type="radio"/>
57+
<label class="turn-3" for="block3-2-1"></label>
58+
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-3" id="block3-2-2" type="radio"/>
59+
<label class="turn-3" for="block3-2-2"></label>
60+
<input class="player-1 right third-column center second-row turn-3" id="block3-2-3" type="radio"/>
61+
<label class="turn-3" for="block3-2-3"></label>
62+
<input class="player-1 left first-column bottom third-row second-diagonal turn-3" id="block3-3-1" type="radio"/>
63+
<label class="turn-3" for="block3-3-1"></label>
64+
<input class="player-1 middle second-column bottom third-row turn-3" id="block3-3-2" type="radio"/>
65+
<label class="turn-3" for="block3-3-2"></label>
66+
<input class="player-1 right third-column bottom third-row first-diagonal turn-3" id="block3-3-3" type="radio"/>
67+
<label class="turn-3" for="block3-3-3"></label>
68+
<input class="player-2 left first-column top first-row first-diagonal turn-4" id="block4-1-1" type="radio"/>
69+
<label class="turn-4" for="block4-1-1"></label>
70+
<input class="player-2 middle second-column top first-row turn-4" id="block4-1-2" type="radio"/>
71+
<label class="turn-4" for="block4-1-2"></label>
72+
<input class="player-2 right third-column top first-row second-diagonal turn-4" id="block4-1-3" type="radio"/>
73+
<label class="turn-4" for="block4-1-3"></label>
74+
<input class="player-2 left first-column center second-row turn-4" id="block4-2-1" type="radio"/>
75+
<label class="turn-4" for="block4-2-1"></label>
76+
<input class="player-2 middle second-column center second-row first-diagonal second-diagonal turn-4" id="block4-2-2" type="radio"/>
77+
<label class="turn-4" for="block4-2-2"></label>
78+
<input class="player-2 right third-column center second-row turn-4" id="block4-2-3" type="radio"/>
79+
<label class="turn-4" for="block4-2-3"></label>
80+
<input class="player-2 left first-column bottom third-row second-diagonal turn-4" id="block4-3-1" type="radio"/>
81+
<label class="turn-4" for="block4-3-1"></label>
82+
<input class="player-2 middle second-column bottom third-row turn-4" id="block4-3-2" type="radio"/>
83+
<label class="turn-4" for="block4-3-2"></label>
84+
<input class="player-2 right third-column bottom third-row first-diagonal turn-4" id="block4-3-3" type="radio"/>
85+
<label class="turn-4" for="block4-3-3"></label>
86+
<input class="player-1 left first-column top first-row first-diagonal turn-5" id="block5-1-1" type="radio"/>
87+
<label class="turn-5" for="block5-1-1"></label>
88+
<input class="player-1 middle second-column top first-row turn-5" id="block5-1-2" type="radio"/>
89+
<label class="turn-5" for="block5-1-2"></label>
90+
<input class="player-1 right third-column top first-row second-diagonal turn-5" id="block5-1-3" type="radio"/>
91+
<label class="turn-5" for="block5-1-3"></label>
92+
<input class="player-1 left first-column center second-row turn-5" id="block5-2-1" type="radio"/>
93+
<label class="turn-5" for="block5-2-1"></label>
94+
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-5" id="block5-2-2" type="radio"/>
95+
<label class="turn-5" for="block5-2-2"></label>
96+
<input class="player-1 right third-column center second-row turn-5" id="block5-2-3" type="radio"/>
97+
<label class="turn-5" for="block5-2-3"></label>
98+
<input class="player-1 left first-column bottom third-row second-diagonal turn-5" id="block5-3-1" type="radio"/>
99+
<label class="turn-5" for="block5-3-1"></label>
100+
<input class="player-1 middle second-column bottom third-row turn-5" id="block5-3-2" type="radio"/>
101+
<label class="turn-5" for="block5-3-2"></label>
102+
<input class="player-1 right third-column bottom third-row first-diagonal turn-5" id="block5-3-3" type="radio"/>
103+
<label class="turn-5" for="block5-3-3"></label>
104+
<input class="player-2 left first-column top first-row first-diagonal turn-6" id="block6-1-1" type="radio"/>
105+
<label class="turn-6" for="block6-1-1"></label>
106+
<input class="player-2 middle second-column top first-row turn-6" id="block6-1-2" type="radio"/>
107+
<label class="turn-6" for="block6-1-2"></label>
108+
<input class="player-2 right third-column top first-row second-diagonal turn-6" id="block6-1-3" type="radio"/>
109+
<label class="turn-6" for="block6-1-3"></label>
110+
<input class="player-2 left first-column center second-row turn-6" id="block6-2-1" type="radio"/>
111+
<label class="turn-6" for="block6-2-1"></label>
112+
<input class="player-2 middle second-column center second-row first-diagonal second-diagonal turn-6" id="block6-2-2" type="radio"/>
113+
<label class="turn-6" for="block6-2-2"></label>
114+
<input class="player-2 right third-column center second-row turn-6" id="block6-2-3" type="radio"/>
115+
<label class="turn-6" for="block6-2-3"></label>
116+
<input class="player-2 left first-column bottom third-row second-diagonal turn-6" id="block6-3-1" type="radio"/>
117+
<label class="turn-6" for="block6-3-1"></label>
118+
<input class="player-2 middle second-column bottom third-row turn-6" id="block6-3-2" type="radio"/>
119+
<label class="turn-6" for="block6-3-2"></label>
120+
<input class="player-2 right third-column bottom third-row first-diagonal turn-6" id="block6-3-3" type="radio"/>
121+
<label class="turn-6" for="block6-3-3"></label>
122+
<input class="player-1 left first-column top first-row first-diagonal turn-7" id="block7-1-1" type="radio"/>
123+
<label class="turn-7" for="block7-1-1"></label>
124+
<input class="player-1 middle second-column top first-row turn-7" id="block7-1-2" type="radio"/>
125+
<label class="turn-7" for="block7-1-2"></label>
126+
<input class="player-1 right third-column top first-row second-diagonal turn-7" id="block7-1-3" type="radio"/>
127+
<label class="turn-7" for="block7-1-3"></label>
128+
<input class="player-1 left first-column center second-row turn-7" id="block7-2-1" type="radio"/>
129+
<label class="turn-7" for="block7-2-1"></label>
130+
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-7" id="block7-2-2" type="radio"/>
131+
<label class="turn-7" for="block7-2-2"></label>
132+
<input class="player-1 right third-column center second-row turn-7" id="block7-2-3" type="radio"/>
133+
<label class="turn-7" for="block7-2-3"></label>
134+
<input class="player-1 left first-column bottom third-row second-diagonal turn-7" id="block7-3-1" type="radio"/>
135+
<label class="turn-7" for="block7-3-1"></label>
136+
<input class="player-1 middle second-column bottom third-row turn-7" id="block7-3-2" type="radio"/>
137+
<label class="turn-7" for="block7-3-2"></label>
138+
<input class="player-1 right third-column bottom third-row first-diagonal turn-7" id="block7-3-3" type="radio"/>
139+
<label class="turn-7" for="block7-3-3"></label>
140+
<input class="player-2 left first-column top first-row first-diagonal turn-8" id="block8-1-1" type="radio"/>
141+
<label class="turn-8" for="block8-1-1"></label>
142+
<input class="player-2 middle second-column top first-row turn-8" id="block8-1-2" type="radio"/>
143+
<label class="turn-8" for="block8-1-2"></label>
144+
<input class="player-2 right third-column top first-row second-diagonal turn-8" id="block8-1-3" type="radio"/>
145+
<label class="turn-8" for="block8-1-3"></label>
146+
<input class="player-2 left first-column center second-row turn-8" id="block8-2-1" type="radio"/>
147+
<label class="turn-8" for="block8-2-1"></label>
148+
<input class="player-2 middle second-column center second-row first-diagonal second-diagonal turn-8" id="block8-2-2" type="radio"/>
149+
<label class="turn-8" for="block8-2-2"></label>
150+
<input class="player-2 right third-column center second-row turn-8" id="block8-2-3" type="radio"/>
151+
<label class="turn-8" for="block8-2-3"></label>
152+
<input class="player-2 left first-column bottom third-row second-diagonal turn-8" id="block8-3-1" type="radio"/>
153+
<label class="turn-8" for="block8-3-1"></label>
154+
<input class="player-2 middle second-column bottom third-row turn-8" id="block8-3-2" type="radio"/>
155+
<label class="turn-8" for="block8-3-2"></label>
156+
<input class="player-2 right third-column bottom third-row first-diagonal turn-8" id="block8-3-3" type="radio"/>
157+
<label class="turn-8" for="block8-3-3"></label>
158+
<input class="player-1 left first-column top first-row first-diagonal turn-9" id="block9-1-1" type="radio"/>
159+
<label class="turn-9" for="block9-1-1"></label>
160+
<input class="player-1 middle second-column top first-row turn-9" id="block9-1-2" type="radio"/>
161+
<label class="turn-9" for="block9-1-2"></label>
162+
<input class="player-1 right third-column top first-row second-diagonal turn-9" id="block9-1-3" type="radio"/>
163+
<label class="turn-9" for="block9-1-3"></label>
164+
<input class="player-1 left first-column center second-row turn-9" id="block9-2-1" type="radio"/>
165+
<label class="turn-9" for="block9-2-1"></label>
166+
<input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-9" id="block9-2-2" type="radio"/>
167+
<label class="turn-9" for="block9-2-2"></label>
168+
<input class="player-1 right third-column center second-row turn-9" id="block9-2-3" type="radio"/>
169+
<label class="turn-9" for="block9-2-3"></label>
170+
<input class="player-1 left first-column bottom third-row second-diagonal turn-9" id="block9-3-1" type="radio"/>
171+
<label class="turn-9" for="block9-3-1"></label>
172+
<input class="player-1 middle second-column bottom third-row turn-9" id="block9-3-2" type="radio"/>
173+
<label class="turn-9" for="block9-3-2"></label>
174+
<input class="player-1 right third-column bottom third-row first-diagonal turn-9" id="block9-3-3" type="radio"/>
175+
<label class="turn-9" for="block9-3-3"></label>
176+
<div class="end">
177+
<h3></h3><a href="">Restart</a>
178+
</div>
179+
</div>
180+
<!-- partial -->
181+
<script src="./script.js"></script>
182+
183+
</body>
184+
</html>

‎16- Tic-Tac-Toe with 2 player/preview.jpg‎

40.7 KB
Loading

0 commit comments

Comments
 (0)