用JavaScript俄罗斯方块绘制新俄罗斯方块

我试图用JavaScript绘制tetrominos，但遇到了一些麻烦。我认为我的代码，this.blocks=I.blocks[b][c]是不正确的，但可能更多。现在我的眼睛开始痛了，我决定寻求帮助。this.blocks=i.blocks[b][c]是否因为this.blocks无法存储数组而无法工作？还是有其他问题。谢谢你的帮助

以下是JSFIDLE链接：

代码如下：

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        var h = canvas.height;
        var w = canvas.width;
        var gridWidth = w / 4;
        var gridHeight = h;
        var cols = gridWidth / 10; //width, columns
        var rows = cols; //height, rows
        window.addEventListener("keydown", test, true); 
        var b = 0;
        var c = 0;

    var gravity = 0;

    var id;
    var type = 2;
    var color; 
    var x = gridWidth * 2;
    var y = -30;
    var position;
    var velocityY;
    var tetrominoId = 0;
  var i = { id: 'i', size: 4, 
                blocks: [[0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0]], 
                color: 'cyan'   };

function tetromino(id, type, color, position, y, velocityY){
    this.id = i.id;
    this.blocks = i.blocks[b][c];
    this.color = i.color;
    this.x = x;
    this.y = y;
    this.velocityY = 1;
}

var tetrominoList = [];

function addTetromino(type, color, position, x, y, velocityY){
tetrominoList[tetrominoId] = new tetromino(tetrominoId, type, color, x, y, velocityY);
tetrominoId++;

}

function tetrominoDraw(){

        tetrominoList.forEach(function(tetromino){

        for(b = 0; b < 4; b++){

            for(c = 0; c < 4; c++){



                    ctx.fillStyle = tetromino.color;
                    ctx.fillRect(
                        gridWidth * 2 + tetromino.blocks[b][c] * 
                        b * cols, tetromino.blocks[b][c] * c * rows + gravity + y,
                        cols, rows
                        );
                    ctx.fill();
                }   
            }
        }   
        });

        }

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.height=window.innerHeight；
canvas.width=window.innerWidth；
var h=画布高度；
var w=画布宽度；
var gridWidth=w/4；
var gridHeight=h；
var cols=网格宽度/10//宽度，列数
var行=cols//高度，行数
window.addEventListener（“键控”，测试，真）；
var b=0；
var c=0；
var重力=0；
变量id；
var类型=2；
颜色变异；
var x=网格宽度*2；
变量y=-30；
var位置；
var-velocityY；
var-tetrominoId=0；
变量i={id:'i'，大小：4，
块：[[0,1,0,0]，
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]], 
颜色：'青色'}；
函数tetromino（id、类型、颜色、位置、y、速度y）{
this.id=i.id；
this.blocks=i.blocks[b][c]；
this.color=i.color；
这个.x=x；
这个。y=y；
这是1.velocityY=1；
}
变量tetrominoList=[]；
函数addTetromino（类型、颜色、位置、x、y、速度y）{
tetrominoList[tetrominoId]=新的tetromino（tetrominoId，type，color，x，y，velocityY）；
类四环素++；
}
函数tetrominoDraw（）{
tetrominoList.forEach（函数（tetromino）{
对于（b=0；b<4；b++）{
对于（c=0；c<4；c++）{
ctx.fillStyle=tetromino.color；
ctx.fillRect(
网格宽度*2+tetromino.块[b][c]*
b*cols，tetromino.块[b][c]*c*行+重力+y，
一排排
);
ctx.fill（）；
}   
}
}   
});
}

---

谢谢大家!

tetromino.blocks不是数组，而是整数，因为它等于i.blocks的第一个数组的第一个元素的值（i.blocks[0][0]，因为b和c变量在初始化时都定义为零）

您所要做的就是去掉tetromino声明中的数组地址：

function tetromino(id, type, color, position, y, velocityY) {
    this.id = i.id;
    this.blocks = i.blocks;
    this.color = i.color;
    this.x = x;
    this.y = y;
    this.velocityY = 1;
}

我更新了你的小提琴：