Форум

Diphenyl Oxalate · #1 (**permalink**) 11.02.2017, 09:01

Есть такой код для создания поля из 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).

рони · #2 (**permalink**) 11.02.2017, 12:35

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript