JavaScript：创建图片副本的 For 循环不起作用答案

【问题标题】：JavaScript: For loops to create copies of a picture don't workJavaScript：创建图片副本的 For 循环不起作用
【发布时间】：2014-04-17 06:32:25
【问题描述】：

我正在用 JavaScript 和 HTML 制作平台游戏，但遇到了问题。一些应该复制和打印盒子图像（角色行走的地板）的代码不起作用，因此在我运行它时只显示白屏。我检查了浏览器的控制台，但它说没有错误。这是 HTML 文件：

<body onkeydown="keyDown(event)" onkeyup="keyUp(event)">
<canvas id="graphics" width=600 height=400 style="position:absolute;top:0;left:0;"></canvas>

<script>
//VARIABLES
var gameCanvas = document.getElementById("graphics");
var grafx = gameCanvas.getContext("2d");
var player = new GameObject("Character1NoAA.png",100,100,64,59);
var maxBlock = 4;
var block = new Array();
for (var i=0;i<=maxBlock;i++) {
    block[i] = new GameObject("Block.png",i*62+100,300,62,62);
}

var img = new Image();
img.src = "Character1NoAA.png";
var isLeft = false;
var isRight = false;
var isUp = false;
player.Gravity = 20;
player.Weight = 0.3;

//EVENTS
function keyDown(e) {
    if (String.fromCharCode(e.keyCode) === "%") isLeft = true;
    if (String.fromCharCode(e.keyCode) === "'") isRight = true;
    if (String.fromCharCode(e.keyCode) === " ") isUp = true;
}
function keyUp(e) {
    if (String.fromCharCode(e.keyCode) === "%") isLeft = false;
    if (String.fromCharCode(e.keyCode) === "'") isRight = false;
    if (String.fromCharCode(e.keyCode) === " ") isUp = false;
}

//MAINLOOP
MainLoop();
function MainLoop() {
    //PRE VARIABLE ADJUSTMENTS
    player.X += player.Velocity_X;
    player.Y += player.Velocity_Y;
    player.Velocity_X = player.Velocity_X * 0.90

    //LOGIC
    if (isLeft) player.Velocity_X = -4;
    if (isRight) player.Velocity_X = 4;
    if (!isLeft && !isRight) player.Velocity = 0;
    if (player.Velocity_Y < player.Gravity) player.Velocity_Y += player.Weight;
    for (var i=0;i<=maxBlock;i++){
        if (player.isColliding(block[i]) && player.Y + player.Height < block[i].Y + player.Velocity_Y) {
            player.Y = block[i].Y - player.Height;
            player.Velocity_Y = 0;
        }
    }
    }
    if (isUp && player.Velocity_Y === 0) {
        player.Velocity_Y += -10;
    }
    //POST VARIABLE ADJUSTMENTS

    //RENDERING

    grafx.clearRect(0,0,gameCanvas.width, gameCanvas.height);
    grafx.drawImage(player.Sprite,player.X,player.Y);
    for (var i=0;i<=maxBlock;i++) {
        grafx.drawImage(block[i].Sprite,block[i].X,block[i].Y);
        setTimeout(MainLoop, 1000/60);
    }


function GameObject(img,x,y,width,height) {
    this.Sprite = new Image();
    this.Sprite.src = img;
    this.X = x;
    this.Y = y;
    this.Previous_X = this.X;
    this.Previous_Y = this.Y;
    this.Velocity_X = 0;
    this.Velocity_Y = 0;
    this.Width = width;
    this.Height = height;
    this.Gravity = 0;
    this.Weight = 0;

    this.isColliding = function(obj) {
        if (this.X > obj.X + obj.Width) return false;
        else if (this.X + this.Width < obj.X) return false;
        else if (this.Y > obj.Y + obj.Height) return false;
        else if (this.Y + this.Height < obj.Y) return false;
        else return true;
    }
}
</script>
</body>

在此代码中，//VARIABLES、//LOGIC 和 //RENDERING 处的 for 循环应该与代码底部的 GameObject 一起工作以生成 4 个副本（由 maxBlock 定义的数字变量），并将它们附加到数组block。我很确定我没有犯拼写错误，因为我已经检查了很多次并修复了我能找到的唯一错误。我该怎么做才能解决这个问题？

【问题讨论】：

被答案改变了。看看这是否有效。
请参阅下面关于将 setTimeout 移到 for 循环之外的修改后的答案。

标签： javascript html image loops object

【解决方案1】：

需要做一个大的修复，我第一次没有注意到：

for (var i=0;i<=maxBlock;i++) {
    grafx.drawImage(block[i].Sprite,block[i].X,block[i].Y);
    setTimeout(MainLoop, 1000/60);//THIS IS BAD
}

您在 for 循环中有 SetTimeout 调用，这意味着它会在每个游戏循环中设置 n 次。相反，将其移到 for 循环之外

for (var i=0;i<=maxBlock;i++) {
    grafx.drawImage(block[i].Sprite,block[i].X,block[i].Y);
  }
setTimeout(MainLoop, 1000/60);

现在角色在 Firefox 中为我移动。在它没有移动之前，脚本本质上是在调用 setTimeout 时让自己作呕。

【讨论】：

在同一个文件夹中，并且URI是正确的。这有点令人沮丧
不行，还是不行。你使用的是什么浏览器？当我在谷歌浏览器中运行它时，有一个空白屏幕。当我在 IE 中运行它时，它会显示图像但角色不会移动。
让我在 chrome 中尝试一下...我使用的是 FireFox。
Chrome 似乎已经通过其更新之一破坏了绘制图像方法。在浏览器中测试以下页面：w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage
我不认为它是 Chrome。我刚刚在 Firefox 中尝试了代码，角色没有移动，但图像确实加载了。