让俄罗斯方块落在javascript中

我想知道如何让俄罗斯方块掉落，我已经学习了一些教程，我已经完成了整个游戏，但是我有点困惑于他们是如何让方块掉落的，以及他们是如何将2d阵列制作成实际的方块的，有人能在这里指导我正确的方向吗？我只是想更好地学习这个过程，这一切都是在画布上完成的

例如，这里是lpiece

function LPiece(){
//the pieces are represented in arrays shaped like the pieces, for example, here is an L.
//each state is a form the piece takes on, so each state after this.state1 is this.state1 rotated.
//each state is individual so we can call out which state to use depending on the option selected.
this.state1 = [ [1, 0],
                [1, 0],
                [1, 1]];
//and heres a different piece
this.state2 = [ [0, 0, 1],
                [1, 1, 1]];

this.state3 = [
                [1,1],
                [0,1],
                [0,1]];
this.state4 = [
                [1, 1, 1],
                [1, 0, 0]];

//and now we tie them all to one

this.states = [this.state1, this.state2, this.state3, this.state4];
//reference to the state the piece is currently in.
this.curState = 0;
//color of piece
this.color = 0;
//tracking pieces of grid of x and y coords, this is set at 4, -3 so it isn't initially visable.
this.gridx = 4;
this.gridy = -3;
}

    piece.color = Math.floor(Math.random() *8);

我添加了一些评论，试图让我一开始就理解 这是他们用于每个块的图像，每个块都是一种颜色

那么他如何将数组转换成一个实际的块，然后让它从板上掉下来，我一直在搜索，我只是很困惑，就像他如何将gridx和gridy设置为x和y坐标，而不说这个。y=gridy或类似的东西？有人对在这里做什么有什么建议吗？谢谢

这是他是怎么画的，我想，我还是不明白他是怎么把x和y和画的网格x和y联系起来的，而没有说x和y是网格x和y

function drawPiece(p){
//connecting the y and x coords or pieces to draw using the arrays to pieces we defined earlier.
var drawX = p.gridx;
var drawY = p.gridy;
var state = p.curState;

//looping through to get a pieces currentstate, and drawing it to the board.
//rows, the p.state is deciding the length by the currentstate(the block width)
for(var r = 0, len = p.states[state].length; r < len; r++){
    //columns the p.state is deciding the length by the currentstate(the block width)

    for(var c = 0, len2 = p.states[state][r].length; c < len2; c++){
        //detecting if there is a block to draw depending on size of value returned.
        if(p.states[state][r][c] == 1 && drawY >= 0){
            ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE, drawX * SIZE, drawY * SIZE, SIZE, SIZE);
        }


        drawX += 1;
    }
    //resetting the gridx
    drawX = p.gridx;
    //incrementing gridy to get the second layer of arrays from the block states.
    drawY += 1;
}
}

功能拉丝（p）{
//使用前面定义的数组将要绘制的y坐标和x坐标或片段连接到片段。
var drawX=p.gridx；
var drawY=p.gridy；
变量状态=p.curState；
//循环获取当前状态，并将其绘制到电路板上。
//行，p.state通过currentstate（块宽度）决定长度
对于（var r=0，len=p.states[state].length；r=0）{
ctx.drawImage（块图像，p.color*大小，0，大小，大小，drawX*大小，drawY*大小，大小，大小）；
}
drawX+=1；
}
//重置gridx
drawX=p.gridx；
//递增gridy以从块状态获取第二层数组。
drawY+=1；
}
}

他将ctx.drawImage中的画布像素单位转换为画布像素单位

var canvasX = drawX * SIZE;
var canvasY = drawY * SIZE;
ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE, canvasX, canvasY, SIZE, SIZE);

---

调用

ctx.drawImage

时，他将

drawX

和

drawY

转换为画布位置，方法是将它们乘以

SIZE

drawX*SIZE，drawY*SIZE

这是否意味着当他绘制块时，如果他将大小设置为32，则整个画布等于32？不完全是，它使一个块的大小等于32px。画布的总大小是32px的几倍