机器人之人机大战-五子棋（UI篇）-职坐标

机器人之人机大战-五子棋（UI篇）

小标 2018-10-17 来源：阅读 1918 评论 0

摘要：本文主要向大家介绍了机器人之人机大战-五子棋（UI篇），通过具体的内容向大家展现，希望对大家学习机器人有所帮助。

本文主要向大家介绍了机器人之人机大战-五子棋（UI篇），通过具体的内容向大家展现，希望对大家学习机器人有所帮助。

小菜我是按照老师的课程JS实现人机大战之五子棋（UI篇），自己在本地实现五子棋游戏（很基础，没有什么输赢的判断）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>人机大战-五子棋</title>

</head>

<style>

canvas{

display:block;

margin:50px auto;

box-shadow: -2px -2px 2px #999, 3px 3px 3px #999;

}

</style>

<body>

<canvas id="canvas" width="450" height="450"></canvas>

<script>

//数组初始化，是否落子信息的存储

var chessarray=[];

for(var i=0;i<15;i++){

chessarray[i]=[];

for(var j=0;j<15;j++){

chessarray[i][j]=0;

}

}

var me=true;//判断落黑子，还是白子

var chess=document.getElementById("canvas");

content=chess.getContext("2d");

//var logo=new Image();

//logo.src="images/back.png";

//函数的意义：为了使图片作为背景显示，先将图片加载完之后再画线条

//logo.=function(){

// content.drawImage(logo,0,0,450,450); //背景图的显示

// drawChess();

//}

//绘制棋盘线条

//var drawChess=function(){

for(i=0; i<15; i++){

//横线

content.strokeStyle="#BFBFBF";

content.moveTo(15,15+i30);

content.lineTo(435,15+i30);

content.stroke();

//纵线

content.strokeStyle="#BFBFBF";

content.moveTo(15+i30,15);

content.lineTo(15+i30,435);

content.stroke();

}

//}

//绘制旗子

var oneStep=function(i, j, me){

content.beginPath();

content.arc(15+i30, 15+j30, 13, 0, 2*Math.PI);

content.closePath();

var gradient=content.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,"#FAFAFA");
}
content.fillStyle=gradient;
content.fill();

}

//落子实现

chess.=function(e){

var x=e.offsetX;

var y=e.offsetY;

var i=Math.floor(x/30);

var j=Math.floor(y/30);

if(chessarray[i][j]==0){//判断是否可以落子

oneStep(i, j, me);//落子

if(me){

chessarray[i][j]=1;//存储落黑子的信息

}else{

chessarray[i][j]=2;//存储落白子的信息

}

me=!me;//指定落完黑子后，落白子

}

}

</script>

</body>

</html>