javascript - 在 JavaScript 中让俄罗斯方 block 掉下来

Question

我想知道如何让俄罗斯方 block 掉落，我遵循了一些教程并且制作了完整的游戏，但我有点困惑他们如何真正让俄罗斯方 block 掉落，以及他们如何制作二维数组变成实际的 block ，有人可以在这里指导我正确的方向吗？我只是想更好地学习这个过程，这一切都是在 Canvas 上完成的。

例如，这是 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);

我添加了评论，试图让我最初理解 这是他们为每个 block 使用的图像，每个 block 都是一种颜色 /image/kMXsn.png

那么他如何将数组转换为实际的 block ，然后让它从板上落下，我无休止地搜索，我只是很困惑，就像他如何将 gridx 和 gridy 设置为 x 和 y 坐标从来没有说过 this.y = gridy 或类似的东西？有人对在这里做什么有什么建议吗？谢谢

我猜这就是他画这件作品的方式，我仍然不明白他是如何将 x 和 y 链接到作品的 gridx 和 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;
}
}

Answer 1

他在ctx.drawImage中转换为 Canvas 像素单位，这是一个简化版本

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

https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D#drawImage()