JS实现五子棋（二）外观分析及绘制

微信关注 [可回收BUG]

上期内容：
JS实现五子棋（一）目标分析

一、外观分析

还记得最开始我们进行目标分析之前画了一个草图，就按照这个草图描绘的外观进行分析

棋盘是N*N正方形，通常是15*15，那么棋盘就是由横向16条，纵向16条的线段组合而成。

为了方便实现，不考虑页面尺寸兼容，这里使用固定的棋盘边长a，棋盘单元格边长使用c=a/N

棋子是可以落在棋盘格子的边缘上，所以棋盘的边缘与边线需要加一段边距。

落子规则是落在横纵线交叉点上，棋子是黑白两色的正圆形，为了美观一点，棋子直径要小于棋盘单元格边长，这样相邻的棋子之间就能够留出一些空隙，显得不那么拥挤。

根据分析内容画出棋盘原型图

根据操作制作玩家信息展示区域的原型，总共分为两块，每一块显示4个信息，分别是玩家名称，落子步数，玩家阵营（黑子、白子），玩家类型（人类、机器）

根据分析内容画出用户信息区域原型图

分析到这里也画出了原型，可以开始照此实现了。

二、外观绘制

棋盘绘制

首先创建一个棋盘的类并定义基础变量，比如棋盘canvas的对象变量、棋盘边长、单元格数量等等。

[/code][list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]function Plate(){ // 这个名字起坏了，别在意

复制代码

let cxt2d = canvas = null; // canvas上下文对象

复制代码

let canvasSideLen = 780; // px canvas画布大小

复制代码

let plateSideLen = 0; // 棋盘边长需要进行初始化计算

复制代码

let plateLineWidth = 1; // px 棋盘线条宽度

复制代码

let cellNumOneSide = 15; // 棋盘单边单元格数量

复制代码

let cellSideLen = 0; // px 单元格边长需要计算初始化

复制代码

let initCxt = function(){

复制代码

// 初始化棋盘画布

复制代码

}

复制代码

let initPlateAttr = function(){

复制代码

// 初始化并计算棋盘相关变量，棋盘边长、单元格边长

复制代码

}

复制代码

let renderPlate = function() {

复制代码

// 使用矩形绘制边框并填充颜色或图片

复制代码

// 循环绘制出横纵格线

复制代码

}

复制代码

// 分别按顺序进行调用

复制代码

initCxt();

复制代码

initPlateAttr();

复制代码

renderPlate();

复制代码

}

复制代码

[/code][code]var plate = new Plate(); // 初始化棋盘对象

复制代码

[/code]棋盘的初步样子就可以显示出来了
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-428fd0f670baa4a6d280644eac55cd50[/img]
[b]棋子绘制[/b]
因为棋盘是固定样式基本不会变化，而棋子是可以添加、清除，所以考虑将棋子使用单独的一个canvas透明层，叠加在棋盘层之上，使绘制出的棋子对齐到格线交点上，落子的外观就做好了。
在上期内容里假设了棋盘具有绘制棋子和清除棋盘的功能，所以初始化变量、绘制棋子及清除棋盘的方法就可以添加到Plate对象中。
棋子是圆形，canvas绘制圆形需要原点坐标，以及半径，所以要在对象中定义这些变量并根据棋盘尺寸计算。
[list][*][*][/list][code]

复制代码

[/code][list][*][*][*][*][*][*][*][*][/list][code]/* canvas使用定位，将各层叠加起来 */

复制代码

canvas {

复制代码

position: absolute;

复制代码

top: 0;

复制代码

left: 0;

复制代码

margin: 0 auto;

复制代码

cursor: pointer;

复制代码

}

复制代码

function Plate(){

复制代码

...

复制代码

let cxtChess2d = null; //棋子画布

复制代码

let plateOriginPosX = 0; //棋盘原点坐标X

复制代码

let plateOriginPosY = 0; //棋盘远点坐标Y

复制代码

let drawChessBasePosX = 0; //棋子坐标基准X

复制代码

let drawChessBasePosY = 0; //棋子坐标基准Y

复制代码

let singleChessRadius = 0; //棋子半径

复制代码

let initPlateAttr = function(){

复制代码

...

复制代码

//初始化和计算棋盘原点和棋子坐标基准

复制代码

}

复制代码

//绘制一个棋子，传入绘制位置 v:垂直位置，h：横向位置以及颜色

复制代码

let drawOneChess = function (y, x, color) {

复制代码

// 通过v和h，单元格边长，棋子坐标基准，计算当前棋子坐标，

复制代码

// currentX=drawChessBasePosX + x * cellSideLen

复制代码

// currentY=drawChessBasePosY + y * cellSideLen

复制代码

// 使用cxtChess2d绘制圆形，并填充color

复制代码

}

复制代码

//测试在[0,0]位置绘制一颗黑色棋子

复制代码

drawOneChess(0,0,'#000');

复制代码

}

复制代码

对于棋盘对象，需要开放绘制棋子和清空棋盘内棋子的方法，后期在控制器落子动作需要使用到开放出来的绘制功能，重新开始游戏时需要使用到清空棋盘的功能。

function Plate(){

复制代码

...

复制代码

this.renderOneChess = function(v,h,color){

复制代码

drawOneChess(v,h,color);

复制代码

};

复制代码

let clearAllChessDraw = function () {

复制代码

//清除cxtChess2d整个画布矩形区域

复制代码

};

复制代码

this.clearAll = function(){

复制代码

clearAllChessDraw();

复制代码

};

复制代码

}

复制代码

[/code][code]var plate = new Plate(); // 初始化棋盘层和棋子层

复制代码

plate.renderOneChess(0,0,'#000'); //在0，0绘制一个黑色棋子

复制代码

plate.renderOneChess(1,1,'#fff'); //在1，1绘制一个白色棋子

复制代码

[/code][code]//清除棋子

复制代码

//plate.clearAll();

复制代码

[code][/code]

此时以及棋盘和棋子的绘制工作就基本完成了，至于玩家信息，先直接用html+css实现一下，就像下面图里的样子

右侧暂时写死

到这里外观的绘制就算基本完成了，可以提供棋盘、棋子的绘制，以及玩家信息显示的面板。

下一期要开始让游戏可以玩起来，引入棋子对象、玩家对象、控制器、棋子运行时对象、事件绑定、棋盘矩阵、棋子渲染等。

预知后事如何，且听下回分解！

微信关注 [可回收BUG]