|
Сообщение от Diphenyl Oxalate
|
|
В идеале хотелось бы задавать "центр" вручную
|
...из былого ...
... провести по таблице курсором
<!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: #FF0F0F;
}
.cell:hover{
border-radius: 4px;
background: #0000CD;
}
.yellow{
background: #FFFF00;
}
.green{
background: #008000;
}
.blue{
background: #0000FF
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var matrix = document.getElementById('matrix'),
l = 24, //ширина можно менять
t = 16, //высота
n = l * t;
function createMatrix() {
var w;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
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 = [], m = [],
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),m.push(max) )
}
}
return {s : s, m : m}
}
createMatrix(); //создание поля игры
var divs = [].slice.call(document.querySelectorAll('.cell'),0); //массив клеток с которым будем работать
var Q = [1, .8, .6, .4 ]
matrix.addEventListener('mousemove', function (event) {
var el = event.target, cls = el.classList;
if(cls && cls.contains('cell')) {
var index = el.dataset.index;
var arr = chec(index, 3);
divs.forEach(function(el,i) {
var k = arr.s.indexOf(i);
var m = arr.m[k];
m = Q[m];
m = 'scale('+m+')'
k !== -1 ? (el.classList.add('red'),el.innerHTML=arr.m[k],el.style.transform = m ): (el.classList.remove('red'),el.innerHTML='', el.style.transform = '');
});
}
});
});
</script>
</head>
<body>
<div id="matrix" ></div>
</body>
</html>