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

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

.game {
  width:250px;
  margin:0 auto;
  outline: 1px solid;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
}

.game .winner {
  background:red;
}

(function() {
  
}());

var score = 0;
var winner_index = 0;

var el = {
  score: document.querySelector('#score'),
  game: document.querySelector('.game'),
  squares: document.querySelectorAll('.game div')
};

var timer;
function timeout(skip) {
  if (timer) {
    clearTimeout(timer);
  }
  
  if(!skip) {
      score -= 2;
  }
  
  timer = setTimeout(timeout, 1000);
  shuffle();
}

function shuffle() {
  winner_index = Math.floor(Math.random() * 4);
  render();  
}

// called after a user clicks on an element
function check_round(ev) {
  if (ev.target.classList.contains('game')) {
    return;
  }
  
  if (ev.target.classList.contains('winner')) {
    score += 5;
  } else {
    score -= 5;
  }  
 
  timeout(true);
}


function render() {
  el.score.innerHTML = score;
  
  var current_winner = el.game.querySelector('.winner');
  var next_winner = el.squares[winner_index];
  
  current_winner.classList.remove('winner');
  next_winner.classList.add('winner');
}

el.game.addEventListener('click', check_round);