无法在for循环中绘制画布图像

Question

我有一个问题要理解为什么我无法在画布上绘制多个图像 我编写了一个更大的游戏，我的日常工作，但从头开始，因为我无法立刻发射子弹。它总是只绘制第二个实例。

如何使用For-loop绘制多个图像或者我是否犯了一些错误？ 我的意思是最后他画了一张照片和所有的矩形，但不是两者之间的图像？另外我读了很多preoloading，但是我创建了一个实例的父图像是否已加载？

就像说它在其他HTML中工作，我不知道什么时候能够绘制图像，什么时候不能。 Atm我想绘制3张图片，但它只绘制一张图片，虽然绘制了矩形所以for -loop正在做它的工作

以下是代码：

＆＃13;

＆＃13;

function createNew() 
{
new Usership2(300,300,'green',0);
}
window.requestAnimationFrame = function() {
	return window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		function(f) {
			window.setTimeout(f,1e3/60);
		}
}();
					var Obj = function (x,y,sp,size){
						this.size = size;
						this.x = x;
						this.y = y;
					    this.color = sp;
					}
					var Usership = function(x,y,sp,imagenumber){
					this.depot = 10;
					this.type = 'Usership';
					this.xtype = new Obj(x,y,sp,10);
					w.objects.push(this);
					Usership.prototype.update =function (x,y) {  
					}
					Usership.prototype.render =function () {  
					ctx.save();
				    ctx.beginPath();
					ctx.fillStyle = this.xtype.color;
					ctx.fillRect(this.xtype.x, this.xtype.y,this.xtype.size,this.xtype.size);
					ctx.drawImage(imgObjs[imagenumber],x,y)
					ctx.fill();
				    ctx.restore();
					}
					}
					var Usership2 = function(x,y,sp,imagenumber){
					this.depot = 10;
					this.type = 'Usership';
					this.xtype = new Obj(x,y,sp,10);
					w.objects.push(this);
					Usership2.prototype.update =function (x,y) {  

					}
					Usership2.prototype.render =function () {  
					ctx.save();
				    ctx.beginPath();
					ctx.fillStyle = this.xtype.color;
					ctx.fillRect(this.xtype.x, this.xtype.y,this.xtype.size,this.xtype.size);
					ctx.drawImage(imgObjs2[imagenumber],x,y)
					ctx.fill();
				    ctx.restore();
					}
					}
					var World = function(){     
						this.objects = new Array();
						this.count = function(type,sp){
							var cnt = 0;    
							for(var k = 0;k<this.objects.length;k++)
							cnt++;
						return cnt;
						}
					}
					renderWorld = function(){
						var spliceArray = Array();
						ctx.beginPath();
						objcnt = w.objects.length;
						ctx.clearRect(0, 0, canvas.width, canvas.height);
					    ctx.fillStyle = "white";
						ctx.fill();   
						i = 0;
						while(i < objcnt){         
					    w.objects[i].update();        
						w.objects[i].render();    
						if(w.objects[i].depot < 1)
						spliceArray.push(i);       				
						i++;   
						}
						for(var k = 0;k<spliceArray.length;k++)  
						{
						w.objects.splice(spliceArray[k],1);  }
			            requestAnimationFrame(renderWorld);
					}
					 
						canvas = document.getElementById("canvas");
						ctx = canvas.getContext("2d"),
						width = 1024,
						height = 768;
					    images = ['https://i.stack.imgur.com/rsH6n.png'];
						imgObjs = new Array(images.length);
						for (var i=0; i<images.length; i++) {
						imgObjs[i] = new Image();
						imgObjs[i].src = images[i];
						} 
						images2 = ['https://i.stack.imgur.com/rsH6n.png'];
						imgObjs2 = new Array(images2.length);
						for (var i=0; i<images.length; i++) {
						imgObjs2[i] = new Image();
						imgObjs2[i].src = images2[i];
						} 
						w = new World();
						//new Usership(100,100,'green',0);
					    for (var i=0; i<3; i++) {
						new Usership2(i*10,i*10,'green',0);
						}
						requestAnimationFrame(renderWorld);

＆＃13;

<canvas style="z-index:1" width="1024" height="768" id="canvas"></canvas>
<input type="button" style="z-index:2; position:absolute; top:50; left:10" value="Create" onCLick="createNew()">
<input type="button" style="z-index:2; position:absolute; top:100; left:10" value="down" onCLick="delete()">

＆＃13;

＆＃13;

＆＃13;