多语言展示
当前在线:1191今日阅读:175今日分享:29

html5源码教程

本例将会带大家用html5+js+css编写一款简单好玩的网页五子棋游戏!有一定html、js基础的都可以来尝试一下哦!3html5五子棋人机大战源码教程
工具/原料
1

html5+css+js基础

2

sublime等其他任意网页编辑器

3

电脑主机

方法/步骤
1

新建游戏项目文件目录

3

在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;}

4

在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

注意事项
1

狗狗赢了

2

相关标签

推荐信息