Размер ячеек
Есть такой код для создания поля из 12х12 ячеек.
<div id="main"></div>
<script type="text/javascript">
var main = document.getElementById( "main" );
var tileW = 50;
var tileH = 45;
for ( var i = 0; i < 12; i++ ) {
for ( var j = 0; j < 12; j++ ) {
var tile = document.createElement( "DIV" );
main.appendChild( tile );
tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
tile.style.height = tileH;
tile.style.width = tileW;
tile.style.top = tileH * i;
tile.style.left = tileW * j;
}
}
</script>
Надо сделать так, чтобы чем ближе к центру находится ячейка, тем она меньше. Ну а крайние, соответственно, больше. Было решено измерять глубину ячейки (пример для наглядности) вот такой функцией: function Q( i, j ) {
var lvl = Math.min( i, j, 11 - i, 11 - j );
return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}
Она вычисляет, на сколько умножать размеры ячейки. Т.е. для крайних (с lvl=0) будет умножаться на 1.6, а для самых центральных - на 0.4 Позицию ячейки надо теперь тоже считать по-другому, поэтому сделал для этого функцию: function S( r ) {
var s = 0;
for (var i = 0; i < r; i++) {
var t = i < 6 ? i : r - i - 1;
s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
}
return s.toFixed(1);
}
Она вместо i, j возвращает новые множители для top и left с учётом масштабирования Q() - пример работы Теперь в коде умножаю размеры ячейки на Q(i, j), а координаты - вместо top = height * i подаю top = height * S(i) и так же с left. Но получается немного не то <div id="main"></div>
<script type="text/javascript">
var main = document.getElementById( "main" );
var tileW = 50;
var tileH = 45;
for ( var i = 0; i < 12; i++ ) {
for ( var j = 0; j < 12; j++ ) {
var tile = document.createElement( "DIV" );
main.appendChild( tile );
tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
tile.style.height = tileH * Q(i, j);
tile.style.width = tileW * Q(i, j);
tile.style.top = tileH * S(i);
tile.style.left = tileW * S(j);
tile.onclick = function () { this.style.display = "none" };
}
}
function Q( i, j ) {
var lvl = Math.min( i, j, 11 - i, 11 - j );
return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}
function S( r ) {
var s = 0;
for (var i = 0; i < r; i++) {
var t = i < 6 ? i : r - i - 1;
s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
}
return s.toFixed(1);
}
</script>
Где я ошибся в расчётах, может есть готовое решение? В идеале хотелось бы задавать "центр" вручную (например, ячейки уменьшаются не чем ближе к центру, а чем ближе к ячейке i=3; j=9). |
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 21:38. |