The onload
function is async, so by the time it fires the loop has completed and the value of n
is whatever it was set to last.
You have to lock the value of the n
variable in a new scope with a closure, creating a new function also creates such a scope, or like this
for(n = 0; n < monster.length; n++) {
(function(k) {
monster[k].image.onload = function() {
monster[k].ready = true;
}
monster[k].image.src = 'images/m1.png';
})(n);
}