本文实例为大家分享了JavaScript实现五子棋游戏的具体代码，供大家参考，具体内容如下
1.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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <title>五子棋</title> <style> * { margin: 0px; padding: 0px; } .box { border-spacing: 0px; border: 1px solid #3c3c3c; background-color: #e1e1e2; margin: auto; } .piece { border-spacing: 0px; border: 1px solid; } </style></head><body> <script type="text/javascript" src="./Gobang.js"></script></body></html> |
2.JavaScript部分
|
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
|
var ScreenWidth = { documentWidth: 500, containerWidth: 400, // 容器默认宽度 cellWidth: 20 // 单元格宽度}if (document.documentElement.clientWidth < 500) { ScreenWidth.documentWidth = document.documentElement.clientWidth; ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8; ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;}//常量var reg = /\d{1,2}/g;var white = []; // 放白子var black = []; // 放黑子var tempKey = false; // 判断是走黑子还是白子var notOver = true; // 判断游戏是否结束var tips = "白棋走"; // 提示走棋var count = 0;//相连的个数var bv = false; // 黑棋胜利var wv = false; // 白棋胜利 var yCanWin = [];// 同一竖元素存放的数组var xCanWin = [];// 同一横元素存放的数组var xyCanWin = [];// 同一正斜存放的数组var yxCanWin = [];// 同一反斜存放的数组// 用计时器监听是否胜利var time = setInterval(function () { if (bv) { tips = "黑棋胜利"; document.getElementsByTagName("span")[0].innerText = tips; for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = null; } clearInterval(time); } if (wv) { tips = "白棋胜利"; document.getElementsByTagName("span")[0].innerText = tips; for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = null; } clearInterval(time); }}, 100);newGame();// 开始游戏function newGame() { if (document.getElementsByTagName("table").length) { for (var i = 0; i < document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("table")[i].remove(); } } // 初始化以下内容 bgInit(); pieceInit(); spanFn(); white = []; black = []; tempKey = false; notOver = true; tips = "白棋走"; count = 0; bv = false; xCanWin = []; yCanWin = []; xyCanWin = []; yxCanWin = [];}function spanFn() { var span = document.createElement("span"); document.body.insertBefore(span, document.getElementsByTagName("script")[0]); span.innerText = tips;}// 棋盘初始化function bgInit() { var table = document.createElement("table"); table.className = "box" for (var y = 0; y < 20; y++) { var tr = document.createElement("tr"); for (var x = 0; x < 20; x++) { var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>"; tr.innerHTML += td; } table.appendChild(tr); } document.body.insertBefore(table, document.getElementsByTagName("script")[0]);}// 棋子初始化function pieceInit() { var table = document.createElement("table"); table.className = "piece" table.style = "position: absolute; top: 0; left:50%; margin-left:-" + (ScreenWidth.containerWidth + 42) / 2 + "px"; for (var y = 0; y < 20; y++) { var tr = document.createElement("tr"); for (var x = 0; x < 20; x++) { var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>"; tr.innerHTML += td; } table.appendChild(tr); } document.body.insertBefore(table, document.getElementsByTagName("script")[0]);}// 走棋for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) { document.getElementsByClassName("pieceBox")[i].onclick = function () { if (tempKey) { this.style.backgroundColor = "#000";// 黑子 tempKey = false; black.push(this.className.match(reg)); victory(black, 0);//判断黑棋胜利与否 if (notOver) { tips = tipsGo(tempKey); document.getElementsByTagName("span")[0].innerText = tips; } } else { this.style.backgroundColor = "#fff";// 白子 tempKey = true; white.push(this.className.match(reg)); victory(white, 1);//判断白棋胜利与否 if (notOver) { tips = tipsGo(tempKey); document.getElementsByTagName("span")[0].innerText = tips; } } this.onclick = null;// 点击之后取消点击事件 }}// 提示走黑还是走白function tipsGo(tempKey) { if (tempKey) { return "黑棋走"; } else { return "白棋走"; }}/** *判断各种赢的方式 *x代表很坐标，y代表纵坐标 *1.竖赢，就是x值相同，取y值排序后比较 *2.横赢，就是y值相同，取x值排序后比较 *3.正斜赢，x+y相同的值，取x或y排序后比较 *4.反斜赢，x-y相同的值，取x或y排序后比较 */function victory(target, c) { if (target.length >= 5) { // 1.竖赢yCanWin for (var i = 0; i < target.length; i++) { for (var j = 0; j < target.length; j++) { if (target[j][1] == target[i][1]) { yCanWin.push(target[j]);//把x相同的值放入数组yCanWin } } yWin(yCanWin, c); yCanWin = []; } // 2.横赢xCanWin for (var m = 0; m < target.length; m++) { for (var n = 0; n < target.length; n++) { if (target[n][0] == target[m][0]) { xCanWin.push(target[n]);//把y相同的值放入数组xCanWin } } xWin(xCanWin, c); xCanWin = []; } // 3.正斜赢xyCanWin（左下到右上） for (var a = 0; a < target.length; a++) { for (var b = 0; b < target.length; b++) { if (parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1])) { xyCanWin.push(target[b]) } } yWin(xyCanWin, c); xyCanWin = []; } // 4.反斜赢yxCanWin（左上到右下） for (var v = 0; v < target.length; v++) { for (var w = 0; w < target.length; w++) { if (parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1])) { yxCanWin.push(target[w]) } } xWin(yxCanWin, c); yxCanWin = []; } }}// 棋的竖赢条件(棋的正斜赢条件)function yWin(yCanWin, c) { // c = 0代表黑子 c = 1代表白子 var sortArray = [];//排序数组 for (var i = 0; i < yCanWin.length; i++) { sortArray.push(yCanWin[i][0]); } sortArray.sort(function (x, y) { return x - y; }); // 数组排序后，前数和后数加一相比(注意数值类型的转换) for (var j = 0; j < sortArray.length; j++) { if (sortArray[j + 1]) { if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) { count++; // 每有一个连续则加一，一次不连续就清零 if (count == 4 && c == 0) { bv = true; notOver = false;// 游戏结束 return; } else if (count == 4 && c == 1) { wv = true; notOver = false; return; } } else { count = 0; } } } count = 0;}// 棋的横赢条件(棋的反斜赢条件)function xWin(xCanWin, c) { var sortArray = []; for (var i = 0; i < xCanWin.length; i++) { sortArray.push(xCanWin[i][1]); } sortArray.sort(function (x, y) { return x - y; }); for (var j = 0; j < sortArray.length; j++) { if (sortArray[j + 1]) { if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) { count++; if (count == 4 && c == 0) { bv = true; notOver = false; return; } else if (count == 4 && c == 1) { wv = true; notOver = false; return; } } else { count = 0; } } } count = 0;} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/AN27xy/article/details/109529287
