Space Invaders Part 1

HTML

<div id="stage"></div>

CSS

#stage {
  background: lightgreen;
}
.invader {
  position: relative;
  top: 0;
  width: 10px;
  height: 10px;
  background: black;
}

JavaScript

var invaders = {};
var invaderCount = 0;
var stage = $('#stage');

function setupStage() {
  stage.width($(window).width());
  stage.height($(window).height());
}

function makeInvader() {
  var random = Math.ceil(Math.random() * $(stage).width());
  var newInvader = $('<div id="invader'+ invaderCount + '"class="invader"></div>');
  invaders['invader'+invaderCount] = {};
  invaders['invader'+invaderCount].element = newInvader;
  newInvader.css('left', random);
  stage.append(newInvader);
  invaderCount++;
}

function animate() {
  var tmpCount = 0;
  var elem, top;

  
  var loop = setInterval(function() {
    for(var invader in invaders) {
      elem = invaders[invader].element;
      print(elem);
      top = parseFloat(elem.css('top'), 10); 
      elem.css('top', top+=10);  
    }
    print(tmpCount);
    tmpCount++;
    if(tmpCount > 5) {
      clearInterval(loop);
    }
  }, 500);
  
}

function placeInvader() {
  
}

function animateInvader() {
  
}

function print(msg) {
 console.log(msg); 
}

function init() {
   setupStage();
  for(var i = 0; i < 3; i++) {
    makeInvader();
  }
  animate();
}

init();