五子棋人機大戰原始碼教程圖解
圍棋是一種高明的邏輯遊戲,其中蘊涵深刻的哲理，那麼如何用程式碼製作五子棋呢?下面是有，歡迎參閱。
五子棋人機大戰原始碼教程步驟圖解：
新建遊戲專案檔案目錄
編寫index.html檔案原始碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>五子棋</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<input type="button" onclick="window.location.reload******;" value="在玩一次">
</body>
</html>
在css資料夾裡新建css檔案，style.css檔案原始碼如下：
canvas{
display: block;
;
margin-top: 60px;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
width: 450px; height: 450px;
}
input{float: right; display: block; : -250px;
width: 100px; height: 30px; font-size: 18px;
}
{ ; color: #fefefe;}
images資料夾裡用到的圖片如下
在js資料夾裡新建script.js檔案，原始碼如下：
window.onload=function******{
var me=true;
var over=false;
var chessBord=[];
//初始化chessBord陣列
for***var i=0; i<15;i++***{
chessBord[i]=[];
for***var j=0;j<15;j++***{
chessBord[i][j]=0;
}
}
//var me=[true];
//贏法陣列
var wins=[];
var computerWin=[];
//贏法的統計陣列
var myWin=[];
//初始化3維陣列
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,0,0,450,450***;
qipan******;
/**/
}
/**/
function qipan******{
for***var i=0; i<15; i++***{
context.moveTo***15+i*30,15***;
context.lineTo***15+i*30,430***;
context.stroke******;
context.moveTo***15,15+i*30***;
context.lineTo***435,15+i*30***;
context.stroke******;
}
}
/**//*定義onesStep函式來繪製棋子*/
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***chessBord[i][j]==0***{
oneStep***i,j,me***;
chessBord[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******;
}
}
}
//定義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***chessBord[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]+=200;
} else if***computerWin[k]==2***{
computerScore[i][j]+=400;
} else if***computerWin[k]==3***{
computerScore[i][j]+=2000;
} else if***computerWin[k]==4***{
computerScore[i][j]+=10000;
}
}
}
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***;
chessBord[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;
}
//
}
/**/
}
6以上步驟全部搞定之後，就可以執行index.html檔案玩遊戲了。遊戲初始化介面如下：
>
1.五子棋怎麼做棋
2.五子棋必勝開局技巧
3.五子棋的基礎知識講解
4.五子棋必勝步驟圖走法