介绍

在该系列的新部分中，我们将了解如何显示棋盘和当前在屏幕上下降的棋子。为此，我们必须在浏览器中绘制它，我们必须执行的选项是 Canvas HTML 元素。

class Canvas {
    static SEPARATION = 2;
    #_painting = false;
    #_element = null;
    #_board = null;
    #_piece = null;

    constructor(element, board)
    {        
        element.width = 5   ( board.cols * Board.PIXEL_SIZE );
        element.height = 5   ( board.rows * Board.PIXEL_SIZE );

        this._board = board;
        this._element = element;
    }

    // más cosas...
}

这个类Canvas表示同名的HTML元素，在构造函数中作为参数传递。由于您要绘制棋盘，因此它也作为参数传递，以便访问要绘制的点。

它所做的第一件事是根据板本身通过其属性 cols 和 rowsCanvas 的大小以适应板]。棋盘还通过 PIXEL_SIZE 告诉我们有多少像素组成了棋盘的每个棋子或每个单元的一个点。

重新绘制游戏

让我们少走弯路。我们必须画出木板和那一刻正在下降的棋子，对吗？好吧，让我们开始吧。

类画布 { // 更多的东西... 画（） { if (this._painting) { 返回; } const ctx = this.element.getContext( "2d" ); const SEP = Canvas.SEPARATION; this._painting = true; this.clear(); this.paintBoard( ctx, SEP ); this.paintPiece( ctx, SEP ); this._painting = false; } 清除（） { const ctx = this.element.getContext( "2d" ); ctx.clearRect( 0, 0, this.element.width, this.element.height ); } }

class Canvas {
    // más cosas...

    paint()
    {
        if ( this._painting ) {
            return;
        }

        const ctx = this.element.getContext( "2d" );
        const SEP = Canvas.SEPARATION;

        this._painting = true;
        this.clear();

        this.paintBoard( ctx, SEP );
        this.paintPiece( ctx, SEP );

        this._painting = false;
    }

    clear()
    {
        const ctx = this.element.getContext( "2d" );

        ctx.clearRect( 0, 0, this.element.width, this.element.height );
    }
}

首先，我们获取 2D 上下文，这将允许我们在画布上绘图。出于好奇，还有一个 3D 上下文，它基于 WebGL。

我们有一些守卫（

_painting），它们可以防止多个线程在给定时间同时（在不同点）执行该方法。如果该方法的执行时间长于重绘之间的时间，则可能会发生这种情况。虽然好吧，那样的话我们还会遇到很多其他问题......

下一步是删除先前重绘中屏幕上的内容（

帧）。我们使用 clear() 方法来执行此操作，该方法使用 clearRect() 删除画布上的图像。

然后我们画木板，然后画那一刻掉下来的那块。嗯，就这样了。麦芽酒，交付完成。

我说不。让我们看看棋盘和棋子是如何绘制的。首先是给木板上漆。 SEP 是我们在棋子和棋盘方块之间留下的间隔。这个框是我们在标题为

绘制框架的代码段中绘制的第一个东西。 它是一个简单的矩形，可以使用 StrokeRect() 绘制，它接受四个参数，其中包括左上角顶点的位置，然后是其宽度和高度。

画板

类画布 { // 更多的东西... 画板（ctx，SEP） { //画框 ctx.笔划宽度 = 1; ctx. StrokeStyle = this.board.color; ctx. 笔划矩形( 1, 1, this.element.width - 1, this.element.height -1 ); //画板 for(让 numRow = 0; numRow class Canvas { // más cosas... paint() { if ( this._painting ) { return; } const ctx = this.element.getContext( "2d" ); const SEP = Canvas.SEPARATION; this._painting = true; this.clear(); this.paintBoard( ctx, SEP ); this.paintPiece( ctx, SEP ); this._painting = false; } clear() { const ctx = this.element.getContext( "2d" ); ctx.clearRect( 0, 0, this.element.width, this.element.height ); } } 接下来是一个嵌套循环（行和列），因此我们将查看板上的哪些单元格有内容（整数 1，与整数 0），然后绘制一个边长为 PIXEL_SIZE 的小正方形。

因此，第一个循环循环遍历行，直到

Board.rows。然后我们使用 getRow() 方法获取完整的行，并用内循环遍历它，直到 Board.cols.

因此，给定行/列中的一个单元格

f/c、Board.getCell(f, c)，以及考虑到 JavaScript 有一个 Boolean 构造函数，它接受除 0 之外的任何值的整数，表示 true，我们绘制一个边长为 PIXEL_SIZE 的正方形。因此，要知道在哪里绘制行 f，我们必须乘以 PIXEL_SIZE 并添加板框和第一个单元格之间的间距。由于它们是正方形，我们将以相同的方式找到列 c：SEP (c * PIXEL_SIZE).

画出这件作品

我们对这些作品做了类似的事情。通过拥有一个形状 (

shape)（它只不过是一个矩阵），我们将再次拥有两个循环，外部循环用于行，内部循环用于列。

类画布 { // 更多的东西... 油漆片（ctx，SEP） { const SHAPE = this.piece.shape; for(让 numRow = 0; numRow class Canvas { // más cosas... paint() { if ( this._painting ) { return; } const ctx = this.element.getContext( "2d" ); const SEP = Canvas.SEPARATION; this._painting = true; this.clear(); this.paintBoard( ctx, SEP ); this.paintPiece( ctx, SEP ); this._painting = false; } clear() { const ctx = this.element.getContext( "2d" ); ctx.clearRect( 0, 0, this.element.width, this.element.height ); } } 同样，如果我们找到 1，我们将绘制一个边长为 PIXEL_SIZE 的正方形。绘制构成该块的每个方块的位置由该块本身的行/列位置给出（

Piece.row/Piece. 卷心菜）。您必须将其乘以 PIXEL_SIZE 并添加与框的分隔。

现在，我们将能够看到的非常......平淡。棋盘是空的，我们没有游戏循环，所以棋子甚至不会落下。我们将在下一部分中讨论该主题，以便我们可以开始看到与上图类似的内容。