r1sus,
кликать по кнопкам слева от блока, окончание игры фиксируйте самостоятельно
<!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: 23px;
width: 23px;
border: #0000CD 1px solid;
background-color: #FFEBCD;
font-size: 12px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#matrix{
display: inline-block;
margin: 50px auto;
}
#color{
margin: 50px auto;
position: relative;
}
.but {
text-align: center;
height: 23px;
width: 23px;
margin: 12px;
border-radius: 4px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var matrix = document.getElementById("matrix"),
l = (Math.random() * 15 | 0) + 10;
t = (Math.random() * 10 | 0) + 10, n = l * t,
color = document.getElementById("color");
function createColorBg(num) {
var temp = [];
for (var i = 0; i < num; i++) temp[i] = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
return temp
}
function rund(num) {
return Math.floor(Math.random() * num)
}
function createBut(bgColor)
{
bgColor.forEach(function(clr, i) {
var div = document.createElement("div");
div.className = "but";
div.style.backgroundColor = bgColor[i];
div.addEventListener("click", function(event) {
currentColor = divs[0].dataset.bg;
newColor = i;
wave(0)
})
color.appendChild(div);
})
}
function createMatrix(numColor) {
var w;
for (var i = 0; i < n; i++) {
var div = document.createElement("div");
div.className = "cell";
div.dataset.index = i;
var num = rund(numColor);
div.dataset.bg = num;
div.style.backgroundColor = bgColor[num];
matrix.appendChild(div);
if (i == l - 1) w = matrix.offsetWidth + 1
}
matrix.style.width = w + "px";
matrix.style.display = "block"
}
function chec(indx, size) {
var s = [],
x = indx % l,
y = indx / l | 0;
size = size || 1;
for (var i = y - size; i <= y + size; i++)
for (var k = x - size; k <= x + size; k++) {
var num = k + i * l;
i > -1 && i < t && k > -1 && k < l && num < i * l + l && s.push(num)
}
return s
}
var numColor = 3;
var bgColor = createColorBg(numColor);
createMatrix(numColor);
var divs = [].slice.call(document.querySelectorAll(".cell"), 0);
var currentColor;
var newColor;
createBut(bgColor);
function wave(index) {
var elems = chec(index);
elems.forEach(function(indx) {
var bg = divs[indx].dataset.bg;
if (bg == currentColor && bg != newColor) {
divs[indx].dataset.bg = newColor;
divs[indx].style.backgroundColor = bgColor[newColor];
window.setTimeout(function() {
wave(indx)
}, 300)
}
})
}
});
</script>
</head>
<body>
<div id="matrix" ></div>
<span id="color" ></span>
</body>
</html>