JavaScript：用于创建图片副本的循环don'；行不通_Javascript_Html_Image_Loops_Object

JavaScript：用于创建图片副本的循环don'；行不通

javascript html image loops object

JavaScript：用于创建图片副本的循环don'；行不通,javascript,html,image,loops,object,Javascript,Html,Image,Loops,Object,我正在用JavaScript和HTML制作一个平台，我遇到了一个问题。一些本应复制和打印盒子（角色行走的地板）图像的代码不起作用，因此在运行它时只显示一个白色屏幕。我已经检查了浏览器的控制台，但它说没有错误。以下是HTML文件： <body onkeydown="keyDown(event)" onkeyup="keyUp(event)"> <canvas id="graphics" width=600 height=400 style="position:absolute;t

我正在用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>


//变数
var gameCanvas=document.getElementById（“图形”）；
var-grafx=gameCanvas.getContext（“2d”）；
var player=新游戏对象（“Character1NoAA.png”，100100,64,59）；
var maxBlock=4；
var block=新数组（）；
对于（var i=0；i有一个大问题需要解决，我第一次没有注意到：
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
}

用于（var i=0；iIt在同一个文件夹中，URI是正确的。这有点令人沮丧不，仍然不起作用。你使用的是什么浏览器？当我在Google Chrome中运行它时，会出现一个空白屏幕。当我在IE中运行它时，它会显示图像，但角色不会移动。让我在Chrome中尝试一下……我使用的是FireFox。看起来Chrome破坏了draw image方法及其更新之一。在浏览器中测试以下页面：我不认为它是Chrome。我只是在Firefox中尝试了代码，角色没有移动，但图像确实加载了。根据答案进行了更改。查看是否有效。请参阅下面关于将setTimeout移到for循环之外的修订答案。
for (var i=0;i<=maxBlock;i++) {
    grafx.drawImage(block[i].Sprite,block[i].X,block[i].Y);
  }
setTimeout(MainLoop, 1000/60);