Javascript HTML5画布-drawImage不工作（仅当出现错误时）

我正在尝试创建一个简单的画布游戏。我开始使用游戏循环（更新、渲染功能）绘制游戏的所有元素。我试图绘制简单的图像，但是当我尝试使用它的函数类的一些特性来绘制图像时，它没有显示任何内容。NET除非数组项目符号[]包含所有具有正确对象的对象

我观察到，如果我故意犯了一个错误，那就是子弹。为什么只有在发生错误时才会绘制，但并非总是如此

谢谢大家!

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Bullet class, defining it's proprieties
var Bullet = function (x,y,orientation) {
    this.x = x;
    this.y = y;
    this.speed = 512;
    this.orientation = orientation;
    if (orientation == 0)
    {
        var bulletImageUp = new Image();
        bulletImageUp.src = "images/bullet-up.png";
        this.image = bulletImageUp;
    }
    else if (orientation == 90){
        var bulletImageRight = new Image();
        bulletImageRight.src = "images/bullet-right.png";
        this.image = bulletImageRight;
    }
    else if (orientation == 180){
        var bulletImageDown = new Image();
        bulletImageDown.src = "images/bullet-down.png";
        this.image = bulletImageDown;
    }
    else if (orientation == 270){
        var bulletImageLeft = new Image();
        bulletImageLeft.src = "images/bullet-left.png";
        this.image = bulletImageLeft;
    }    
    this.draw  = function () {
        ctx.drawImage(this.image, this.x, this.y);
    }
}

// The array containing all the bullets objects
var bullets = [];

// Update game objects
var update = function (modifier) {
// When I press a key it executes 
bullets.push(new Bullet(tank.x, tank.y, tank.orientation));
};

// Draw everything
var render = function () {
    for ( i=0; i<bullets.length; i++) {
        bullets[i].draw()
    }
};

// The main game loop
var main = function () {
    var now = Date.now();
    var delta = now - then;
    update(delta / 1000);
    render();
    then = now;
};

//创建画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=512；
canvas.height=480；
document.body.appendChild（画布）；
//Bullet类，定义它的属性
变量项目符号=函数（x、y、方向）{
这个.x=x；
这个。y=y；
这个速度=512；
这个方向=方向；
如果（方向==0）
{
var bulletImageUp=新图像（）；
bulletImageUp.src=“images/bullet-up.png”；
this.image=bulletImageUp；
}
否则如果（方向==90）{
var bulletImageRight=新图像（）；
bulletImageRight.src=“images/bullet right.png”；
this.image=bulletImageRight；
}
否则如果（方向==180）{
var bulletImageDown=新图像（）；
bulletImageDown.src=“images/bullet-down.png”；
this.image=bulletImageDown；
}
否则如果（方向==270）{
var bulletImageLeft=新图像（）；
bulletImageLeft.src=“images/bullet left.png”；
this.image=bulletImageLeft；
}    
this.draw=函数（）{
ctx.drawImage（this.image，this.x，this.y）；
}
}
//包含所有项目符号对象的数组
var=[]；
//更新游戏对象
变量更新=函数（修饰符）{
//当我按下一个键时，它就会执行
推（新子弹（坦克x，坦克y，坦克方向））；
};
//画一切
var render=函数（）{
对于（i=0；ipresubly），调用
render（）
时不会加载图像。您应该预加载这4个图像，然后在
项目符号（）中
Constructor，只需指向四个已加载的图像中的一个。每次创建一个图像时，您都会加载一个新项目符号。您应该单独加载图像，将它们存储在数组中，并等待它们加载完毕。此外，您是否在任何位置使用requestAnimationFrame？是的，我使用的是requestAnimationFrame（主）；很抱歉之前没有提及。如果您为我们创建一个JSFIDLE示例，我们可以帮助您更轻松地解决问题