-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (169 loc) · 6.57 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
<!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" />
<title>Tic Tac Toe - Play Online Against Unbeatable Bot & Friends</title>
<meta
name="title"
content="Tic Tac Toe - Play Online Against Unbeatable Bot & Friends"
/>
<meta
name="description"
content="Experience Tic Tac Toe like never before! Challenge an unbeatable bot or play with friends in this classic strategy game. Free, fun, and perfect for all ages. Join the challenge now!"
/>
<meta
name="keywords"
content="Tic Tac Toe, play Tic Tac Toe online, unbeatable Tic Tac Toe bot, free Tic Tac Toe game, classic strategy game, play against friends, online Tic Tac Toe, Tic Tac Toe for all ages, Tic Tac Toe challenge, fun Tic Tac Toe game"
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#151414" />
<link rel="canonical" href="https://sohez.github.io/tic-tac-toe/" />
<meta name="”robots”" content="index, follow" />
<meta
name="og_site_name"
property="og:site_name"
content="sohez.github.io/tic-tac-toe/"
/>
<meta name="apple-mobile-web-app-status-bar-style" content="#151414" />
<meta
property="og:title"
content="Tic Tac Toe - Play Online Against Unbeatable Bot & Friends"
/>
<meta property="og:url" content="https://sohez.github.io/tic-tac-toe/" />
<meta property="og:type" content="website" />
<meta
property="og:description"
content="Experience Tic Tac Toe like never before! Challenge an unbeatable bot or play with friends in this classic strategy game. Free, fun, and perfect for all ages. Join the challenge now!"
/>
<meta property="og:locale" content="en_US" />
<meta
property="og:image"
content="./assets/img/android-chrome-512x512.png"
/>
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png" />
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;900&display=swap"
rel="stylesheet"
/>
<!-- normalize CDN-->
<link
href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css "
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/style/style.css" />
</head>
<body>
<header>
<h1>Tic Tac Toe - Play Online Against Unbeatable Bot & Friends</h1>
</header>
<main>
<section id="score-bord">
<div>
<p>x: <span id="score-x">0</span></p>
<p>o: <span id="score-o">0</span></p>
<p>Draw: <span id="score-draw">0</span></p>
<p>Turn: <span id="player-turn">X</span></p>
</div>
<div>
<select name="play-with" id="play-with">
<option value="bot">Bot</option>
<option value="Friend">Friend</option>
</select>
<button>RESET</button>
</div>
</section>
<section id="game-canvas">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
<article>
<section>
<h2>What is Tic Tac Toe?</h2>
<p>
Tic Tac Toe is a simple two-player game played on a 3x3 grid. Players
take turns marking a space with their symbol (either X or O). The
objective is to be the first to get three of their symbols in a row,
either horizontally, vertically, or diagonally.
</p>
</section>
<section>
<h2>How to Play Tic Tac Toe</h2>
<ul>
<li>The game is played on a 3x3 grid.</li>
<li>
Players take turns placing their symbol (X or O) in an empty cell.
</li>
<li>The first player to align three symbols wins the game.</li>
<li>
If all cells are filled without a winner, the game ends in a draw.
</li>
</ul>
</section>
<section>
<h2>Understanding the Minimax Algorithm</h2>
<p>
The Minimax algorithm is a decision-making algorithm used in game
theory and AI. It's particularly useful in two-player games like Tic
Tac Toe. Here’s a simple breakdown:
</p>
<ul>
<li>
<strong>Objective:</strong> The algorithm aims to minimize the
possible loss while maximizing the potential gain.
</li>
<li>
<strong>Tree Structure:</strong> It evaluates all possible moves and
their outcomes, forming a tree of potential game states.
</li>
<li>
<strong>Evaluation:</strong> Each terminal state (win, lose, draw)
is assigned a score.
</li>
<li>
<strong>Backtracking:</strong> The algorithm backtracks to determine
the best move based on maximizing the score for the current player
and minimizing it for the opponent.
</li>
</ul>
<p>
This strategy ensures that the AI can play optimally against a human
opponent or another AI.
</p>
</section>
<section>
<h2>References</h2>
<ul>
<li>
<a title="https://www.neverstopbuilding.com/blog/minimax" href="https://www.neverstopbuilding.com/blog/minimax" target="_blank">https://www.neverstopbuilding.com/blog/minimax</a>
</li>
<li>
<a title="https://github.com/Cledersonbc/tic-tac-toe-minimax" href="https://github.com/Cledersonbc/tic-tac-toe-minimax" target="_blank">https://github.com/Cledersonbc/tic-tac-toe-minimax</a>
</li>
<li>
<a title="https://en.wikipedia.org/wiki/Minimax" href="https://en.wikipedia.org/wiki/Minimax" target="_blank">https://en.wikipedia.org/wiki/Minimax</a>
</li>
</ul>
</section>
</article>
<footer>
<div>
<span>Developed BY <span>Sayyed Sohel</span> using AI</span>
</div>
</footer>
</body>
<script src="./assets/script/game-script.js"></script>
</html>