var player = document.querySelector('.player'),

    start = document.querySelector('#start'),

    totalHeight = player.offsetTop,

    box,

    counter = 0,

    colors= new Array("blue","green","orange","pink");

​

// ===

// === PLAYER

// ===

​

// ROTATE THE PLAYER CLOCKWISE

function play(){

  player.addEventListener('click',function(e){

    deg = 90;

    player.style.webkitTransform += 'rotate('+deg+'deg)'; 

    player.style.transform += 'rotate('+deg+'deg)';

  });

}

​

// ===

// === BOX

// ===

​

// CREATE NEW BOX

function makeNew() {

  var random = colors[Math.floor(Math.random() * colors.length)],

      box = document.createElement('span');

  box.className = random;

  document.body.appendChild(box);

  move(box,totalHeight);

}

​

// ANIMATE THE BOX

function move(elem,height) {

  var top = 0;

  function frame() {

    top++;

    elem.style.top = top + 'px';

    if (top == height){

      clearInterval(id);

    }

  }

  var id = setInterval(frame, 10);

}

​

// INIT BUTTON

start.addEventListener('click',function(e){

  makeNew();

  play()();

});