Показать сообщение отдельно
  #2 (permalink)  
Старый 11.02.2017, 11:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,451

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

Последний раз редактировалось рони, 11.02.2017 в 17:34.
Ответить с цитированием