html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tic Tac Toe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
</head>
<body>
<div id="root">
<header>Tic Tac Toe</header>
<div id="base">
<div id="undo">
<button onclick="ttt.clear()">Clear</button>
</div>
<div id="board">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
Enter to Rename, Shift+Enter to Preview
css
css
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
html,
body {
margin: 0;
height: 100vh;
width: 100vw;
font-family: 'Muli', sans-serif;
user-select: none;
}
body {
display: grid;
grid-template: auto 512px auto / auto 360px auto;
}
#root {
grid-column-start: 2;
grid-row-start: 2;
display: grid;
grid-template-rows: repeat(3, 3.3fr) 1.1fr;
border: 1px solid;
}
header {
font-size: 36px;
display: grid;
align-content: center;
justify-content: center;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
alert("X for first player and O for second player")
var
winWhen = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 4, 6],
[2, 5, 8],
[3, 4, 5],
[6, 7, 8]
],
ttt = {
scoreA: 0,
scoreB: 0,
playerA: 'Player A',
playerB: 'Player B',
state: [-1, -1, -1, -1, -1, -1, -1, -1, -1],
now: 'X',
pA: '',
pB: '',
sA: '',
sB: '',
enabled: true
},
btn;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run