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>
