<p class="score">Score: <span id="score">0</span></p>
<div class="game"></div>

.game div {
  width:100px;
  height:100px;
  display:inline-block;
  background:blue;
  margin: 10px;  
}

.game {
  width:250px;
  margin:0 auto;
  outline: 1px solid;
}

.game .winner {
  background:red;
}

var $bus = $('<div>');

function Game() {
  var self = this;
  var _score = 0;
  var _items = _.range(4).map(function(idx) {
    return new GameItem(idx === 0);
  });
  
  self.next = function() {
    _items = _.shuffle(_items);
    $bus.trigger('game:new-round');
  };
  
  self.round_end = function(item) {
    if ( item.isWinner() ) {
      _score += 5;
    } else {
      _score -= 5;
    }
    self.next();
  };
  
  self.round_timeout = function() {
    _score -= 2;
    self.next();
  };
  
  self.getItems = function() {
    return _items;
  };  
  
  self.getScore = function() {
    return _score;
  };  
}

function GameItem(winner) {
  var self = this;
  
  self.isWinner = function() {    
    return winner;
  };
  
}

function GameUi($el_game, $el_score, game) {
  var self = this;
  var $squares;
 
  game.getItems().forEach(function(item) {
    $el_game.append('<div class="square"></div>');
  });
  $squares = $el_game.find('.square');
  
  
  self.render = function() {
    var items = game.getItems();
    
    for ( var i=0; i < items.length; i++ ) {
      var $square = $squares.eq(i);
      
      if ( items[i].isWinner() ) {
        $square.addClass('winner');
      }
      else {
        $square.removeClass('winner');          
      }
      
      $square.data('item', items[i]);
    }
    
    $el_score.html(game.getScore());
  };  
  
  $el_game.on('click', '.square', function() {
    var item = $(this).data('item');
    game.round_end(item);
  });

   $bus.on('game:new-round', function() {
    self.render();
  });
  
  self.render();

}

function GameTimer(game) {
  var self = this;
  var clock;
  self.getTimeout = function() {
    return 1000;
  };
  
  self.startTimer = function() {
    clearTimeout(clock);
    clock = setTimeout(function() {
      game.round_timeout();
    }, self.getTimeout());    
  };
  
  $bus.on('game:new-round', self.startTimer);
  
  $bus.on('pause', function() {
    clearTimeout(clock);
  });
  
  $bus.on('resume', self.startTimer);
}


var el = document.querySelector('.game');
var game = new Game();
var ui = new GameUi($('.game'), $('#score'), game);
var timer = new GameTimer(game);