html5 холст лист спрайтов случайные строки/столбцы

Question

На данный момент код выбирает из одной строки изображений из листа спрайтов и отображает его слева направо от экрана, то, что я хотел бы сделать, это выбрать случайные изображения, например он делает, но из другой строки, например, у меня есть 3 строки с 1 строкой из 3 разных цветных астероидов 32 на 32, 2-й ряд 3 разных цветных 64 на 64 и окончательный ряд 3 разных цветных 128 на 128. Как бы я был случайным для строк для отображения разных размеров, а также цветов

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

function Enemy() { 
this.srcX = 0; 
this.srcY = 528; 
this.width = 32; 
this.height = 33; 
this.previousSpeed = 0; 
this.speed = 2; 
this.acceleration = 0.005; 
this.imageNumber = Math.floor(Math.random()*3); 
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.imageNumber*this.width,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); 
this.checkEscaped(); 
}; 

Enemy.prototype.assignValues = function() { 

} 

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

Вы можете использовать объект для хранения всех ваших астероидов. Затем используйте случайное число в качестве ключа для получения случайного астероида.

var min = 1; 
var max = 9; 
var key = Math.floor(Math.random() * max) + min; 

var asteroids = { 
    1 :{ 
     'width' : 64, 
     'height' : 64, 
     'colour' : 'blue' 
    }, 
    2 : { 
     'width' : 64, 
     'height' : 64, 
     'colour' : 'red' 
    }, 

    //repeat until the last one.... 

    9 : { 
     'width' : 128, 
     'height' : 128, 
     'colour' : 'green' 
    } 
}; 


console.log(asteroids[key]['colour']); 
console.log(asteroids[key]['width']); 
console.log(asteroids[key]['height']);