Javascript requestanimationframe绘图与for循环问题_Javascript_For Loop_Html5 Canvas_Requestanimationframe

Javascript requestanimationframe绘图与for循环问题

javascript for-loop html5-canvas

Javascript requestanimationframe绘图与for循环问题,javascript,for-loop,html5-canvas,requestanimationframe,Javascript,For Loop,Html5 Canvas,Requestanimationframe,我正在做一个俄罗斯方块游戏-仍然-并试图使用requestAnimationFrame在黑板上画我的T片这就是问题所在。requestAnimationFrame绘制工件2次，然后停止绘制，即使for循环仍在运行。也就是说，两次之后，我只看到了黑色的背景。当我注释掉黑色背景时，该片段显示/动画效果良好我真的不知道为什么会发生这种事 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d")

我正在做一个俄罗斯方块游戏-仍然-并试图使用requestAnimationFrame在黑板上画我的T片

这就是问题所在。requestAnimationFrame绘制工件2次，然后停止绘制，即使for循环仍在运行。也就是说，两次之后，我只看到了黑色的背景。当我注释掉黑色背景时，该片段显示/动画效果良好

我真的不知道为什么会发生这种事

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

const T = [
        [
            [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]
        ],

       [
            [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]
        ],

       [
            [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]
        ],

        [
            [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 piece = T[0];

    const player = {
        position: {x: 5, y: -1},
        piece: piece,
    }

function colorPiece(piece, offset) {
    for(y = 0; y < piece.length; y++) {
        for(x = 0; x < piece.length; x++) {
            if (piece[y][x] !== 0) {
                ctx.fillStyle = "red";
                ctx.fillRect(x + offset.x, y + offset.y, 1, 1);
            }
        }
    }
}

function drawCanvas() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.scale(20, 20);
    colorPiece(player.piece, player.position);
}

function update() {
        drawCanvas();
        requestAnimationFrame(update);
}

update();

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
常数T=[
[
[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]
],
[
[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]
],
[
[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]
],
[
[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]
],
]
变分片=T[0]；
康斯特玩家={
位置：{x:5，y:-1}，
一件一件，
}
功能色块（块，偏移）{
对于（y=0；y

正常-工作版本，带小提琴。许多变化。最大的挑战是：

不要使用
```
canvas.scale（）
```
，因为它是累积的（请参阅“更多示例”）。相反，对块20x20使用
```
20*x
```
和
```
20*y
```
编辑基于a，这似乎是最显著的变化
重命名，使
```
piece
```
不被用作所有变量、
```
player
```
中的字段名和
```
colorpece
```
根据将
```
ctx
```
创建移动到
```
update（）
```
（现在称为
```
doUpdate（）
```
）。将
```
ctx
```
作为参数传递给其他函数
将红色
```
fillStyle
```
赋值移出循环，因为您只需执行一次，然后就可以绘制所有矩形，而无需更改

在循环中：

for(var y = 0; y < thePiece.length; ++y) {
    for(var x = 0; x < thePiece[y].length; ++x) { ... } }

请显示创建ctx的代码，好吗？我在这个片段中没有看到它。谢谢另外请解释一下“停止画画”和“动画”——我在这段代码中没有看到任何能让作品移动的东西。你的意思是在两帧之后，你只得到一个黑色的矩形吗？我的强迫症困扰着我，让我指出“片段”拼写为“I-E”，而不是“E-I”。。。只要你不在代码的中途纠正拼写，你就没事了。帕特里克，你的评论让我笑了。很抱歉我想我至少一直在拼写错误。是的，cxw，我只在红色t形重复两次后才看到黑色背景。是的，我还在学习干净的代码。我试过一个：T[0]，同样的问题出现了。是的！我甚至没有想到进行fillRect所需的fillStyle。我根据您对调试器的建议一点一点地调整了我的代码，只要我将fillStyle放在fillRect之前，问题就解决了。非常感谢你的帮助！！！

const T = [
        [
            [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]
        ],

       [
            [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]
        ],

       [
            [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]
        ],

        [
            [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]
        ],
    ]

    const player = {
        position: {x: 5, y: -1},
        piece: T[0]
    }

function colorPiece(ctx, thePiece, offset) {
    ctx.fillStyle = "red";
    for(var y = 0; y < thePiece.length; ++y) {
        for(var x = 0; x < thePiece[y].length; ++x) {
            if (thePiece[y][x] !== 0) {
                ctx.fillRect(20*(x + offset.x), 20*(y + offset.y), 20, 20);
            }
        }
    }
}

function drawCanvas(ctx) {
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    colorPiece(ctx, player.piece, player.position);
}

var framenum=0;

function doUpdate(timestamp) {
        document.getElementById("log").innerHTML = framenum.toString();
        ++framenum;
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        drawCanvas(ctx);
        window.requestAnimationFrame(doUpdate);
}

doUpdate();