JSDM

HTML

43
 
1
.tic-tac-toe
2
  - for (var turn = 1; turn <= 9; turn++)
3
    - for (var row = 1; row <= 3; row++)
4
      - for (var column = 1; column <= 3; column++)
5
        - var player = "1"
6
        - var positionHorizontal = ""
7
        - var positionVertical = ""
8
        - var positionDiagonal = ""
9
        
10
        if( turn % 2 == 0 )
11
          - var player = "2"
12
          
13
        if( column == 1 )
14
          - var positionHorizontal = " left first-column"
15
        else if( column == 2 )
16
          - var positionHorizontal = " middle second-column"
17
        else if( column == 3 )
18
          - var positionHorizontal = " right third-column"
19
         
20
        if( row == 1 )
21
          - var positionVertical = " top first-row"
22
        else if( row == 2 )
23
          - var positionVertical = " center second-row"
24
        else if( row == 3 )
25
          - var positionVertical = " bottom third-row"
26
        
27
        if( row == 1 && column == 1 )
28
          - var positionDiagonal = " first-diagonal"
29
        else if( row == 1 && column == 3 )
30
          - var positionDiagonal = " second-diagonal"
31
        else if( row == 2 && column == 2 )
32
          - var positionDiagonal = " first-diagonal second-diagonal"
33
        else if( row == 3 && column == 1 )
34
          - var positionDiagonal = " second-diagonal"
35
        else if( row == 3 && column == 3 )
36
          - var positionDiagonal = " first-diagonal"
37
        
38
        input(id="block" + turn + "-" + row + "-" + column type="radio" class="player-" + player + positionHorizontal + positionVertical + positionDiagonal + " turn-" + turn)
39
        label(for="block" + turn + "-" + row + "-" + column class="turn-" + turn)
40
41
  .end
42
    h3
43
    a(href="") 重新开始
!

CSS

xxxxxxxxxx
279
 
1
@charset "UTF-8";
2
/* Variables
3
-------------------------------------------------------------- */
4
/* Body and Notice styling
5
-------------------------------------------------------------- */
6
body {
7
  color: #b6b5ca;
8
  font-family: 'Arial', sans-serif;
9
  margin: 0;
10
  text-align: center;
11
}
12
13
h5 {
14
  font-weight: 400;
15
  padding: 0 20px;
16
}
17
18
/* Tic-tac-toe game
19
-------------------------------------------------------------- */
20
.tic-tac-toe {
21
  font-family: 'Open Sans', sans-serif;
22
  height: 300px;
23
  overflow: hidden;
24
  margin: 50px auto 30px auto;
25
  position: relative;
26
  width: 300px;
27
}
28
@media (min-width: 450px) {
29
  .tic-tac-toe {
30
    height: 450px;
31
    width: 450px;
32
  }
33
}
34
.tic-tac-toe input[type="radio"] {
35
  display: none;
36
}
37
.tic-tac-toe input[type="radio"]:checked + label {
38
  cursor: default;
39
  z-index: 10 !important;
40
}
41
.tic-tac-toe input[type="radio"].player-1 + label:after {
42
  content: "";
43
}
44
.tic-tac-toe input[type="radio"].player-2 + label:after {
45
  content: "";
46
}
47
.tic-tac-toe input[type="radio"].player-1:checked + label:after, .tic-tac-toe input[type="radio"].player-2:checked + label:after {
48
  opacity: 1;
49
}
50
.tic-tac-toe input[type="radio"].player-1:checked + label {
51
  background-color: #dc685a;
52
}
53
.tic-tac-toe input[type="radio"].player-2:checked + label {
54
  background-color: #ecaf4f;
55
}
56
.tic-tac-toe input[type="radio"].turn-1 + label {
57
  z-index: 1;
58
}
59
.tic-tac-toe input[type="radio"].turn-2 + label {
60
  z-index: 2;
61
}
62
.tic-tac-toe input[type="radio"].turn-3 + label {
63
  z-index: 3;
64
}
65
.tic-tac-toe input[type="radio"].turn-4 + label {
66
  z-index: 4;
67
}
68
.tic-tac-toe input[type="radio"].turn-5 + label {
69
  z-index: 5;
70
}
71
.tic-tac-toe input[type="radio"].turn-6 + label {
72
  z-index: 6;
73
}
74
.tic-tac-toe input[type="radio"].turn-7 + label {
75
  z-index: 7;
76
}
77
.tic-tac-toe input[type="radio"].turn-8 + label {
78
  z-index: 8;
79
}
80
.tic-tac-toe input[type="radio"].turn-9 + label {
81
  z-index: 9;
82
}
83
.tic-tac-toe input[type="radio"].turn-1 + label {
84
  display: block;
85
}
86
.tic-tac-toe input[type="radio"].turn-1:checked ~ .turn-2 + label {
87
  display: block;
88
}
89
.tic-tac-toe input[type="radio"].turn-2:checked ~ .turn-3 + label {
90
  display: block;
91
}
92
.tic-tac-toe input[type="radio"].turn-3:checked ~ .turn-4 + label {
93
  display: block;
94
}
95
.tic-tac-toe input[type="radio"].turn-4:checked ~ .turn-5 + label {
96
  display: block;
97
}
98
.tic-tac-toe input[type="radio"].turn-5:checked ~ .turn-6 + label {
99
  display: block;
100
}
101
.tic-tac-toe input[type="radio"].turn-6:checked ~ .turn-7 + label {
102
  display: block;
103
}
104
.tic-tac-toe input[type="radio"].turn-7:checked ~ .turn-8 + label {
105
  display: block;
106
}
107
.tic-tac-toe input[type="radio"].turn-8:checked ~ .turn-9 + label {
108
  display: block;
109
}
110
.tic-tac-toe input[type="radio"].left + label {
111
  left: 0;
112
}
113
.tic-tac-toe input[type="radio"].top + label {
114
  top: 0;
115
}
116
.tic-tac-toe input[type="radio"].middle + label {
117
  left: 100px;
118
}
119
.tic-tac-toe input[type="radio"].right + label {
120
  left: 200px;
121
}
122
.tic-tac-toe input[type="radio"].center + label {
123
  top: 100px;
124
}
125
.tic-tac-toe input[type="radio"].bottom + label {
126
  top: 200px;
127
}
128
@media (min-width: 450px) {
129
  .tic-tac-toe input[type="radio"].middle + label {
130
    left: 150px;
131
  }
132
  .tic-tac-toe input[type="radio"].right + label {
133
    left: 300px;
134
  }
135
  .tic-tac-toe input[type="radio"].center + label {
136
    top: 150px;
137
  }
138
  .tic-tac-toe input[type="radio"].bottom + label {
139
    top: 300px;
140
  }
141
}
142
.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
143
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
144
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
145
  display: block;
