Question

我试图使用for循环为俄罗斯方块游戏绘制棋子。我无法找到一个使用for循环的单一教程或解释，其填充方式与我使用它的方式相同。我知道如何让它与foreach一起工作，但由于某种原因它不能在for循环中工作。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

const T = {
    "first": [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 1, 1, 1, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 0, 0, 0]
    ],

    "second": [
        [0, 0, 0, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 1, 1, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 0, 0, 0]
    ],

    "third": [
        [0, 0, 0, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 1, 1, 1, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0]
    ],

    "forth": [
        [0, 0, 0, 0, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 1, 1, 0],
        [0, 0, 1, 0, 0],
        [0, 0, 0, 0, 0]
    ],
}

var peice = T.first

function colorPeice(peice) {
    for(i = 0; i < peice.length; i++) {
        for(j = 0; j < peice.length; j++) {
            if (peice[i][j] !== 0) {
                ctx.fillstyle = 'red';
                ctx.fillRect(0, 0, 1, 1); 
            }
        }
    }
}

function drawCanvas() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    colorPeice(peice);
} 

drawCanvas();

我知道在运行时会看到这些值，但它们并没有被填充。

我已经尝试了

function colorPeice(peice) {
    for(i = 0; i < peice.length; i++) {
        for(j = 0; j < peice.length; j++) {
            if (peice[i][j] !== 0) {
                ctx.fillstyle = 'red';
                ctx.fillRect(j, i, 1, 1); 
            }
        }
    }
}

它不起作用。我做错了什么？

Answer 1

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function colorPeice(peice) {
    for(i = 0; i < peice.length; i++) {
        for(j = 0; j < peice[i].length; j++) {
            if (peice[i][j] !== 0) {
                ctx.fillStyle = 'red';
                ctx.fillRect(j*10, i*10, 10, 10); 
                console.log('fill', i*10, j*10)   
            }
        }
    }
    ctx.fill();
}
piece = [[1,1,1,1,1],[2,2]]
colorPeice(piece)

＆＃13;

<canvas id="canvas" height="500px", width="500px">

</canvas>

＆＃13;

Answer 2

试试这段代码（并查看我对你帖子的评论）。

function colorPeice(peice) {
    for(i = 0; i < peice.length; i++) {
        for(j = 0; j < peice.length; j++) {
            if (peice[i][j] !== 0) {
                ctx.fillStyle = 'red';
                ctx.fillRect(j*10, i*10, 10, 10); 
            }
        }
    }
}

fillrect不能在javascript for循环中工作

2 个答案: