JavaScript游戏网格贴图选择

Question

我有一个由瓷砖制成的网格。一共有10行，每行总共有10块瓷砖。这总共有100个贴图。

当任何瓷砖被单击时，我希望周围的瓷砖被选中的瓷砖突出显示。高亮显示的贴图应该从被点击的贴图开始，并向外扩展，最多距离被点击的贴图2个贴图。

到目前为止，我已经设法让瓷砖的顶部，右侧，底部和左侧突出显示，但我仍然缺少这些瓷砖。这个形状应该在被点击的贴图周围形成一个菱形。

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/

编辑根据距离定义(manhattan - 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');

这基本上只是查看当前的tile和row，并在jquery选择器中添加或减去moveable类以添加到任意角落的tile。

又来了:

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>