Hbuilder在线围棋的对弈设计+源代码(5)
时间:2023-12-10 20:15 来源:毕业论文 作者:毕业论文 点击:次
表2 函数表: 函数名 函数功能论文网 Function killSelf(dot) 禁手功能(若落子之后自身气为0 ,禁下) Function kill(dot) 判断棋盘是否可以杀子 Function getPos(x,y) 获取棋子的坐标 Funcion cha(bl,dot) 找到周围连成一片反色的区域 Function tightSame(dot) 查找棋子的紧气 document。onclick=function(){} 判断页面点击区域是否在有效区域 Back。onclick=function(){} 点击悔棋按钮,执行悔棋函数 Array。prototype。unique=function(){} 给数组封装一个去重方法 4。2页面布局代码 canvas标签,宽高设置都设置为800,id设置为canvas (1)Canvas设置1像素实体线黑色的边框,设置灰色阴影,背景颜色设置为咖啡色,四周外边距设置50像素。 < canvas id = "canvas" width = "800" height = "800"> < /canvas> canvas{ border: 1px solid #000; box - shadow: 0 0 50px #ccc; background:rgba( 200,156,92,1 ); margin: 50px; } (2)获取canvas节点,将canvas设置成平面2d,并永久移动canvas画布,接下来开始绘制棋盘,画笔开始是在(30 * i,0)的位置,移动到( 30 * i,540 )的位置,这样画出19条经线,同理画出19条纬线,canvas中的arc方法是画圆,参数1记录圆心横坐标,参数2记录圆心纵坐标,第三个参数是圆的半径,第四个参数是起始角度,第五个参数是结束角度,都是弧度制,第6个参数是可选参数,表示是否逆时针绘画,双层循环,按照坐标绘制出9个实心点 var canvas = document。querySelector( "#canvas" ); var ctx = canvas。getContext( "2d" ); ctx。translate( 100,100 ); createChessBox( ); 文献综述 function createChessBox( ){ for ( var i = 0; i < 19; i + + ){ ctx。beginPath( ); ctx。moveTo( 30 * i,0 ); ctx。lineTo( 30 * i,540 ); ctx。stroke( ); ctx。save( ); ctx。beginPath( ); ctx。moveTo( 0,30 * i ); ctx。lineTo( 540,30 * i ); ctx。stroke( ); ctx。save( ); } for ( var i = 0; i < 19; i + + ){ for ( var j = 0; j < 19; j + + ){ if ( ( i == 3 && j == 3 )||( i == 3 && j == 9 )||( i == 3 && j == 15 )|| ( i == 9 && j == 3 )||( i == 9 && j == 9 )||( i == 9 && j == 15 )||( i == 15 && j == 3 )||( i == 15 && j == 9 )||( i == 15 && j == 15 ) ){ (责任编辑:qin) |