-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathgame.html
125 lines (124 loc) · 5.7 KB
/
game.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
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Meta Tic-Tac-Toe</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="container">
<h1>Meta Tic-Tac-Toe</h1>
<button class="rules">Rules</button>
<div class="rulesText hide">
<p>Just like regular Tic-Tac-Toe, three in a row wins. In this case though, you have 9 different 3x3 game boards and thus 9 different places where you can win.</p>
<p>The game starts with Player X placing a marker on one of the circles on one of the game boards.</p>
<p>Each of the 9 circles on each game board corresponds to the positions of the 9 game boards oriented on the big 3x3 grid. Where a player places their marker limits where the next player can place their marker. Placing a marker on the top-left circle of a game board for example, means that on the next turn, the opposing player will have to place their marker somewhere on the top-left game board. Likewise, placing a marker in the middle circle of one of the game boards forces the next player to play on the middle game board. Be creative and think ahead when making your moves, trying to get a row of three, but also trying to block your opponent's potential wins by picking a location that benefits you.</p>
<p>Except for the first turn, in which X can play anywhere, the red game board is the active/playable one.</p>
<p>Have fun!</p>
</div>
<div class="bigGrid">
<div class="grid 1" id="grid">
<div class="1 square inactive 1">X</div>
<div class="2 square inactive 1"></div>
<div class="3 square inactive 1">O</div>
<div class="4 square inactive 1">X</div>
<div class="5 square inactive 1">X</div>
<div class="6 square inactive 1">O</div>
<div class="7 square inactive 1">O</div>
<div class="8 square inactive 1"></div>
<div class="9 square inactive 1">X</div>
</div>
<div class="grid 2" id="ii">
<div class="1 square inactive 2">X</div>
<div class="2 square inactive 2"></div>
<div class="3 square inactive 2">O</div>
<div class="4 square inactive 2">X</div>
<div class="5 square inactive 2">X</div>
<div class="6 square inactive 2">O</div>
<div class="7 square inactive 2">O</div>
<div class="8 square inactive 2"></div>
<div class="9 square inactive 2">X</div>
</div>
<div class="grid 3" id="iii">
<div class="1 square inactive 3">X</div>
<div class="2 square inactive 3"></div>
<div class="3 square inactive 3">O</div>
<div class="4 square inactive 3">X</div>
<div class="5 square inactive 3">X</div>
<div class="6 square inactive 3">O</div>
<div class="7 square inactive 3">O</div>
<div class="8 square inactive 3"></div>
<div class="9 square inactive 3">X</div>
</div>
<div class="grid 4" id="iv">
<div class="1 square inactive 4">X</div>
<div class="2 square inactive 4"></div>
<div class="3 square inactive 4">O</div>
<div class="4 square inactive 4">X</div>
<div class="5 square inactive 4">X</div>
<div class="6 square inactive 4">O</div>
<div class="7 square inactive 4">O</div>
<div class="8 square inactive 4"></div>
<div class="9 square inactive 4">X</div>
</div>
<div class="grid 5" id="v">
<div class="1 square inactive 5">X</div>
<div class="2 square inactive 5"></div>
<div class="3 square inactive 5">O</div>
<div class="4 square inactive 5">X</div>
<div class="5 square inactive 5">X</div>
<div class="6 square inactive 5">O</div>
<div class="7 square inactive 5">O</div>
<div class="8 square inactive 5"></div>
<div class="9 square inactive 5">X</div>
</div>
<div class="grid 6" id="vi">
<div class="1 square inactive 6">X</div>
<div class="2 square inactive 6"></div>
<div class="3 square inactive 6">O</div>
<div class="4 square inactive 6">X</div>
<div class="5 square inactive 6">X</div>
<div class="6 square inactive 6">O</div>
<div class="7 square inactive 6">O</div>
<div class="8 square inactive 6"></div>
<div class="9 square inactive 6">X</div>
</div>
<div class="grid 7" id="vii">
<div class="1 square inactive 7">X</div>
<div class="2 square inactive 7"></div>
<div class="3 square inactive 7">O</div>
<div class="4 square inactive 7">X</div>
<div class="5 square inactive 7">X</div>
<div class="6 square inactive 7">O</div>
<div class="7 square inactive 7">O</div>
<div class="8 square inactive 7"></div>
<div class="9 square inactive 7">X</div>
</div>
<div class="grid 8" id="viii">
<div class="1 square inactive 8">X</div>
<div class="2 square inactive 8"></div>
<div class="3 square inactive 8">O</div>
<div class="4 square inactive 8">X</div>
<div class="5 square inactive 8">X</div>
<div class="6 square inactive 8">O</div>
<div class="7 square inactive 8">O</div>
<div class="8 square inactive 8"></div>
<div class="9 square inactive 8">X</div>
</div>
<div class="grid 9" id="ix">
<div class="1 inactive square 9">X</div>
<div class="2 inactive square 9"></div>
<div class="3 inactive square 9">O</div>
<div class="4 inactive square 9">X</div>
<div class="5 inactive square 9">X</div>
<div class="6 inactive square 9">O</div>
<div class="7 inactive square 9">O</div>
<div class="8 inactive square 9"></div>
<div class="9 inactive square 9">X</div>
</div>
</div>
<p class="player"><span>X</span>'s turn to play.</p>
<button class="clear">New Game</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/metatictactoe.js"></script>
</body></html>