HTML5 холст лист спрайтов случайное изображение

Question

На данный момент код выбирает одно изображение из листа спрайтов и отображает его по экрану, то, что я хотел бы сделать, это выбрать случайные изображения по строке и отобразить их в игре, для Например, я хочу, чтобы красные/розовые/зеленые астероиды отображались, но на данный момент он просто показывает зеленые.

Это текущий код, любая помощь будет фантастической.

function Enemy() { 
    this.srcX = 0; 
    this.srcY = 0; 
    this.width = 64; 
    this.height = 64; 
    this.previousSpeed = 0; 
    this.speed = 2; 
    this.acceleration = 0.005; 
    this.drawX = Math.floor(Math.random() * 1000) + gameWidth; 
    this.drawY = Math.floor(Math.random() * gameHeight); 
    this.collisionPointX = this.drawX + this.width; 
    this.collisionPointY = this.drawY + this.height; 
} 

Enemy.prototype.draw = function() { 
    this.drawX -= this.speed; 
    ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); 
    this.checkEscaped(); 
}; 

Enemy.prototype.checkEscaped = function() { 
    if (this.drawX + this.width <= 0) { 
     this.recycleEnemy(); 
    } 
}; 

Enemy.prototype.recycleEnemy = function() { 
    this.drawX = Math.floor(Math.random() * 1000) + gameWidth; 
    this.drawY = Math.floor(Math.random() * gameHeight); 
}; 

function clearCtxEnemy() { 
    ctxEnemy.clearRect(0, 0, gameWidth, gameHeight); 
} 

Answer 1

Добавьте переменную, чтобы решить, какое изображение использовать

function Enemy() {
...
this.imageNumber = Math.floor(Math.random()*3);
...
}

При рисовании использовать эту переменную, чтобы определить, какое изображение использовать.

Enemy.prototype.draw = function() {
...
ctxEnemy.drawImage(imgSprite,this.srcX+this.imageNumber* this.width,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
...
}