var?chessBoard?=?[];
var?me?=?true;
var?over?=?false;
//贏法數組
var?wins?=?[];
//贏法統計數組
var?myWin?=?[];
var?computerWin?=?[];
for(var?i=0;?i<15;?i++)?{
chessBoard[i]?=?[];
for(var?j=0;?j<15;?j++)?{
chessBoard[i][j]?=?0;
}
}
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++;
}
}
console.log(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?=?"images/logo.png";
/*背景和棋盤*/
logo.onload?=?function()?{
context.drawImage(logo,?97,?97,?256,?256);
drawChessBoard();
}
/*繪制棋盤*/
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();
}
/*下棋*/
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(chessBoard[i][j]?==?0)?{
oneStep(i,?j,?me);
chessBoard[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(chessBoard[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);
chessBoard[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?sleep?=?function(numberMillis)?{
var?now?=?new?Date();
var?exitTime?=?now.getTime()?+?numberMillis;
while?(true)?{
now?=?new?Date();
if?(now.getTime()?>?exitTime)
? return;
}
}
2016-10-21
你肯定是在哪步寫錯了,給你提供完整的參考代碼吧!
index.html
style.css
canvas{ display:?block; margin:50px?auto; ? box-shadow:?-2px?-2px?2px?#EFEFEF,??5px?5px?5px?#B9B9B9;? }script.js
var?chess?=?document.getElementById('chess'); var?context?=?chess.getContext('2d'); var?logo?=?new?Image(); logo.src?=?'image/2.png'; //圖片加載完成 logo.onload?=?function(){ //繪制圖片 context.drawImage(?logo,?0,?0,?450,?450); //繪制棋盤 drawChessBoard(); } //設置顏色 context.strokeStyle?=?'#AAA'; //繪制棋盤的方法 var?drawChessBoard?=?function(){ for(var?i=0;?i<15;?i++?){ //叢線 context.moveTo(15?+?i*30,?15); context.lineTo(15?+?i*30,?435); //橫線 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,'#000'); gradient.addColorStop(1,'#666'); }else{ gradient.addColorStop(0,'#DDD'); gradient.addColorStop(1,'#FFF'); } //填充顏色設置 context.fillStyle?=?gradient; //執行繪制操作(填充) context.fill(); } //落子設置?默認黑旗?true?黑?false?白 var?me?=?true; //存儲棋盤交叉點坐標(二維數組) var?chessBoard?=?[]; for(var?i=0;?i<15;?i++){ //第一維?數組 chessBoard[i]?=?[]; for(var?j=0;?j<15;?j++){ //坐標上存默認值?0 chessBoard[i][j]?=?0; } } //贏法數組?三維數組 var?wins?=?[]; for(var?i=0;?i<15;?i++){ //第一維數組 wins[i]?=?[]; for(var?j=0;?j<15;?j++){ //第二維數組 wins[i][j]?=?[]; } } //贏法種類索引 var?count?=?0; //15*15?縱向贏法?165?種 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++; } } //15*15?橫向贏法?165?種 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++; } } //15*15??斜向贏法?121?種 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++; } } //15*15??反斜向贏法?121?種 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++; } } //console.dir(wins); //document.title?=?count; //人的贏法統計數組 var?myWin?=?[]; //計算機的贏法統計數組 var?computerWin?=?[]; //表示旗有沒有結束 var?over?=?false; for(var?i=0;?i<count;?i++){ myWin[i]?=?0; computerWin[i]?=?0; } chess.onclick?=?function(e){ //判斷旗是否結束 if(over){ return; } //判斷是否黑子下棋 if(!me){ return; } //事件兼容處理 var?e?=?e?||?event; var?x?=?e.offsetX; var?y?=?e.offsetY; var?i?=?Math.floor(x?/?30); var?j?=?Math.floor(y?/?30); //如果該坐標沒有落子才可以落子 if(chessBoard[i][j]==0){ oneStep(i,?j,?me); //如果落下的是黑子?在坐標存1 chessBoard[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){ computerAI(); me?=?!me; } } } //計算機下旗 var?computerAI?=?function(){ //記錄人下的旗子 var?myScore?=?[]; //記錄計算機下的旗子 var?computerScore?=?[]; //保存最高分數 var?max?=?0; //最高分數點坐標 var?maxX?=?0,maxY?=?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(chessBoard[i][j]?==?0){ //遍歷所有贏法 for(var?k=0;?k<count;?k++){ //判斷第K種贏法是否有價值 if(wins[i][j][k]){ //判斷第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]; maxX?=?i; maxY?=?j; }else?if(myScore[i][j]?==?max){ if(computerScore[i][j]?>?computerScore[maxX][maxY]){ maxX?=?i; maxY?=?j; } } //存儲最高分數 if(computerScore[i][j]?>?max){ max?=?computerScore[i][j]; maxX?=?i; maxY?=?j; }else?if(computerScore[i][j]?==?max){ if(myScore[i][j]?>?myScore[maxX][maxY]){ maxX?=?i; maxY?=?j; } } } } } //計算機子 oneStep(maxX,?maxY,?false); chessBoard[maxX][maxY]?=?2; document.title?=?'x'+maxX+'?Y'+maxY; console.dir(chessBoard[maxX][maxY]); //贏法統計 for(var?k=0;?k<count;?k++){ if(wins[maxX][maxY][k]){ //白子贏法更近一步 computerWin[k]++; //該贏法黑旗不可能再贏了 myWin[k]?=?6; // if(computerWin[k]?==?5){ window.alert("白旗贏了"); over?=?true; } } } //如果贏法統計完成旗沒有結束 if(!over){ me?=?!me; } }