Как сделать, чтобы ячейки одного цвета не встречались вместе слева направо?

for (var a = [], i = 0; i < 16; ++i) a[i] = i; 
 
function shuffle(array) { 
  var tmp, current, top = array.length; 
  if (top) 
    while (--top) { 
      current = Math.floor(Math.random() * (top + 1)); 
      tmp = array[current]; 
      array[current] = array[top]; 
      array[top] = tmp; 
    } 
  return array; 
} 
a = shuffle(a); 
 
 
 
 
 
function shedegebi() { 
  var p = 0; 
  var l = 0; 
  var c = 0; 
 
  for (var u = 1; u < 5; u++) { 
    for (var k = 0; k < 4; k++) { 
 
      var classnumber = (a[p] + 1) / 4; 
 
      if (classnumber <= 1 && classnumber > 0) { 
        c = 1; 
      } 
      if (classnumber <= 2 && classnumber > 1) { 
        c = 2; 
      } 
      if (classnumber <= 3 && classnumber > 2) { 
        c = 2; 
      } 
      if (classnumber <= 4 && classnumber > 3) { 
        c = 4; 
      } 
 
      var x = document.getElementsByClassName("footboll"); 
      x[l].innerHTML = c + "x" + (a[p] % 4); 
      x[l].className = "footboll-grup_" + c + " fadeIn animated "; + 
      l; 
      p++; 
 
    } 
  } 
 
}

* { 
  margin: 0 auto; 
} 
 
body { 
  background: black 
} 
 
.cont { 
  width: 900px; 
  height: 550px; 
  margin-top: 5%; 
} 
 
.line { 
  width: 100%; 
  height: 25%; 
  position: relative; 
  float: left; 
} 
 
.footboll { 
  border-radius: 5px; 
} 
 
.match { 
  border-radius: 2px; 
  border: solid 1px #669999; 
  width: 49%; 
  height: 100%; 
  float: left; 
} 
 
.footboll-grup_1 { 
  width: 40%; 
  text-align: center; 
  font-size: 40px; 
  color: white; 
  height: 80%; 
  float: left; 
  margin-left: 5.5%; 
  margin-right: 2.5%; 
  background: #006666; 
  margin-top: 1%; 
} 
 
.footboll-grup_2 { 
  text-align: center; 
  font-size: 40px; 
  color: white; 
  width: 40%; 
  height: 80%; 
  float: left; 
  margin-left: 5.5%; 
  margin-right: 2.5%; 
  background: #00cc66; 
  margin-top: 1%; 
} 
 
.footboll-grup_3 { 
  width: 40%; 
  text-align: center; 
  font-size: 40px; 
  color: white; 
  height: 80%; 
  float: left; 
  margin-left: 5.5%; 
  margin-right: 2.5%; 
  background: #999966; 
  margin-top: 1%; 
} 
 
.footboll-grup_4 { 
  width: 40%; 
  text-align: center; 
  font-size: 40px; 
  color: white; 
  height: 80%; 
  float: left; 
  margin-left: 5.5%; 
  margin-right: 2.5%; 
  background: #800000; 
  margin-top: 1%; 
} 
 
button { 
  margin-top: 4%; 
  margin-left: 40%; 
  width: 150px; 
  height: 30px; 
}

<div class="cont  fadeInUp animated"> 
  <div class="line "> 
    <div class="match fadeInLeft animated"> 
      <div class="footboll footboll-grup_1"> 
        1x0 
      </div> 
 
      <div class="footboll footboll-grup_1"> 
        1x1 
      </div> 
    </div> 
    <div class="match fadeInRight animated"> 
      <div class="footboll footboll-grup_1"> 
        1x2 
      </div> 
 
      <div class="footboll footboll-grup_1"> 
        1x3 
      </div> 
    </div> 
  </div> 
  <div class="line"> 
    <div class="match fadeInLeft animated"> 
      <div class="footboll footboll-grup_2"> 
        2x0 
      </div> 
 
      <div class="footboll footboll-grup_2"> 
        2x1 
      </div> 
    </div> 
    <div class="match fadeInRight animated"> 
      <div class="footboll footboll footboll-grup_2"> 
        2x2 
      </div> 
 
      <div class="footboll footboll-grup_2"> 
        2x3 
      </div> 
    </div> 
  </div> 
  <div class="line"> 
    <div class="match fadeInLeft animated"> 
      <div class="footboll footboll-grup_3"> 
        3x0 
      </div> 
 
      <div class="footboll footboll-grup_3"> 
        3x1 
      </div> 
    </div> 
    <div class="match fadeInRight animated"> 
      <div class="footboll footboll-grup_3"> 
        3x2 
      </div> 
 
      <div class="footboll footboll-grup_3"> 
        3x3 
      </div> 
    </div> 
  </div> 
  <div class="line"> 
    <div class="match  fadeInLeft animated"> 
      <div class="footboll footboll-grup_4"> 
        4x0 
      </div> 
 
      <div class="footboll footboll-grup_4"> 
        4x1 
      </div> 
    </div> 
    <div class="match fadeInRight animated"> 
      <div class="footboll footboll-grup_4"> 
        4x2 
      </div> 
 
      <div class="footboll footboll-grup_4"> 
        4x3 
      </div> 
    </div> 
  </div> 
  <div class="line"> 
    <button type="button" onclick="shedegebi()">Click Me!</button> 
 
  </div> 
 
</div>