JS实现人机大战之五子棋（UI篇）_技术笔记

慕粉1057417189 2017-02-27

五子棋（UI）

0赞 · 0采集
空白小弟 2016-10-19

棋盘画法通过<canvas>画网格，画一条横线：js代码： #id.lineTo(0,200);#id.moveTo(200,200);#id.stroke(); 两点确定一条线段。网格通过for循环实现。线的颜色：#id.strokeStyle="#bfbfbf"; 棋子是通过canvas画圆实现： #id.beginPath(); #id.arc(0,0,13,0,2*Math.PI); #id.closePath();

1赞 · 1采集
无所畏惧小小小 2016-10-10

笔记字数有限制，只好分段保存（UI篇第一段） var chessBoard=[]; var me=true; for(var i=0;i<15;i++){ chessBoard[i]=[]; for(var j=0;j<15;j++){ chessBoard[i][j]=0; } } var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#BFBFBF"; //加水印 var logo=new Image(); logo.src='img/lg.jpg'; logo.onload=function (){ context.drawImage(logo,0,0,450,450); drawchessBoard(); // oneStep(0,0,true) // oneStep(1,1,false) }

1赞 · 1采集
无所畏惧小小小 2016-10-10

（UI篇第二段） //画棋盘 var drawchessBoard=function(){ for(var i=0;i<15;i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,435); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } } 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,15+j*30,15,15+i*30,15+j*30,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){ //通过鼠标点击坐标确定落子坐标 var x=e.offsetX; var y=e.offsetY; i=Math.floor(x/30); j=Math.floor(y/30); //判断落子的位置是否已经落子 if(chessBoard[i][j]==0){ oneStep(i,j,me); //记录落下子的颜色 if(me){ chessBoard[i][j]=1; }else{ chessBoard[i][j]=2; } //轮流下棋落下一种颜色棋子后换一种颜色 me=!me; } }

1赞 · 1采集
安心坚持 2016-07-22

五子棋ui篇

0赞 · 0采集
Bob2100 2016-05-19

内容不错，学到了东西

0赞 · 0采集
鱼骨纹 2016-05-10

//画棋子 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+i*30-2,13,15+i*30+2,15+i*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) { var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / 30); var j = Math.floor(y / 30); if(chessBoard[i][j]==0){ oneStep(i,j,me); if(me){ chessBoard[i][j]=1; }else { chessBoard[i][j]=2; } me=!me; } }

0赞 · 0采集
鱼骨纹 2016-05-10

var chessBoard=[]; var me=true; for (var i = 0; i <15; i++) { chessBoard[i]=[]; for (var j =0; j <15; j++) { chessBoard[i][j]=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); drawChessBoard(); //oneStep(0,0,true); //oneStep(1,1,false); } //画棋盘 var drawChessBoard=function(){ for(var i=0; i<15; i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,435); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } 　}

0赞 · 0采集
JackyCoder 2016-04-09

canvas 填充渐变

截图
0赞 · 0采集
sonicXXX 2016-04-07

棋盘棋子 canvas

截图
0赞 · 0采集
霜花似雪 2016-04-02

总结

截图
0赞 · 0采集

数据加载中...