-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (131 loc) · 13.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Tic Tac Toe by rtCoder</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta property="og:title" content="Tic Tac Toe by rtCoder">
<meta property="og:description" content="Tic Tac Toe with AI by rtCoder">
<meta property="og:image" content="http://tictactoe.cms-pixel.com/img/thumbnail.png">
<meta property="og:url" content="http://tictactoe.cms-pixel.com/img/thumbnail.png">
<meta name="twitter:card" content="http://tictactoe.cms-pixel.com/img/thumbnail.png">
<meta property="og:site_name" content="Tic Tac Toe by rtCoder">
<meta name="twitter:image:alt" content="Tic Tac Toe by rtCoder">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#e6e6e6">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#e6e6e6">
</head>
<body>
<div class="settings">
<div class="field starting">
<span>Starting Player</span>
<div>
<label for="radio-1" title="You">
<input type="radio" id="radio-1" name="starting" checked value="1">
<svg
xmlns="http://www.w3.org/2000/svg"
id="body_1"
width="32"
height="32">
<g transform="matrix(0.0625 0 0 0.0625 0 0)">
<path transform="matrix(1.066527 0 0 1.066527 0 0)"
d="M402.032 424.806L402.032 472.063C 402.032 476.481 398.45 480.063 394.032 480.063C 389.614 480.063 386.032 476.481 386.032 472.063L386.032 472.063L386.032 424.806C 386.032 388.011 356.257 358.234 319.459 358.235C 302.048 358.235 286.251 349.365 277.2 334.507C 274.902 330.734 276.097 325.811 279.871 323.513C 283.644 321.214 288.566 322.41 290.865 326.184C 296.987 336.235 307.676 342.235 319.459 342.235C 365.096 342.233 402.032 379.165 402.032 424.806zM262.426 344.613C 263.367 348.93 260.63 353.192 256.313 354.133C 235.259 358.72 213.846 354.128 196.797 342.491C 179.919 360.578 157.621 358.235 160.606 358.235C 123.811 358.234 94.03302 388.008 94.03302 424.806L94.03302 424.806L94.03302 472.063C 94.03302 476.481 90.45102 480.063 86.03302 480.063C 81.61502 480.063 78.03302 476.481 78.03302 472.063L78.03302 472.063L78.03302 424.806C 78.03302 379.17 114.962 342.235 160.604 342.235C 179.066 342.235 194.033 327.36 194.033 308.893L194.033 308.893L194.033 306.786C 159.114 290.089 134.604 255.002 133.11 214.143C 118.74 210.688 108.033 197.826 108.033 182.523L108.033 182.523L108.033 141.05C 107.596 120.75 110.61 69.90699 147.681 34.17299C 193.456 -9.953011 266.864 -7.150013 320.842 18.83499C 326.103 21.36999 326.902 28.47799 322.533 32.15899C 349.878 38.82899 373.458 55.63899 388.607 79.69699C 389.389 80.93599 390.821 82.88099 390.447 85.98399C 390.215 87.91499 389.64 89.549 388.152 91.05899C 378.402 100.947 373.033 114.05 373.033 127.955L373.033 127.955L373.033 182.525C 373.033 186.943 369.451 190.525 365.033 190.525C 360.615 190.525 357.033 186.943 357.033 182.525L357.033 182.525L357.033 127.955C 357.033 111.918 362.512 96.69599 372.575 84.46799C 357.237 62.53199 333.307 48.424 306.243 45.52599L306.243 45.52599L292.182 44.01999C 283.96 43.13999 282.347 31.81299 289.988 28.66799L289.988 28.66799L296.383 26.03499C 213.097 -3.000008 124.032 29.26099 124.032 140.963L124.032 140.963L124.032 182.523C 124.032 188.871 127.688 194.388 133.032 197.159L133.032 197.159L133.032 145.296C 133.032 114.418 158.154 89.29599 189.032 89.29599L189.032 89.29599L291.032 89.29599C 321.91 89.29599 347.032 114.416 347.032 145.293L347.032 145.293L347.032 210.796C 347.032 280.37 279.044 333.216 209.862 312.849C 209.412 318.557 207.991 324.065 205.676 329.185C 219.134 338.427 236.129 342.155 252.906 338.499C 257.223 337.559 261.485 340.296 262.426 344.613zM240.032 301.188C 290.21 301.188 331.032 260.366 331.032 210.188L331.032 210.188L331.032 145.293C 331.032 123.239 313.088 105.296 291.032 105.296L291.032 105.296L189.032 105.296C 166.976 105.296 149.032 123.24 149.032 145.296L149.032 145.296L149.032 210.188C 149.032 260.366 189.854 301.188 240.032 301.188zM321.032 439.063L297.032 439.063C 292.614 439.063 289.032 442.645 289.032 447.063C 289.032 451.481 292.614 455.063 297.032 455.063L297.032 455.063L321.032 455.063C 325.45 455.063 329.032 451.481 329.032 447.063C 329.032 442.645 325.45 439.063 321.032 439.063z"
stroke="none"/>
</g>
</svg>
</label>
<label for="radio-2" title="Computer">
<input type="radio" id="radio-2" name="starting" value="0">
<svg
xmlns="http://www.w3.org/2000/svg"
id="body_1"
width="32"
height="32">
<g transform="matrix(0.05507746 0 0 0.05507746 0 0)">
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M297.8242 112L137.8242 112C 123.4688 112.0156 111.8398 123.6484 111.8242 138L111.8242 138L111.8242 298C 111.8398 312.3516 123.4688 323.9844 137.8242 324L137.8242 324L297.8242 324C 312.1758 323.9844 323.8086 312.3516 323.8242 298L323.8242 298L323.8242 138C 323.8086 123.6484 312.1758 112.0156 297.8242 112zM311.8242 298C 311.8125 305.7266 305.5508 311.9922 297.8242 312L297.8242 312L137.8242 312C 130.0938 311.9922 123.832 305.7266 123.8242 298L123.8242 298L123.8242 138C 123.832 130.2695 130.0938 124.0078 137.8242 124L137.8242 124L297.8242 124C 305.5508 124.0078 311.8164 130.2695 311.8242 138z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M317.8242 82L117.8242 82C 97.94922 82.02344 81.84375 98.125 81.82422 118L81.82422 118L81.82422 318C 81.84375 337.8711 97.94922 353.9766 117.8242 354L117.8242 354L317.8242 354C 337.6953 353.9766 353.8008 337.8711 353.8242 318L353.8242 318L353.8242 118C 353.8008 98.125 337.6953 82.02344 317.8242 82zM341.8242 318C 341.8086 331.25 331.0703 341.9844 317.8242 342L317.8242 342L117.8242 342C 104.5742 341.9844 93.83984 331.25 93.82422 318L93.82422 318L93.82422 118C 93.83594 104.75 104.5742 94.01563 117.8242 94L117.8242 94L317.8242 94C 331.0703 94.01563 341.8086 104.75 341.8242 118z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M239.4414 373.6445C 236.125 373.6445 233.4414 376.332 233.4414 379.6445L233.4414 379.6445L233.4414 429.6445C 233.4414 432.9609 236.125 435.6445 239.4414 435.6445C 242.7539 435.6445 245.4414 432.9609 245.4414 429.6445L245.4414 429.6445L245.4414 379.6445C 245.4414 376.332 242.7539 373.6445 239.4414 373.6445z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M196.207 373.6445C 192.8906 373.6445 190.207 376.332 190.207 379.6445L190.207 379.6445L190.207 429.6445C 190.207 432.9609 192.8906 435.6445 196.207 435.6445C 199.5195 435.6445 202.207 432.9609 202.207 429.6445L202.207 429.6445L202.207 379.6445C 202.207 376.332 199.5195 373.6445 196.207 373.6445z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M152.9727 373.6445C 149.6602 373.6445 146.9727 376.332 146.9727 379.6445L146.9727 379.6445L146.9727 429.6445C 146.9727 432.9609 149.6602 435.6445 152.9727 435.6445C 156.2852 435.6445 158.9727 432.9609 158.9727 429.6445L158.9727 429.6445L158.9727 379.6445C 158.9727 376.332 156.2852 373.6445 152.9727 373.6445z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M282.6758 373.6445C 279.3594 373.6445 276.6758 376.332 276.6758 379.6445L276.6758 379.6445L276.6758 429.6445C 276.6758 432.9609 279.3594 435.6445 282.6758 435.6445C 285.9883 435.6445 288.6758 432.9609 288.6758 429.6445L288.6758 429.6445L288.6758 379.6445C 288.6758 376.332 285.9883 373.6445 282.6758 373.6445z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M202.207 56L202.207 6C 202.207 2.6875 199.5195 0 196.207 0C 192.8906 0 190.207 2.6875 190.207 6L190.207 6L190.207 56C 190.207 59.3125 192.8906 62 196.207 62C 199.5195 62 202.207 59.3125 202.207 56z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M245.4414 56L245.4414 6C 245.4414 2.6875 242.7539 0 239.4414 0C 236.125 0 233.4414 2.6875 233.4414 6L233.4414 6L233.4414 56C 233.4414 59.3125 236.125 62 239.4414 62C 242.7539 62 245.4414 59.3125 245.4414 56z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M288.6758 56L288.6758 6C 288.6758 2.6875 285.9883 0 282.6758 0C 279.3594 0 276.6758 2.6875 276.6758 6L276.6758 6L276.6758 56C 276.6758 59.3125 279.3594 62 282.6758 62C 285.9883 62 288.6758 59.3125 288.6758 56z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M158.9727 56L158.9727 6C 158.9727 2.6875 156.2852 0 152.9727 0C 149.6602 0 146.9727 2.6875 146.9727 6L146.9727 6L146.9727 56C 146.9727 59.3125 149.6602 62 152.9727 62C 156.2852 62 158.9727 59.3125 158.9727 56z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M429.6445 190.207L379.6445 190.207C 376.332 190.207 373.6445 192.8906 373.6445 196.207C 373.6445 199.5195 376.332 202.207 379.6445 202.207L379.6445 202.207L429.6445 202.207C 432.9609 202.207 435.6445 199.5195 435.6445 196.207C 435.6445 192.8906 432.9609 190.207 429.6445 190.207z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M429.6445 233.4414L379.6445 233.4414C 376.332 233.4414 373.6445 236.125 373.6445 239.4414C 373.6445 242.7539 376.332 245.4414 379.6445 245.4414L379.6445 245.4414L429.6445 245.4414C 432.9609 245.4414 435.6445 242.7539 435.6445 239.4414C 435.6445 236.125 432.9609 233.4414 429.6445 233.4414z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M429.6445 276.6758L379.6445 276.6758C 376.332 276.6758 373.6445 279.3594 373.6445 282.6758C 373.6445 285.9883 376.332 288.6758 379.6445 288.6758L379.6445 288.6758L429.6445 288.6758C 432.9609 288.6758 435.6445 285.9883 435.6445 282.6758C 435.6445 279.3594 432.9609 276.6758 429.6445 276.6758z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M429.6445 146.9727L379.6445 146.9727C 376.332 146.9727 373.6445 149.6602 373.6445 152.9727C 373.6445 156.2852 376.332 158.9727 379.6445 158.9727L379.6445 158.9727L429.6445 158.9727C 432.9609 158.9727 435.6445 156.2852 435.6445 152.9727C 435.6445 149.6602 432.9609 146.9727 429.6445 146.9727z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M56 233.4414L6 233.4414C 2.6875 233.4414 0 236.125 0 239.4414C 0 242.7539 2.6875 245.4414 6 245.4414L6 245.4414L56 245.4414C 59.3125 245.4414 62 242.7539 62 239.4414C 62 236.125 59.3125 233.4414 56 233.4414z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M56 190.207L6 190.207C 2.6875 190.207 0 192.8906 0 196.207C 0 199.5195 2.6875 202.207 6 202.207L6 202.207L56 202.207C 59.3125 202.207 62 199.5195 62 196.207C 62 192.8906 59.3125 190.207 56 190.207z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M56 146.9727L6 146.9727C 2.6875 146.9727 0 149.6602 0 152.9727C 0 156.2852 2.6875 158.9727 6 158.9727L6 158.9727L56 158.9727C 59.3125 158.9727 62 156.2852 62 152.9727C 62 149.6602 59.3125 146.9727 56 146.9727z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M56 276.6758L6 276.6758C 2.6875 276.6758 0 279.3594 0 282.6758C 0 285.9883 2.6875 288.6758 6 288.6758L6 288.6758L56 288.6758C 59.3125 288.6758 62 285.9883 62 282.6758C 62 279.3594 59.3125 276.6758 56 276.6758z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M212.2148 175.2813C 211.332 172.6406 208.0352 171.3203 204.7344 171.3203C 201.4336 171.3203 198.2422 172.6406 197.3633 175.2813L197.3633 175.2813L175.4727 246.5586C 175.3828 246.8828 175.3477 247.2188 175.3633 247.5508C 175.3633 250.4102 179.4336 252.3906 182.625 252.3906C 184.6055 252.3906 186.1445 251.7305 186.6953 249.9688L186.6953 249.9688L191.2031 234.3516L218.375 234.3516L222.8828 249.9688C 223.4336 251.7305 224.9727 252.3906 226.8438 252.3906C 230.1445 252.3906 234.2148 250.3008 234.2148 247.5508C 234.1953 247.2109 234.1211 246.875 233.9922 246.5586L233.9922 246.5586L212.2148 175.2813zM193.7344 225L204.7344 187.2695L215.7344 225z"
stroke="none"/>
<path transform="matrix(1.333652 0 0 1.333652 0 0)"
d="M248.7344 171.9805C 245.875 171.9805 242.9023 173.0781 242.9023 175.7188L242.9023 175.7188L242.9023 248.5391C 242.9023 251.0703 245.875 252.3906 248.7344 252.3906C 251.7031 252.3906 254.5625 251.0703 254.5625 248.5391L254.5625 248.5391L254.5625 175.7227C 254.5625 173.0781 251.7031 171.9805 248.7344 171.9805z"
stroke="none"/>
</g>
</svg>
</label>
</div>
</div>
<div id="newGame">New Game</div>
<div class="field depth">
<label for="depth">Difficulty
<select id="depth">
<option selected="selected" value="2">Easy</option>
<option value="4">Medium</option>
<option value="-1">Hard</option>
</select>
</label>
</div>
</div>
<div class="container">
<div id="board"></div>
</div>
<script type="module" src="js/script.js"></script>
</body>
</html>