本文实例讲述了JS+canvas实现的五子棋游戏。分享给大家供大家参考，具体如下：
运行效果图：
html代码如下：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" /> </head> <body> <canvas id="chess" width="450px" height="450px"></canvas> <div id='restart' class="restart"> <span>重新开始</span> </div> <script src="js/script.js" type="text/javascript" charset="utf-8"></script> </body> </html>
style.css代码如下：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; } .restart{ text-align: center; } .restart>span{ display: inline-block; padding: 10px 20px; color: #fff; background-color: #45c01a; border-radius: 5px; }
script.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
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
209var over = false; var me = true; //我 var chressBord = [];//棋盘 for(var i = 0; i < 15; i++){ chressBord[i] = []; for(var j = 0; j < 15; j++){ chressBord[i][j] = 0; } } //赢法的统计数组 var myWin = []; var computerWin = []; //赢法数组 var wins = []; for(var i = 0; i < 15; i++){ wins[i] = []; for(var j = 0; j < 15; j++){ wins[i][j] = []; } } var count = 0; //赢法总数 //横线赢法 for(var i = 0; i < 15; i++){ for(var j = 0; j < 11; j++){ for(var k = 0; k < 5; k++){ wins[i][j+k][count] = true; } count++; } } //竖线赢法 for(var i = 0; i < 15; i++){ for(var j = 0; j < 11; j++){ for(var k = 0; k < 5; k++){ wins[j+k][i][count] = true; } count++; } } //正斜线赢法 for(var i = 0; i < 11; i++){ for(var j = 0; j < 11; j++){ for(var k = 0; k < 5; k++){ wins[i+k][j+k][count] = true; } count++; } } //反斜线赢法 for(var i = 0; i < 11; i++){ for(var j = 14; j > 3; j--){ for(var k = 0; k < 5; k++){ wins[i+k][j-k][count] = true; } count++; } } for(var i = 0; i < count; i++){ myWin[i] = 0; computerWin[i] = 0; } var chess = document.getElementById("chess"); var context = chess.getContext('2d'); context.strokeStyle = '#bfbfbf'; //边框颜色 var logo = new Image(); logo.src = 'img/logo.png'; logo.onload = function(){ context.drawImage(logo,0,0,450,450); drawChessBoard(); } document.getElementById("restart").onclick = function(){ window.location.reload(); } chess.onclick = function(e){ if(over){ return; } if(!me){ return; } var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / 30); var j = Math.floor(y / 30); if(chressBord[i][j] == 0){ oneStep(i,j,me); chressBord[i][j] = 1;//我 for(var k = 0; k < count; k++){ if(wins[i][j][k]){ myWin[k]++; computerWin[k] = 6;//这个位置对方不可能赢了 if(myWin[k] == 5){ window.alert('你赢了'); over = true; } } } if(!over){ me = !me; computerAI(); } } } //计算机下棋 var computerAI = function (){ var myScore = []; var computerScore = []; var max = 0; var u = 0, v = 0; for(var i = 0; i < 15; i++){ myScore[i] = []; computerScore[i] = []; for(var j = 0; j < 15; j++){ myScore[i][j] = 0; computerScore[i][j] = 0; } } for(var i = 0; i < 15; i++){ for(var j = 0; j < 15; j++){ if(chressBord[i][j] == 0){ for(var k = 0; k < count; k++){ if(wins[i][j][k]){ if(myWin[k] == 1){ myScore[i][j] += 200; }else if(myWin[k] == 2){ myScore[i][j] += 400; }else if(myWin[k] == 3){ myScore[i][j] += 2000; }else if(myWin[k] == 4){ myScore[i][j] += 10000; } if(computerWin[k] == 1){ computerScore[i][j] += 220; }else if(computerWin[k] == 2){ computerScore[i][j] += 420; }else if(computerWin[k] == 3){ computerScore[i][j] += 2100; }else if(computerWin[k] == 4){ computerScore[i][j] += 20000; } } } if(myScore[i][j] > max){ max = myScore[i][j]; u = i; v = j; }else if(myScore[i][j] == max){ if(computerScore[i][j] > computerScore[u][v]){ u = i; v = j; } } if(computerScore[i][j] > max){ max = computerScore[i][j]; u = i; v = j; }else if(computerScore[i][j] == max){ if(myScore[i][j] > myScore[u][v]){ u = i; v = j; } } } } } oneStep(u,v,false); chressBord[u][v] = 2; for(var k = 0; k < count; k++){ if(wins[u][v][k]){ computerWin[k]++; myWin[k] = 6;//这个位置对方不可能赢了 if(computerWin[k] == 5){ window.alert('计算机赢了'); over = true; } } } if(!over){ me = !me; } } //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i * 30 , 15); context.lineTo(15 + i * 30 , 435); context.stroke(); context.moveTo(15 , 15 + i * 30); context.lineTo(435 , 15 + i * 30); context.stroke(); } } //画旗子 var oneStep = function(i,j,me){ context.beginPath(); context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//画圆 context.closePath(); //渐变 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); if(me){ gradient.addColorStop(0,'#0a0a0a'); gradient.addColorStop(1,'#636766'); }else{ gradient.addColorStop(0,'#d1d1d1'); gradient.addColorStop(1,'#f9f9f9'); } context.fillStyle = gradient; context.fill(); }
PS：这里再为大家推荐另一款本站的js版五子棋游戏供大家参考（其AI相对简单一些）
在线五子棋游戏：
http://tools.uoften.com/games/wuziqi
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
最后
以上就是兴奋小蝴蝶最近收集整理的关于JS+canvas实现的五子棋游戏【人机大战版】的全部内容，更多相关JS+canvas实现内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[JS]点出统计器](/uploads/reation/bcimg11.png)
发表评论 取消回复