yaparoff,
запусти кроликов в огород (клик по полю)
<!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;
}
.red{
border-radius: 4px;
background-image: url(http://www.smayly.ru/gallery/big/vkBunny/12.png);
background-repeat: no-repeat;
background-size: cover;
}
.yellow{
background: #FFFF00;
}
.green{
background-image: url(http://moyhutor.net/images/klubnika2.png);
background-repeat: no-repeat;
background-size: cover;
}
.blue{
background: #0000FF
}
</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;
function createMatrix() {
var w;
for (var i = 0; i < n; i++) {
var div = document.createElement("div");
div.className = "cell";
Math.random() < .07 && div.classList.add("green");
div.dataset.index = i;
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,
max = Math.max(Math.abs(i - y), Math.abs(k - x));
i > -1 && i < t && k > -1 && k < l && num < i * l + l && num != indx? s.push(num): s.push(null)
}
return {
s: s
}
}
createMatrix();
var divs = [].slice.call(document.querySelectorAll(".cell"), 0);
matrix.addEventListener("click", function(event) {
var el = event.target,
cls = el.classList;
if (cls && cls.contains("cell") && !cls.contains("green") && !cls.contains("red")) {
var index = el.dataset.index;
move(index, Math.random() * 8 | 0)
}
});
function move(index, num) {
var arr = chec(index, 1);
m = [];
var k = arr.s.filter(function(indx,i) {
return indx !== null && !divs[indx].classList.contains("green") && !divs[indx].classList.contains("red") && indx != index && m.push(i)
});
if (k.length) {
divs[index].classList.remove("red");
if (m.indexOf(num) == -1|| Math.random() < .17) num = m[Math.floor(Math.random() * m.length)];
k = arr.s[num];
divs[k].classList.add("red");
window.setTimeout(function() {
move(k, num)
}, 500)
}
else window.setTimeout(function() {
move(index, num)
}, 2000)
}
});
</script>
</head>
<body> <p></p>
<div id="matrix" ></div>
</body>
</html>