Skip to content

Commit dda51c9

Browse files
MattCSmithMattCSmith
authored
Merge pull request zero-to-mastery#37 from sherawat-Lokesh/main
Tic tac toe by sherawat-lokesh
2 parents 8ab92f9 + f333527 commit dda51c9

File tree

3 files changed

+310
-2
lines changed

3 files changed

+310
-2
lines changed

‎README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,10 @@ Now, once you've forked this repo and got a local version up on your computer, f
5050
- [Digital Clock](./submissions/Mariano-JR.html) - By: [Mariano-JR](https://github.com/Mariano-JR)
5151
- [Pricing Page](/submissions/mohakgupt.html) - By: [Mohak](https://github.com/mohakgupt)
5252
- [Typewriter Effect](/submissions/alexwindy0.html) - By: [Alex](https://github.com/Alexwindy0)
53+
- [Tic tac toe](./submissions/sherawat-Lokesh.html) -By: [sherawat-Lokesh](https://github.com/sherawat-Lokesh)
5354
- [House Garbage Management website](/submissions/Fly0w.html) - By: [Fly0w](https://github.com/Fly0w)
5455

5556

56-
57-
5857
## One Last Thing!
5958

6059
**Please note: As with all ZTM challenges there is zero benefit or monetary gain ZTM receives from it. This is just our way of thanking students and making sure that you are able to continue gaining valuable knowledge outside of just the course videos. It would mean a lot to us if you are able to rate the course(s) you are taking...5 star reviews makes Andrei's day :)**

‎submissions/carlospianeta renamed to ‎submissions/carlospianeta.html

File renamed without changes.

‎submissions/sherawat-Lokesh.html

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>tic tac toe</title>
9+
10+
<style>
11+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
12+
13+
*{
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
color: var(--second-color);
18+
}
19+
20+
:root {
21+
--main-background: black;
22+
--second-color: white;
23+
--game-win-color: rgb(19, 149, 19);
24+
--font-1: "Poppins", sans-serif;
25+
}
26+
27+
.flex {
28+
display: flex;
29+
flex-wrap: wrap;
30+
}
31+
32+
33+
34+
.hidden {
35+
display: none;
36+
}
37+
38+
.b{
39+
outline: 3px solid var(--second-color);
40+
}
41+
body {
42+
background-color: var(--main-background);
43+
}
44+
45+
.second-main{
46+
margin: 0;
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
}
52+
53+
td{
54+
text-align: center;
55+
height: 10vw;
56+
width:10vw;
57+
font-size: 5vw;
58+
font-weight: 600;
59+
font-family: var(--font-1);
60+
}
61+
62+
63+
.score{
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
}
68+
69+
70+
.score{
71+
font-size: 2.5vw;
72+
font-family: var(--font-1);
73+
display: flex;
74+
justify-content: center;
75+
justify-items: center;
76+
77+
}
78+
79+
.score div{
80+
padding: .5vw;
81+
}
82+
83+
#overlay {
84+
position: fixed; /* Sit on top of the page content */
85+
width: 100%; /* Full width (cover the whole page) */
86+
height: 100%; /* Full height (cover the whole page) */
87+
top: 0;
88+
left: 0;
89+
right: 0;
90+
bottom: 0;
91+
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
92+
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
93+
cursor: pointer; /* Add a pointer on hover */
94+
}
95+
96+
#text {
97+
position: absolute;
98+
top: 50%;
99+
left: 50%;
100+
font-size: 50px;
101+
color: white;
102+
transform: translate(-50%, -50%);
103+
-ms-transform: translate(-50%, -50%);
104+
text-align: center;
105+
}
106+
107+
.new-game {
108+
background: var(--game-win-color);
109+
color: var(--second-color);
110+
margin: 0;
111+
border: 0;
112+
padding: 15px;
113+
font-size: 1rem;
114+
border-radius: 2px;
115+
font-weight: 500;
116+
}
117+
118+
@media screen and (max-width:500px) {
119+
td{
120+
height: 35vw;
121+
min-width: 30vw;
122+
font-size: 15vw;
123+
}
124+
.score{
125+
font-size: 7vw;
126+
margin-top: 5vw;
127+
}
128+
129+
}
130+
@media screen and (max-width:950px ) {
131+
132+
td{
133+
height: 30vw;
134+
min-width: 30vw;
135+
font-size: 15vw;
136+
}
137+
.score{
138+
font-size: 7vw;
139+
margin-top: 5vw;
140+
}
141+
142+
#text{
143+
font-size:8vw ;
144+
}
145+
.new-game{
146+
font-size: 4vw;
147+
}
148+
149+
}
150+
</style>
151+
152+
153+
</head>
154+
155+
<body>
156+
<div class="container ">
157+
<table class="second-main flex">
158+
<tr>
159+
<td class="grid b " id="0"></td>
160+
<td class="grid b " id="1"></td>
161+
<td class="grid b " id="2"></td>
162+
</tr>
163+
<tr>
164+
<td class="grid b " id="3"></td>
165+
<td class="grid b " id="4"></td>
166+
<td class="grid b " id="5"></td>
167+
</tr>
168+
<tr>
169+
<td class="grid b " id="6"></td>
170+
<td class="grid b " id="7"></td>
171+
<td class="grid b " id="8"></td>
172+
</tr>
173+
</table>
174+
175+
<div class="score ">
176+
<div class="your-score">You : 0</div>
177+
<div>|</div>
178+
<div class="draw">Draw : 0</div>
179+
<div>|</div>
180+
<div class="pc-score">Pc : 0</div>
181+
</div>
182+
</div>
183+
184+
<div id="overlay" class="hidden">
185+
<div id="text">
186+
<h3 class="what-happend">Game Over</h3>
187+
<button class="new-game">New Game</button>
188+
</div>
189+
190+
</div>
191+
</body>
192+
<script>
193+
const gridAll = document.querySelectorAll('.grid');
194+
const pc_score = document.querySelector('.pc-score');
195+
const your_score = document.querySelector('.your-score');
196+
const draw = document.querySelector('.draw');
197+
const new_game = document.querySelector('.new-game');
198+
const overlay = document.getElementById('overlay');
199+
const matchCondition = [{ id1: '0', id2: '1', id3: '2' }, { id1: '0', id2: '3', id3: '6' }, { id1: '0', id2: '4', id3: '8' }, { id1: '3', id2: '4', id3: '5' }, { id1: '1', id2: '4', id3: '7' }, { id1: '2', id2: '5', id3: '8' }, { id1: '2', id2: '4', id3: '6' }, { id1: '6', id2: '7', id3: '8' }];
200+
let rndm, result = false, pcScore = 0, yourScore = 0, Draw = 0, checkId = [];
201+
202+
function run() {
203+
gridAll.forEach(element => {
204+
element.addEventListener('click', function insert(e) {
205+
e.preventDefault();
206+
////////////////////////////////////////////////////////////////////////'
207+
if (e.target.textContent !== '') return
208+
e.target.textContent = 'O';
209+
e.target.removeEventListener('click', insert);
210+
checkId.push({ text: e.target.textContent, id: e.target.id });
211+
212+
// console.log(checkId);// logging checkID
213+
214+
match();
215+
216+
////////////////////////////////////////////////////////////////////////
217+
checkId.length < 9 ? random() : '';
218+
checkId.push({ text: 'X', id: `${rndm}` });
219+
const id = document.getElementById(`${rndm}`);
220+
id.innerHTML = 'X';
221+
// const aud2=new Audio('./sounds/player2.aiff')
222+
// aud2.play()
223+
// id.replaceWith(id.cloneNode(true));
224+
225+
////////////////////////////////////////////////////////////////////////
226+
result === false ? match() : ''
227+
pc_score.textContent = `Pc : ${pcScore}`;
228+
your_score.textContent = `You : ${yourScore}`;
229+
if (checkId.length >= 9 && result === false) {
230+
Draw += 1
231+
draw.textContent = `Draw : ${Draw}`
232+
overlay.classList.remove('hidden')
233+
setTimeout(() => {
234+
235+
overlay.classList.remove('hidden')
236+
}, 500);
237+
new_game.addEventListener('click', (e) => {
238+
newGame()
239+
})
240+
}
241+
navigator.vibrate(60);
242+
243+
})
244+
})
245+
246+
} run()
247+
248+
249+
function match() {
250+
matchCondition.forEach(val => {
251+
const id1 = document.getElementById(val.id1);
252+
const id2 = document.getElementById(val.id2);
253+
const id3 = document.getElementById(val.id3);
254+
if (id1.textContent == '' && id2.textContent == '' && id3.textContent == '') return
255+
if (id1.textContent === id2.textContent && id1.textContent === id3.textContent && id2.textContent === id3.textContent) {
256+
// console.log('you win ')
257+
// console.log(id2.textContent)
258+
259+
////////////////////////////////////////////////////////////////////////
260+
id1.textContent === 'O' ? yourScore += 1 : pcScore += 1;
261+
result = true;
262+
// gridAll.forEach(val=>{
263+
// val.replaceWith(val.cloneNode(true))
264+
// })
265+
266+
setTimeout(() => {
267+
268+
269+
overlay.classList.remove('hidden')
270+
}, 500);
271+
////////////////////////////////////////////////////////////////////////
272+
273+
new_game.addEventListener('click', (e) => {
274+
newGame()
275+
})
276+
}
277+
})
278+
}
279+
280+
function random() {
281+
if (checkId.length === 9) return;
282+
rndm = Math.floor(Math.random() * 9);
283+
checkId.sort((a, b) => a.id - b.id).map(val => {
284+
if (checkId.length < 9) {
285+
if (+val.id === rndm) {
286+
random()
287+
}
288+
}
289+
})
290+
}
291+
292+
293+
294+
function newGame() {
295+
296+
checkId.forEach(function elem(element) {
297+
const ele = document.getElementById(element.id);
298+
ele.innerHTML = '';
299+
});
300+
overlay.classList.add('hidden');
301+
checkId = [];
302+
result = false;
303+
run();
304+
}
305+
</script>
306+
307+
</html>
308+
309+
<!-- sherawat-Lokesh <-----Github username ////-->

0 commit comments

Comments
 (0)