Question

我有一个由瓷砖制成的网格。有10行，连续共有10个瓷砖。这总计在网格中有100个图块。

当点击任何图块时，我希望突出显示点击图块周围的图块。突出显示的图块应从点击的图块开始向外展开并向外展开，最多距离点击的图块有2个图块。

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

解决方案必须是可扩展的，以允许更大的网格和更大的移动距离。

以下是我目前正在做的事情：

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/

修改根据您的距离定义（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');

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

又来了：

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

JavaScript游戏网格平铺选择

3 个答案: