Javascript-форум - Делаю игру 3 в ряд нужна помощь

vladislav1399,
...мысли вслух, без комментариев.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }

  .cell {
    text-align: center;
     float: left;
     height: 70px;
     width: 70px;
     background-color: #FFEBCD;
     font-size: 12px;
      border-radius: 50%;
      margin: 2px;
      line-height: 70px;
       color: White;
  }
  #matrix{
    display: inline-block;
    margin: 50px auto;
    border: 14px solid black;
    border-radius: 16px;
    background-color: Azure;
  }
  .cell.boom{
    -webkit-animation: up 5s ease-in-out infinite;
  -moz-animation: up 5s ease-in-out infinite;
  -o-animation: up 5s ease-in-out infinite;
  animation: up 5s ease-in-out infinite;

  }
  @keyframes up {
  50% {
      transform:  scale(.3);
  }
}
@-webkit-keyframes up {
  50% {
     transform:  scale(.3);
  }
}

  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var matrix = document.getElementById("matrix"),
        l = (Math.random() * 7 | 0) + 5;
    t = (Math.random() * 4 | 0) + 5, n = l * t;
    var color = ["ForestGreen", "DeepPink", "RoyalBlue", "Chocolate", "Gold"];

    function createMatrix() {
        var w;
        for (var i = 0; i < n; i++) {
            var div = document.createElement("div");
            div.className = "cell";
            var bg = color.length * Math.random() | 0;
            div.style.backgroundColor = color[bg];
            div.dataset.bg = bg;
            div.dataset.index = i;
            matrix.appendChild(div);
            if (i == l - 1) w = matrix.scrollWidth + 1
        }
        matrix.style.width = w + "px";
        matrix.style.height = matrix.scrollHeight + "px";
        matrix.style.display = "block"
    }
    createMatrix();
    var divs = [].slice.call(document.querySelectorAll(".cell"), 0);
    divsColl = [];

    function gIndx(i) {
        var x = i % l,
            y = i / l | 0;
        return y + t * x
    }
    for (var i = 0; i < divs.length; i++) divsColl[gIndx(i)] = divs[i];

    function h(a, b, d) {
        a = a.dataset.bg;
        b = b.dataset.bg;
        d = d.dataset.bg;
        return a == b && b == d
    }

    function chec(arr, num) {
        for (var i = 0; i < arr.length; i += num) {
            var k = arr.slice(i, i + num);
            k.forEach(function(d, i) {
                var a, b, c;
                a = k[i - 1];
                b = k[i + 1];
                if (a && b && h(a, b, d)) c = true;
                a = k[i - 1];
                b = k[i - 2];
                if (a && b && h(a, b, d)) c = true;
                a = k[i + 1];
                b = k[i + 2];
                if (a && b && h(a, b, d)) c = true;
                if (c) {
                d.innerHTML = "boom!";
                d.classList.add("boom")
                }
            })
        }
    }
    chec(divsColl, t);//проверка по вертикали
    chec(divs, l)//проверка по горизонтали
});
  </script>
</head>

<body>
<div id="matrix" ></div>

</body>
</html>