-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
372 lines (351 loc) · 17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Tic Tac Toe</title>
</head>
<body>
<div id="xo-game">
<div id="lines">
<div id="automatic-click"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="win-horizontal-lines">
<hr id="win-line1" />
<hr id="win-line2" />
<hr id="win-line3" />
</div>
<div id="win-vertical-lines">
<hr id="win-line4" />
<hr id="win-line5" />
<hr id="win-line6" />
</div>
<div id="win-diagonal-lines">
<hr id="win-line7" />
<hr id="win-line8" />
</div>
</div>
<div id="choose-xo">
<div id="choose-xo-div">
<p>Do you want to be <span>X</span> or <span>O</span> ?</p>
<div id="xo-btns">
<div id="x-btn">X</div>
<div id="o-btn">O</div>
</div>
</div>
</div>
<div id="disable-click"></div>
<div id="end-screen">
<p id="win-txt"></p>
<div id="end-game-btns">
<a
href="https://github.com/Ali-Sdg90/tic-tac-toe"
target="_blank"
title="Github"
id="endGame-github-btn"
>⭐</a
>
<a href="#" id="endGame-reload-page-btn" title="Play again"
>↺</a
>
<a
href="https://jsfiddle.net/Ali_Sdg90/r7Ltmk64/8/"
target="_blank"
title="Jsfiddle"
id="jsfiddle-github-btn"
></></a
>
</div>
</div>
<abbr title="Setting">
<svg
id="setting-btn"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
>
<path
d="M 22.199219 2 A 1.0001 1.0001 0 0 0 21.214844 2.8339844 L 20.205078 8.796875 C 19.01608 9.1476749 17.903339 9.6072866 16.835938 10.173828 L 11.875 6.6816406 A 1.0001 1.0001 0 0 0 10.59375 6.7929688 L 6.6933594 10.693359 A 1.0001 1.0001 0 0 0 6.5820312 11.974609 L 10.076172 16.939453 C 9.5032306 17.983292 9.0447681 19.109183 8.6992188 20.298828 L 2.8457031 21.212891 A 1.0001 1.0001 0 0 0 2 22.199219 L 2 27.699219 A 1.0001 1.0001 0 0 0 2.8339844 28.685547 L 8.7949219 29.693359 C 9.1451119 30.880887 9.6045402 31.990547 10.169922 33.056641 L 6.6875 37.917969 A 1.0001 1.0001 0 0 0 6.7929688 39.207031 L 10.693359 43.107422 A 1.0001 1.0001 0 0 0 11.974609 43.21875 L 16.939453 39.724609 C 17.985462 40.298683 19.114316 40.757752 20.306641 41.103516 L 21.314453 47.066406 A 1.0001 1.0001 0 0 0 22.300781 47.900391 L 27.800781 47.900391 A 1.0001 1.0001 0 0 0 28.783203 47.082031 L 29.884766 41.107422 C 31.077734 40.756262 32.193186 40.294742 33.263672 39.726562 L 38.224609 43.21875 A 1.0001 1.0001 0 0 0 39.507812 43.107422 L 43.40625 39.207031 A 1.0001 1.0001 0 0 0 43.509766 37.914062 L 39.931641 32.957031 C 40.500209 31.91951 40.957756 30.82106 41.300781 29.693359 L 47.169922 28.685547 A 1.0001 1.0001 0 0 0 48 27.699219 L 48 22.199219 A 1.0001 1.0001 0 0 0 47.166016 21.214844 L 41.199219 20.203125 C 40.855563 19.074235 40.397841 17.973827 39.828125 16.935547 L 43.318359 11.974609 A 1.0001 1.0001 0 0 0 43.207031 10.693359 L 39.306641 6.7929688 A 1.0001 1.0001 0 0 0 38.013672 6.6894531 L 33.052734 10.273438 C 32.009656 9.7017023 30.885686 9.2413677 29.697266 8.8964844 L 28.685547 2.8359375 A 1.0001 1.0001 0 0 0 27.699219 2 L 22.199219 2 z M 23.044922 4 L 26.853516 4 L 27.814453 9.7636719 A 1.0001 1.0001 0 0 0 28.556641 10.570312 C 30.07104 10.948913 31.478126 11.514935 32.675781 12.251953 A 1.0001 1.0001 0 0 0 33.785156 12.210938 L 38.494141 8.8085938 L 41.197266 11.511719 L 37.882812 16.224609 A 1.0001 1.0001 0 0 0 37.847656 17.324219 C 38.584675 18.521874 39.154586 19.937607 39.533203 21.357422 A 1.0001 1.0001 0 0 0 40.333984 22.085938 L 46 23.044922 L 46 26.857422 L 40.429688 27.814453 A 1.0001 1.0001 0 0 0 39.632812 28.542969 C 39.254196 29.962783 38.686237 31.378517 37.949219 32.576172 A 1.0001 1.0001 0 0 0 37.990234 33.685547 L 41.390625 38.394531 L 38.6875 41.097656 L 33.974609 37.78125 A 1.0001 1.0001 0 0 0 32.904297 37.732422 C 31.566632 38.496802 30.2627 39.053466 28.757812 39.429688 A 1.0001 1.0001 0 0 0 28.017578 40.21875 L 26.966797 45.900391 L 23.144531 45.900391 L 22.185547 40.232422 A 1.0001 1.0001 0 0 0 21.443359 39.429688 C 19.92896 39.051088 18.521874 38.485065 17.324219 37.748047 A 1.0001 1.0001 0 0 0 16.224609 37.78125 L 11.511719 41.097656 L 8.8066406 38.392578 L 12.113281 33.783203 A 1.0001 1.0001 0 0 0 12.167969 32.703125 C 11.403582 31.365465 10.846925 30.061529 10.470703 28.556641 A 1.0001 1.0001 0 0 0 9.6660156 27.814453 L 4 26.855469 L 4 23.056641 L 9.5546875 22.1875 A 1.0001 1.0001 0 0 0 10.371094 21.443359 C 10.749694 19.92896 11.313763 18.521874 12.050781 17.324219 A 1.0001 1.0001 0 0 0 12.017578 16.224609 L 8.7011719 11.511719 L 11.412109 8.8027344 L 16.125 12.117188 A 1.0001 1.0001 0 0 0 17.195312 12.167969 C 18.532978 11.403589 19.836909 10.846925 21.341797 10.470703 A 1.0001 1.0001 0 0 0 22.085938 9.6660156 L 23.044922 4 z M 25 17 C 20.570085 17 17 20.570085 17 25 C 17 29.429915 20.570085 33 25 33 C 29.429915 33 33 29.429915 33 25 C 33 20.570085 29.429915 17 25 17 z M 25 19 C 28.370085 19 31 21.629915 31 25 C 31 28.370085 28.370085 31 25 31 C 21.629915 31 19 28.370085 19 25 C 19 21.629915 21.629915 19 25 19 z"
/>
</svg>
</abbr>
<abbr title="Reload">
<svg
id="reload-page-btn"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<g
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M2380 4914 c-449 -43 -844 -185 -1182 -427 -310 -222 -580 -533 -743
-856 -454 -903 -291 -1986 408 -2708 228 -235 472 -405 760 -529 789 -338
1671 -230 2367 288 115 86 353 322 437 433 423 561 580 1231 447 1905 -70 357
-216 679 -447 985 -86 114 -324 349 -444 438 -430 318 -926 482 -1443 475 -69
0 -141 -3 -160 -4z m470 -230 c854 -112 1570 -749 1785 -1588 48 -188 66 -331
66 -536 0 -205 -18 -348 -66 -536 -193 -752 -786 -1346 -1538 -1539 -190 -48
-332 -66 -537 -66 -198 0 -330 16 -520 62 -756 186 -1361 785 -1555 1543 -48
189 -66 332 -66 536 0 205 18 347 66 537 153 595 558 1097 1110 1376 390 197
814 268 1255 211z"
/>
<path
d="M2391 3990 c-106 -14 -264 -54 -357 -90 -188 -75 -344 -178 -494
-329 -248 -249 -389 -561 -416 -918 l-7 -93 112 0 111 0 0 59 c0 32 7 97 15
144 89 513 489 913 1002 1002 110 19 296 19 406 0 243 -42 463 -154 640 -324
l68 -65 -153 -153 -153 -153 368 0 367 0 0 360 c0 198 -3 360 -8 360 -4 0 -65
-58 -136 -129 l-129 -130 -72 71 c-188 183 -443 315 -714 369 -113 22 -344 32
-450 19z"
/>
<path
d="M3780 2501 c0 -32 -7 -97 -15 -144 -89 -513 -489 -913 -1002 -1002
-110 -19 -296 -19 -406 0 -239 42 -460 151 -630 314 l-78 75 153 153 153 153
-368 0 -367 0 0 -360 c0 -198 3 -360 8 -360 4 0 65 58 136 129 l130 130 65
-62 c399 -376 949 -501 1461 -331 185 62 402 195 548 337 145 141 294 379 356
567 33 101 63 255 72 368 l7 92 -112 0 -111 0 0 -59z"
/>
</g>
</svg>
</abbr>
<div id="setting-menu">
<p>Setting :</p>
<div
title="Easy : every move is random Hard : CPU realy try to win!"
>
<p>difficulty :</p>
<form>
<label for="easy-difficulty">Easy</label>
<input
type="radio"
name="difficulty-input"
id="easy-difficulty"
/>
<label for="hard-difficulty">Hard</label>
<input
type="radio"
name="difficulty-input"
id="hard-difficulty"
/>
</form>
</div>
<div
title="Check : you can choose to be X or O Uncheck : you play as X by default"
>
<form>
<label for="ask-xo">Ask to be X or O</label>
<input type="checkbox" name="ask-xo" id="ask-xo" />
</form>
</div>
<div
title="Default : play with CPU Only you : Everywhere is yours With friend : 2v2 game mode Unbeatable : CPU will just block you by any means necessary!"
>
<p>Game Modes :</p>
<form>
<label for="default-mode-inp">Default</label>
<input
type="radio"
name="game-mode-input-inp"
id="default-mode-inp"
/>
<br />
<label for="only-player-mode-inp">Only you</label>
<input
type="radio"
name="game-mode-input-inp"
id="only-player-mode-inp"
/>
<br />
<label for="w-friend-mode-inp">With friend</label>
<input
type="radio"
name="game-mode-input-inp"
id="w-friend-mode-inp"
/>
<br />
<label for="Unbeatable-mode-inp">Unbeatable</label>
<input
type="radio"
name="game-mode-input-inp"
id="Unbeatable-mode-inp"
/>
</form>
</div>
<div
title="Ckeck : After each move, the color of the game changes Unckeck : there is no change in color of the game"
>
<form>
<label for="change-color-inp">Game color change</label>
<input
type="checkbox"
name="change-color-inp"
id="change-color-inp"
/>
</form>
</div>
<div
title="Run challenges : Challenges can be completed Show challenges : Show the challenges menu"
>
<form>
<label for="run-challenges-inp">Run challenges</label>
<input
type="checkbox"
name="run-challenges-inp"
id="run-challenges-inp"
/>
</form>
<form>
<label id="show-challenges-label" for="show-challenges-inp"
>Show challenges</label
>
<input
type="checkbox"
name="show-challenges-inp"
id="show-challenges-inp"
/>
</form>
</div>
<div
title="Check : important events of the game are displayed in console Uncheck : nothing is displayed in the console"
>
<form>
<label for="debug-inp"
>Show debug of opponent in console</label
>
<input type="checkbox" name="debug-inp" id="debug-inp" />
</form>
</div>
</div>
<div id="challenge-menu">
<div id="nav-challenge-div">
<div>Challenge menu</div>
<div>
<div id="minimize-challenge-btn" title="Minimize menu">
⇧
</div>
<div id="close-challenge-btn" title="Close menu">X</div>
</div>
</div>
<div id="challenges">
<div class="challenge-mode">Default :</div>
<form>
<label for="win-Default-challenge-inp">Win a game</label>
<input
type="checkbox"
name="win-Default-challenge"
id="win-Default-challenge-inp"
/>
</form>
<form>
<label for="draw-Default-challenge-inp">draw a game</label>
<input
type="checkbox"
name="draw-Default-challenge"
id="draw-Default-challenge-inp"
/>
</form>
<form>
<label for="lose-Default-challenge-inp">lose a game</label>
<input
type="checkbox"
name="lose-Default-challenge"
id="lose-Default-challenge-inp"
/>
</form>
<hr class="challenge-hr" />
<div class="challenge-mode">Only you :</div>
<form>
<label for="win-3-way-inp">Win with 3 ways</label>
<input
type="checkbox"
name="win-3-way"
id="win-3-way-inp"
/>
</form>
<hr class="challenge-hr" />
<div class="challenge-mode">With friend :</div>
<form>
<label for="big-x-challenge-inp">Make big X with X</label>
<input
type="checkbox"
name="big-x-challenge"
id="big-x-challenge-inp"
/>
</form>
<hr class="challenge-hr" />
<div class="challenge-mode">Unbeatable :</div>
<form>
<label for="draw-ai-challenge-inp">Draw to AI</label>
<input
type="checkbox"
name="draw-ai-challenge"
id="draw-ai-challenge-inp"
/>
</form>
<form>
<label for="Lose-8-ai-challenge-inp">Lose in 8 ways</label>
<input
type="checkbox"
name="Lose-8-ai-challenge"
id="Lose-8-ai-challenge-inp"
/>
</form>
<form>
<label for="have-3-x-challenge-inp"
>End game with only 3 X in
</label>
<input
type="checkbox"
name="have-3-x-challenge"
id="have-3-x-challenge-inp"
/>
</form>
<form>
<label for="have-5-x-challenge-inp"
>End game with only 5 X in</label
>
<input
type="checkbox"
name="have-5-x-challenge"
id="have-5-x-challenge-inp"
/>
</form>
<div id="complete-challenges">
<p>🏆 Congratulation 🏆</p>
<p>Thank you for playing <3</p>
<p>\ (◠‿◠) /</p>
<div>
you can press setting button twice to reset the game.
</div>
</div>
</div>
<div id="challenges-hint">
<div
id="hint-3-ways"
title="Hint : \ | ---|--- | \"
></div>
<div
id="hint-big-x"
title="Hint : \ / X / \"
></div>
<div id="hint-lose-8" title="Hint : Obviously Easy !"></div>
<div
id="hint-3-x"
title="Hint : There is no pressure to be someone you don't want to be"
></div>
</div>
</div>
<div id="black-welcome"></div>
<script src="script.js"></script>
</body>
</html>