-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path五子棋人机版本.html
300 lines (258 loc) · 7.18 KB
/
五子棋人机版本.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta charset="utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
canvas{
display:block;
margin:50px auto;
box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
}
</style>
<script src="../scripts/jquery2.js"></script>
</head>
<body>
<canvas id="board" width="450px" height="450px" ></canvas>
<script>
var board=document.getElementById("board");
var context=board.getContext('2d');
context.strokeStyle="#bfbfbf";
//0.AI篇的内容
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++){
//下方的这个意思是 所有横线的赢法
//wins[0][0][0]=true;
//wins[0][1][0]=true;
//wins[0][2][0]=true;
//wins[0][3][0]=true;
//wins[0][4][0]=true;
//上方即是第0种赢法所需要的内容
//wins[0][1][1]
//wins[0][2][1]
//...
//wins[0][5][1]
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++;
}
}
//定义一个结束，根据棋盘状况决定是否结束
var over=false;
//因为要计算双方的赢法，所以需要两个赢法数组
//接下来很关键的一步就是在落子的阶段将赢法数组相结合起来
var myWin=[];
var computerWin=[];
for(var i=0;i<count;i++){
myWin[i]=0;
computerWin[i]=0;
}
// 1.画棋盘
//画棋盘准备工作
var drawBoard=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+30*i);
context.lineTo(435,15+30*i);
context.stroke();
}
}
//棋盘背景图准备工作
var logo=new Image();
logo.src="image/bb.jpg";
//真正的画图（确切地说是图和棋盘）步骤
var prepare=function(){
logo.onload=function(){
context.drawImage(logo,200,100,325,450);
drawBoard();
}
}
prepare();
//2.画棋子
//棋盘所有位置准备工作
var turn=true;//黑棋为true
var all=[];//这个是关于整个棋盘中每个位置是否有棋子的判定
for(var i=0;i<15;i++){
all[i]=[];
for(var j=0;j<15;j++){
all[i][j]=0;
}
}
//画棋子的准备工作
var oneStep=function(i,j,turn){
context.beginPath();//画笔准备
context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
context.closePath();//画笔关闭
//棋子的渐变设置
var decorate=context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
if(turn){
//如果是黑棋
decorate.addColorStop(0,"#0a0a0a");
decorate.addColorStop(1,"#636766");
}else{
decorate.addColorStop(0,"#d1d1d1");
decorate.addColorStop(1,"#f9f9f9");
}
context.fillStyle=decorate;
context.fill();
}
//画子待命工作（也是画子工作，当我们鼠标敲击的瞬间开始落子)
board.onclick=function(e){
if(over){
return ;
}
if(!turn){
return;
}
var x=e.offsetX;
var y=e.offsetY;
var i=Math.floor(x/30);
var j=Math.floor(y/30);
if(all[i][j]==0){
all[i][j]=1;
oneStep(i,j,turn);
for(var k=0;k<count;k++){ //这里记得要遍历k，遍历k的意思就是该子的位置和胜利的关联
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;//这里即是说当我方落子之后，对方不可能落子了
if(myWin[k]==5){
window.alert("你赢了");
over=true;
}
}
}
//赢法数组更新完之后,进行判断
if(!over){
turn=!turn;
computerAI();
}
}
}
//AI的算法
var computerAI=function(){
var max=0;//用于保存最高分数
var u=0,v=0;//用来保存最高分数的坐标
var myScore=[];
var computerScore=[];
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(all[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]+=220000;
}
}
}
//这里是所有的分数遍历结束之后的部分
//但是棋盘遍历并没有结束，所以我们在这里进行判断
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);
all[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){
turn=!turn;
}
}
</script>
</body>
</html>