Hbuilder在线围棋的对弈设计+源代码(5)_毕业论文

毕业论文移动版

毕业论文 > 计算机论文 >

Hbuilder在线围棋的对弈设计+源代码(5)

表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)