html5五子棋人机大战源码教程

html5+css+js基础

sublime等其他任意网页编辑器

电脑

新建游戏项目文件目录

编写index.html文件源码如下：           

在css文件夹里新建css文件，style.css文件源码如下：  canvas{  display: block;  margin-left:400px;  margin-top: 60px;  box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;  width: 450px; height: 450px;    }  input{float: right; display: block; margin-right:130px;margin-top: -250px;    width: 100px; height: 30px; font-size: 18px; } input:hover{ background-color:orange; 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; imax){    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

以上步骤全部搞定之后，就可以运行index.html文件玩游戏了。游戏初始化界面如下：