一、闲情奕趣
少时,闻奕而不知奕之趣,观棋而不识棋之髓。近日,略习奕之规矩,演练一二,始觉其妙。今见各手谈之软件,心生一念,自编一演习软件,以调闲暇之情,培对弈之趣,故取一名,曰:“闲情奕趣”。
——雪飘七月
近日忙里偷闲得以编写此对弈软件,以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
varsta