五子棋人機大戰原始碼教程圖解

General 更新 2024年11月25日

  圍棋是一種高明的邏輯遊戲,其中蘊涵深刻的哲理,那麼如何用程式碼製作五子棋呢?下面是有,歡迎參閱。

  五子棋人機大戰原始碼教程步驟圖解:

  新建遊戲專案檔案目錄

  編寫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.五子棋必勝步驟圖走法

五子棋之九鳳大陸戰術
五子棋的一些祕密簡介
相關知識
五子棋人機大戰原始碼教程圖解
中國象棋人機大戰
圍棋人機大戰的看點在哪裡
草莓榴蓮棋格蛋糕製作方法教程圖解
大眼妝化妝教程圖解
柯潔人機大戰第三局直播視訊
人機大戰柯潔對戰阿爾法狗第二局視訊在哪看
人機大戰的魅力
什麼是五子棋邊角大撒把
五子棋著名大師那威

Have any Question?

Let us answer it!