146
}
147
.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
148
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
149
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end > h3:before {
150
  content: "平局!";
151
}
152
.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end,
153
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end,
154
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end,
155
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end,
156
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end,
157
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end,
158
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end,
159
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end {
160
  display: block;
161
}
162
.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end h3:before,
163
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end h3:before,
164
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end h3:before,
165
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end h3:before,
166
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end h3:before,
167
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end h3:before,
168
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end h3:before,
169
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end h3:before {
170
  content: "Player 1 wins!" !important;
171
}
172
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end,
173
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end,
174
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end,
175
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end,
176
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end,
177
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end,
178
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end,
179
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end {
180
  display: block;
181
}
182
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end h3:before,
183
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
184
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end h3:before,
185
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end h3:before,
186
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end h3:before,
187
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end h3:before,
188
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end h3:before,
189
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end h3:before {
190
  content: "Player 2 wins!" !important;
191
}
192
.tic-tac-toe label {
193
  background-color: #78bec5;
194
  border-radius: 14px;
195
  cursor: pointer;
196
  color: #fff;
197
  display: none;
198
  height: 90px;
199
  margin: 5px;
200
  position: absolute;
201
  width: 90px;
202
  -moz-transition: background-color 0.3s;
203
  -o-transition: background-color 0.3s;
204
  -webkit-transition: background-color 0.3s;
205
  transition: background-color 0.3s;
206
}
207
@media (min-width: 450px) {
208
  .tic-tac-toe label {
209
    height: 140px;
210
    width: 140px;
211
  }
212
}
213
.tic-tac-toe label:hover {
214
  background-color: #3d4250;
215
}
216
.tic-tac-toe label:hover:after {
217
  opacity: .4;
218
}
219
.tic-tac-toe label:after {
220
  left: 0;
221
  font-family: "FontAwesome";
222
  font-size: 45px;
223
  margin-top: -22.5px;
224
  opacity: 0;
225
  position: absolute;
226
  text-align: center;
227
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
228
  top: 50%;
229
  width: 100%;
230
}
231
@media (min-width: 450px) {
232
  .tic-tac-toe label:after {
233
    font-size: 70px;
234
    margin-top: -35px;
235
  }
236
}
237
.tic-tac-toe .end {
238
  background: rgba(255, 255, 255, 0.8);
239
  bottom: 5px;
240
  color: #3d4250;
241
  display: none;
242
  left: 5px;
243
  padding-top: 55px;
244
  position: absolute;
245
  right: 5px;
246
  top: 5px;
247
  text-align: center;
248
  z-index: 11;
249
}
250
@media (min-width: 450px) {
251
  .tic-tac-toe .end {
252
    padding-top: 110px;
253
  }
254
}
255
.tic-tac-toe .end h3 {
256
  font-size: 30px;
257
  font-weight: 300;
258
}
259
@media (min-width: 450px) {
260
  .tic-tac-toe .end h3 {
261
    font-size: 40px;
262
  }
263
}
264
.tic-tac-toe .end a {
265
  background-color: #3d4250;
266
  border-radius: 4px;
267
  color: #fff;
268
  padding: 14px 45px;
269
  text-decoration: none;
270
  -moz-transition: background-color 0.2s;
271
  -o-transition: background-color 0.2s;
272
  -webkit-transition: background-color 0.2s;
273
  transition: background-color 0.2s;
274
}
275
.tic-tac-toe .end a:hover {
276
  background-color: #262934;
277
  cursor: pointer;
278
}
279
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

10
 
1
// Look ma' no JS! :)
2
3
/*
4
I have seen demos of pure CSS Tic-tac-toe games, but I was unable to find a version that truly works. If I have missed it, please send me link, so I can see how another dev has created it.
5
6
My version works as any normal Tic-tac-toe game would: 2 players can play against each other, it can result in either a win or a tie. Players can also restart the game.
7
8
In my CodePen example, I used Jade and SASS, so that my code looks much cleaner and simpler to understand.
9
*/
10
// How it works: http://codepen.io/ziga-miklic/blog/pure-css-tic-tac-toe/
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................