在该系列的新一期中，我们将了解如何在屏幕上显示棋盘和当前正在下降的棋子。为此，我们必须在浏览器中绘制它，而我们必须执行此操作的选项是 HTML 的 Canvas 元素。
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 和 行报告的尺寸，调整 Canvas 元素的大小，以便能够容纳板。棋盘还通过 PIXEL_SIZE 告诉我们棋盘的每个棋子或每个单元有多少像素构成一个点。
重新绘制游戏
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 );
}
}
我们有守卫（
_painting），它可以防止多个线程在给定时间同时（在不同点）执行该方法。如果该方法的执行时间长于重绘之间的时间，则可能会发生这种情况。虽然好吧，那样的话我们还会遇到很多其他问题...
下一步是删除先前重绘中屏幕上的内容（帧）。我们使用 clear() 方法来执行此操作，该方法使用 clearRect() 删除画布上的图像。
然后我们画木板，然后画那一刻掉下来的那块。嗯，就这样了。麦酒，配送完毕。不。让我们看看棋盘和棋子是如何绘制的。首先是给木板上漆。 SEP 是我们在棋子和棋盘方块之间留下的间隔。这个盒子是我们在标题为
绘制框架的代码段中绘制的第一个东西。 它是一个简单的矩形，可以使用 tripleRect() 绘制，它接受四个参数，其中包括左上角顶点的位置，然后是其宽度和高度。
画板class Canvas {
// más cosas...
paintBoard(ctx, SEP)
{
// Draw frame
ctx.strokeWidth = 1;
ctx.strokeStyle = this.board.color;
ctx.strokeRect( 1, 1,
this.element.width - 1,
this.element.height -1 );
// Draw board
for(let numRow = 0; numRow < this.board.rows; ++numRow)
{
const row = this.board.getRow( numRow );
for(let numCol = 0; numCol < row.length; ++numCol) {
if ( Boolean( row[ numCol ] ) ) {
ctx.strokeWidth = 1;
ctx.strokeStyle = this.board.color;
ctx.fillStyle = this.board.color;
ctx.fillRect(
SEP + ( Board.PIXEL_SIZE * numCol ),
SEP + ( Board.PIXEL_SIZE * numRow ),
Board.PIXEL_SIZE,
Board.PIXEL_SIZE );
}
}
}
return;
}
}
因此，第一个循环遍历行，直到
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)（它只不过是一个矩阵），我们将再次拥有两个循环，外部循环用于行，内部循环用于列。
class Canvas {
// más cosas...
paintPiece(ctx, SEP)
{
const SHAPE = this.piece.shape;
for(let numRow = 0; numRow < SHAPE.length; ++numRow) {
const ROW = SHAPE[ numRow ];
for(let numCol = 0; numCol < ROW.length; ++numCol) {
if ( Boolean( ROW[ numCol ] ) ) {
ctx.strokeWidth = 1;
ctx.strokeStyle = this.piece.color;
ctx.fillStyle = this.piece.color;
ctx.fillRect(
SEP
+ ( this.piece.col * Board.PIXEL_SIZE )
+ ( numCol * Board.PIXEL_SIZE ),
SEP +
+ ( this.piece.row * Board.PIXEL_SIZE )
+ ( numRow * Board.PIXEL_SIZE ),
Board.PIXEL_SIZE,
Board.PIXEL_SIZE );
}
}
}
return;
}
}
块.行/块. 上校）。您必须将其乘以 PIXEL_SIZE 并添加与框的分隔。
以上是使用 JavaScript IV 创建俄罗斯方块：canvas的详细内容。更多信息请关注PHP中文网其他相关文章！
