simple implementation of the main game screen, tracking a set of "enemy" units

mainGameScreen.js

  var mainGameScreen = (function () {
    
    	// the set of entities we're updating and rendering
	var entities = [];
	// how many enemy ships do we want to start with
	var numOfEnemyShips = 12;
	
	// intitalize the screen, expected to be called
	// once when transitioning to the screen
	function start() {
		for (var i = 0; i <= numOfEnemyShips; i++) {
			// the numbers passed into `makeEnemyShip` could be anything 
			// they don't need to be derived from `i`
			entities.push(makeEnemyShip(i * 10, i));
		}
	}

	// drawing the screen means drawing each of its constituents
	function draw(ctx) {
		// first, clean the canvas
		ctx.fillStyle = 'black';
		ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		
		// delegate the drawing of each entity to itself
		// note the difference in the way the for loop is set up
		var entityIndex = entities.length - 1;
		for (; entityIndex != 0; entityIndex--) {
			entities[entityIndex].draw(ctx);
		}
	}

	// much like draw, we update each of the screen's constituents
	function update(elapsed) {
		var entityIndex = entities.length - 1;
		for (; entityIndex != 0; entityIndex--) {
			entities[entityIndex].update(elapsed);
		}
	}

	// this is the object that will be the main screen
	return {
		draw: draw,
		update: update,
		start: start
	};
}());