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/

編輯應這樣做：

$('#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>