-
Notifications
You must be signed in to change notification settings - Fork 0
/
tick-tack-toe.html
367 lines (364 loc) · 17.6 KB
/
tick-tack-toe.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三子连珠棋--郑常龙</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="tick-tack-toe/tick-tack-toe.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="tick-tack-toe/tick-tack-toe.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="ctrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-5 col-sm-offset-2 col-lg-offset-3">
<div class="row center-block">
<button id="stGame" class="btn-primary col-xs-4"><i class="glyphicon glyphicon-cog"></i> 设置 </button>
<button id="snGame" class="btn-success col-xs-4"><i class="glyphicon glyphicon-volume-up"></i> 音效 </button>
<button id="tpGame" class="btn-info col-xs-4"><i class="glyphicon glyphicon-bullhorn"></i> 攻略 </button>
</div>
<div class="row center-block">
<button id="bkGame" class="btn-warning col-xs-6"><i class="glyphicon glyphicon-repeat"></i> 悔棋 </button>
<button id="reGame" class="btn-danger col-xs-6"><i class="glyphicon glyphicon-refresh"></i> 重玩 </button>
</div>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）游戏首次开始或点击攻略时弹出此窗口，对游戏作简单介绍" -->
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="tipModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="tipModal-Label">
游戏攻略
</h4>
</div>
<div class="modal-body">
“三子棋”，又叫“九宫棋”，棋盘共9个位置, “我方”与“电脑”依次落子，任一方先实现“三子连珠”即为获胜！
<br>
<br>三字连珠有效位置:
<br>横排123 456 789, 纵列147 258 369，斜线159 357
<br>
<br>预设“我方白棋”,“我方先走”,"音效开",可在“设置”中更改
</div>
<div class="modal-footer">
<button id="tip-set" type="button" class="btn btn-primary col-xs-12">
打开设置看看 ~
</button>
<button id="tip-yes" type="button" class="btn btn-success col-xs-6">
理解，开始玩吧
</button>
<button id="tip-more" type="button" class="btn btn-danger col-xs-5">
不是很明白 :(
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）设置我方及电脑棋子颜色 -->
<div class="modal fade" id="chsClrModal" tabindex="-1" role="dialog" aria-labelledby="chsClrModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="chsClrModal-Label">
设置-选棋
</h4>
</div>
<div class="modal-body">
请选择你方棋子颜色 ?
</div>
<div class="modal-footer">
<button id="chsWht" type="button" class="btn btn-success">
我方白棋
</button>
<button id="chsBlk" type="button" class="btn btn-danger">
我方黑棋
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）设置我方及电脑棋手谁先走第一步 -->
<div class="modal fade" id="chsFstModal" tabindex="-1" role="dialog" aria-labelledby="chsFstModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="chsFstModal-Label">
设置-谁先走棋
</h4>
</div>
<div class="modal-body">
一般而言, 先走棋的一方获胜几率更大;
<br>如果你对自己有信心, 可以挑战一下, 让电脑先走;
<br>不用担心, 此项设置是随时可以更改的哦 :)
</div>
<div class="modal-footer">
<button id="meFst" type="button" class="btn btn-success">
我先走棋
</button>
<button id="pcFst" type="button" class="btn btn-danger">
电脑先走棋
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）设置音效开关 -->
<div class="modal fade" id="sndStModal" tabindex="-1" role="dialog" aria-labelledby="sndStModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="sndStModal-Label">
设置-音效开关
</h4>
</div>
<div class="modal-body">
请选择是否需要开启游戏音效 ?
</div>
<div class="modal-footer">
<button id="sndSt-yes" type="button" class="btn btn-success">
开启音效，更带感~
</button>
<button id="sndSt-no" type="button" class="btn btn-danger">
嘘！上班偷着玩儿的，静音→_→
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）提示"你赢了, 再来一盘?" -->
<div class="modal fade" id="myWinModal" tabindex="-1" role="dialog" aria-labelledby="myWinModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="myWinModal-Label">
本轮战况
</h4>
</div>
<div class="modal-body">
恭喜, 你赢了 ! 再来一盘 ?
</div>
<div class="modal-footer">
<button id="myWin-upGame" type="button" class="btn btn-primary col-xs-12 noDisplay">
挑战,让电脑先走!
</button>
<button id="myWin-reGame" type="button" class="btn btn-success col-xs-6">
好,再续辉煌!
</button>
<button id="myWin-ndGame" type="button" class="btn btn-danger col-xs-5">
不玩了,太简单!
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）提示"你输了, 再来一盘?" -->
<div class="modal fade" id="pcWinModal" tabindex="-1" role="dialog" aria-labelledby="pcWinModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="pcWinModal-Label">
本轮战况
</h4>
</div>
<div class="modal-body">
很遗憾, 你输了 ! 再来一盘 ?
</div>
<div class="modal-footer">
<button id="pcWin-reGame" type="button" class="btn btn-primary col-xs-12">
重玩,继续挑战:)
</button>
<button id="pcWin-bkGame" type="button" class="btn btn-success col-xs-5">
疏忽,我要悔棋!
</button>
<button id="pcWin-dnGame" type="button" class="btn btn-success noDisplay col-xs-5">
不服,我先走棋!
</button>
<button id="pcWin-ndGame" type="button" class="btn btn-danger col-xs-6">
不玩了,太伤人:(
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）按了悔棋键但棋盘上已无我方棋子时弹窗提示 -->
<div class="modal fade" id="noBkModal" tabindex="-1" role="dialog" aria-labelledby="noBkModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="noBkModal-Label">
悔棋无效提示
</h4>
</div>
<div class="modal-body">
当前棋盘上已经没有我方棋子了, 无需悔棋~
</div>
<div class="modal-footer">
<button id="noBk-ct" type="button" class="btn btn-primary">
额看错, 接着玩 ~
</button>
<button id="noBk-re" type="button" class="btn btn-danger">
重玩游戏 !
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）提示"和棋了, 再来一盘?" -->
<div class="modal fade" id="tieModal" tabindex="-1" role="dialog" aria-labelledby="tieModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="tieModal-Label">
本轮战况
</h4>
</div>
<div class="modal-body">
哎哟不错哦, 和棋平局! 再来一盘 ?
</div>
<div class="modal-footer">
<button id="tie-reGame" type="button" class="btn btn-success">
继续, 决战到天亮 zzZZ
</button>
<button id="tie-ndGame" type="button" class="btn btn-danger">
不玩儿了, 暴露智商啦 → →
</button>
</div>
</div>
</div>
</div>
<!-- BootStrap模态框（Modal）落子位置已经有其他棋子时提示"此坑已被占, 不能在此处落子哦~" -->
<div class="modal fade" id="invldModal" tabindex="-1" role="dialog" aria-labelledby="invldModal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="invldModal-Label">
落子位置无效提示
</h4>
</div>
<div class="modal-body">
抱歉, 此坑已被占, 不能在此处落子哦~
</div>
<div class="modal-footer">
<button id="invld-ct" type="button" class="btn btn-primary col-xs-12">
额看错, 接着玩 ~
</button>
<button id="invld-bk" type="button" class="btn btn-success col-xs-6">
我要悔棋 ←
</button>
<button id="invld-re" type="button" class="btn btn-danger col-xs-5">
重玩游戏 !
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-5 col-sm-offset-2 col-lg-offset-3">
<div class="row center-block">
<table class="table bg col-xs-12">
<tr>
<td class="col-xs-4">
<button id="btn1">1</button>
</td>
<td class="col-xs-4">
<button id="btn2">2</button>
</td>
<td class="col-xs-4">
<button id="btn3">3</button>
</td>
</tr>
<tr>
<td>
<button id="btn4">4</button>
</td>
<td>
<button id="btn5">5</button>
</td>
<td>
<button id="btn6">6</button>
</td>
</tr>
<tr>
<td>
<button id="btn7">7</button>
</td>
<td>
<button id="btn8">8</button>
</td>
<td>
<button id="btn9">9</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="records col-lg-5 col-lg-offset-3">
<div class="crtRecords">
当前设定: <span class="numRecords" id="fstOpt">我方</span>先走 我方
<button id="mySide" class="wht sml"></button><span class="numRecords" id="myChesLeft">5</span> 电脑
<button id="pcSide" class="blk sml"></button><span class="numRecords" id="pcChesLeft">5</span>
</div>
<div class="hstRecords">
历史战绩: 总计<span class="numRecords" id="totalTimes">0</span> 胜<span class="numRecords" id="myWinTimes">0</span> 负<span class="numRecords" id="myLoseTimes">0</span> 平<span class="numRecords" id="myTieTimes">0</span>
</div>
<p class="footer">
<a target="_blank" href="https://github.com/mike652638/tick-tack-toe">欢迎访问"我的GitHub"查看本游戏源代码</a>
</p>
</div>
</div>
</div>
<div class="soundEfct">
<audio id="myChsSnd" controls>
<source src="tick-tack-toe/snd/myChsSnd.mp3" type="audio/mpeg">
</audio>
<audio id="pcChsSnd" controls>
<source src="tick-tack-toe/snd/pcChsSnd.mp3" type="audio/mpeg">
</audio>
<audio id="winSnd" controls>
<source src="tick-tack-toe/snd/winSnd.mp3" type="audio/mpeg">
</audio>
<audio id="loseSnd" controls>
<source src="tick-tack-toe/snd/loseSnd.mp3" type="audio/mpeg">
</audio>
<audio id="tieSnd" controls>
<source src="tick-tack-toe/snd/tieSnd.mp3" type="audio/mpeg">
</audio>
<audio id="warnSnd" controls>
<source src="tick-tack-toe/snd/warnSnd.mp3" type="audio/mpeg">
</audio>
</div>
</body>
</html>