JavaScript Выбор сетки для плитки

Question

У меня есть сетка, выполненная из плитки. Есть 10 рядов, в общей сложности 10 плиток подряд. Это составляет 100 плиток в сетке.

При нажатии любой плитки я хотел бы, чтобы плитки вокруг щелкнутой плитки были выделены. Выделенные плитки должны начинаться с плитки и раскладываться наружу, причем максимум от плитки до двух плиток.

До сих пор мне удалось получить плитки сверху, справа, снизу и слева для выделения, однако мне все еще не хватает плитки вокруг них. Форма должна формировать бриллиант вокруг щелканной плитки.

JSFiddle

Раствор должен быть расширяемым, чтобы для больших сетей и больших расстояний на перемещение плиток.

Вот что я сейчас делаю:

var Move = function() { 

    var that = this; 

    this.grid = { 
     width: 10, 
     height: 10 
    }; 

    this.showMoveableTiles = function() { 
     var movableTiles = 2; 
     var row = $(this).data('row'); 
     var tile = $(this).data('tile'); 

     $('.tile').removeClass('moveable'); 

     // Left 
     $(this).prevAll('[data-row="' + row + '"]:lt(' + movableTiles + ')').addClass('moveable'); 

     // Right 
     $(this).nextAll('[data-row="' + row + '"]:lt(' + movableTiles + ')').addClass('moveable'); 

     for (var i = 1; i <= movableTiles; i++) { 
      // Top 
      $('[data-row="' + (row - i) + '"][data-tile="' + tile + '"]').addClass('moveable'); 

      // Bottom 
      $('[data-row="' + (row + i) + '"][data-tile="' + tile + '"]').addClass('moveable'); 
     } 
    }; 

}; 

var move = new Move(); 

$(document).on('mousedown', '.tile', move.showMoveableTiles); 

Что является лучшим способом для достижения этой цели?

Answer 1

Просто фильтр плитки, которые желаемое расстояние (и исключить щелкнул плитки), как этот

$('#grid .tile').filter(function(){ 
      return Math.abs($(this).data('row') - row) <= movableTiles && Math.abs($(this).data('tile') - tile) <= movableTiles && !($(this).data('row') == row && $(this).data('tile') == tile) 
}).addClass('moveable'); 

http://jsfiddle.net/z6vbzjz0/2/

EDIT Фильтрация в соответствии с расстоянием четкости (Manhatten-Distance) должны быть сделано следующим образом:

$('#grid .tile').filter(function(){ 
      return (Math.abs($(this).data('row') - row) + Math.abs($(this).data('tile') - tile))<= movableTiles && !($(this).data('row') == row && $(this).data('tile') == tile) 
     }).addClass('moveable'); 

http://jsfiddle.net/z6vbzjz0/4/

Answer 2

Быстрая реализация будет добавить их к вашей showMoveableTiles функции:

 //Top Left 
     $('[data-row="' + (row - 1) + '"][data-tile="' + (tile -1) + '"]').addClass('moveable'); 
     //Bottom Left 
     $('[data-row="' + (row + 1) + '"][data-tile="' + (tile -1) + '"]').addClass('moveable'); 
     //Top Right 
     $('[data-row="' + (row - 1) + '"][data-tile="' + (tile + 1) + '"]').addClass('moveable'); 
     //Bottom Right 
     $('[data-row="' + (row + 1) + '"][data-tile="' + (tile + 1) + '"]').addClass('moveable'); 

Надеется, что это помогает!

Answer 3

Пожалуйста, смотрите этот jsfiddle: http://jsfiddle.net/z6vbzjz0/3/

Добавить эти строки в showMoveableTiles функции:

 //top corners 
     $('[data-row=' + (row - 1) + '][data-tile=' + (tile - 1) + ']').addClass('moveable'); 
     $('[data-row=' + (row - 1) + '][data-tile=' + (tile + 1) + ']').addClass('moveable'); 
     //bottom corners 
     $('[data-row=' + (row + 1) + '][data-tile=' + (tile - 1) + ']').addClass('moveable'); 
     $('[data-row=' + (row + 1) + '][data-tile=' + (tile + 1) + ']').addClass('moveable'); 

Это в основном только смотрит на текущей плитки и строки и добавляет или вычитает в селекторе Jquery добавить класс moveable для плиток в любом углу.

Здесь снова:

var Move = function() { 
 

 
    var that = this; 
 

 
    this.grid = { 
 
     width: 10, 
 
     height: 10 
 
    }; 
 

 
    this.showMoveableTiles = function() { 
 
     var movableTiles = 2; 
 
     var row = $(this).data('row'); 
 
     var tile = $(this).data('tile'); 
 

 
     $('.tile').removeClass('moveable'); 
 

 
     // Left 
 
     $(this).prevAll('[data-row="' + row + '"]:lt(' + movableTiles + ')').addClass('moveable'); 
 

 
     // Right 
 
     $(this).nextAll('[data-row="' + row + '"]:lt(' + movableTiles + ')').addClass('moveable'); 
 
     
 
     for (var i = 1; i <= movableTiles; i++) { 
 
      // Top 
 
      $('[data-row="' + (row - i) + '"][data-tile="' + tile + '"]').addClass('moveable'); 
 

 
      // Bottom 
 
      $('[data-row="' + (row + i) + '"][data-tile="' + tile + '"]').addClass('moveable'); 
 
     } 
 
     
 
     //top corners 
 
     $('[data-row=' + (row - 1) + '][data-tile=' + (tile - 1) + ']').addClass('moveable'); 
 
     $('[data-row=' + (row - 1) + '][data-tile=' + (tile + 1) + ']').addClass('moveable'); 
 
     //bottom corners 
 
     $('[data-row=' + (row + 1) + '][data-tile=' + (tile - 1) + ']').addClass('moveable'); 
 
     $('[data-row=' + (row + 1) + '][data-tile=' + (tile + 1) + ']').addClass('moveable'); 
 
    }; 
 

 
}; 
 

 
var makeGrid = function (width, height) { 
 
    var tiles = ''; 
 

 
    for (var row = 0; row < height; row++) { 
 
     for (var tile = 1; tile <= width; tile++) { 
 
      tiles += '<div class="tile" data-tile="' + tile + '" data-row="' + (row + 1) + '"></div>'; 
 
     } 
 
    } 
 

 
    $('#grid').append(tiles); 
 
}; 
 

 
var move = new Move(); 
 

 
makeGrid(10, 10); 
 

 
$(document).on('mousedown', '.tile', move.showMoveableTiles);

#grid { 
 
    width: 300px; 
 
    cursor: pointer; 
 
} 
 

 
.tile { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #777; 
 
    outline: 1px solid goldenrod; 
 
    float: left; 
 
} 
 

 
.tile:hover { 
 
    background-color: #999; 
 
} 
 

 
.moveable { 
 
    background-color: #add8e6; 
 
} 
 

 
.moveable:hover { 
 
    background-color: #c8ebf7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="grid"></div>