html在线围棋对战,闲情奕趣（基于html5的围棋应用）

科技前沿 • 2025-04-11 14:37 • 阅读 41

大家好，我是讯享网，很高兴认识大家。

一、闲情奕趣

少时，闻奕而不知奕之趣，观棋而不识棋之髓。近日，略习奕之规矩，演练一二，始觉其妙。今见各手谈之软件，心生一念，自编一演习软件，以调闲暇之情，培对弈之趣，故取一名，曰：“闲情奕趣”。

——雪飘七月

近日忙里偷闲得以编写此对弈软件，以HTML5为基础，canvas画布绘制展示棋盘棋子，localStorage本地存储本局的各个步骤。今日程序初具雏形，写此日志，以供大家交流学习。

下面上图一张：

二、棋布星罗

下面就来讲棋盘棋子的绘制，我们的绘制都是在canvas中一条线一个圆地绘制成的。

棋盘是19*19的线条与9个星位组成，9个星位就是9个以星位为圆心的圆。

棋子的绘制也是画圆，只是圆半径较星位大，而棋子是通过一个19*19的数组存储标记位来实现的，数组中361个值与棋盘上的361个位置一一对应。若数值为0，表示没有落子；数值若为1，表示黑方落子；数值若为2，表示白方落子。

//获取canvas画布

varcanvas=document.getElementById('myCanvas');

canvas.height = total_height;

canvas.width = total_width;

varcxt=canvas.getContext('2d');

//画棋盘

vardrawBoard =function(){

//每次重画棋盘之前清楚canvas

cxt.clearRect(0, 0, canvas.width, canvas.height);

cxt.beginPath();

//描绘横线

for(vari = 0 ; i

varstart_company_x = chessboard_start_x;

varstart_company_y = chessboard_start_y + company_y*i;

varend_company_x = chessboard_end_x;

varend_company_y = chessboard_start_y + company_y*i;

cxt.lineWidth = 2;

cxt.moveTo(start_company_x,start_company_y);

cxt.lineTo(end_company_x,end_company_y);

}

//描绘竖线

for(varj = 0 ; j

varstart_company_x = chessboard_start_x + company_x*j;

varstart_company_y = chessboard_start_y;

varend_company_x = chessboard_start_x + company_x*j;

varend_company_y = chessboard_end_y;

cxt.moveTo(start_company_x,start_company_y);

cxt.lineTo(end_company_x,end_company_y);

}

cxt.stroke();

//画九星

for(vari = 0 ; i

varst