正しく隣接セルを検出する方法

Question

学習プロジェクトとして、ユーザーが同じ色の四角形を接続する必要のあるhtmlキャンバスグリッドを持つ単純な論理ゲームを作成しています。

隣接セルのプロパティ（色）が検出されず、条件が一致している（隣接する色が私と異なる場合）、セルを埋めてはいけません。

私の質問は： 1）ターゲット塗りつぶしがカラー塗りつぶしのために実行可能かどうかを確認する良い方法はありますか？

2）ある場合は、新しいセルのクリックを正しく処理するにはどうすればよいですか？

function checkNeighbourTiles(aX, aY) { 
 
    var coords = [ 
 
    [(aX - 1), (aY - 1)], 
 
    [(aX - 1), (aY)], 
 
    [(aX - 1), (aY + 1)], 
 
    [(aX), (aY - 1)], 
 
    [(aX), (aY + 1)], 
 
    [(aX + 1), (aY - 1)], 
 
    [(aX + 1), (aY - 1)], 
 
    [(aX + 1), (aY + 1)] 
 
    ] 
 

 
    for (i = 0; i < coords.length; i++) { 
 
    var x = coords[i][0] 
 
    var y = coords[i][1] 
 
    var b = cells[x][y] 
 
    } 
 
}

私のコード今のところ - jsfiddle

Answer 1

複雑さとパフォーマンスの制約によって異なります。以前のように直接ルックアップテーブルは、単純なグリッドルックアップの場合ほど効率的ですが、オフセットアレイを1回作成するたびにルックアップアレイを作成するのではなく、それを行うには程度の最も簡単な方法である2D配列のタイプについては

// an array of offset coordinates in pairs x,y 8 pairs skipping the center 
const NEIGHBOURS = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; 

const GIRD_SIZE = 10; // 10 by ten grid 
function checkNeighbourTiles(x,y){ 
    var lx, ly, cellResult; 
    var i = 0; 
    while(i < 16){ // check for each offset 
     lx = x + NEIGHBOURS[i++]; // get the x offset 
     ly = y + NEIGHBOURS[i++]; // get the y offset 
     // ensure you are inside the grid 
     if(ly >= 0 && ly < GRID_SIZE && lx >= 0 && lx < GRID_SIZE){ 
      cellResult = cell[lx][ly]; 
      // do what is needed with the result; 
     } 
    } 
} 

。

代替案は、各セルが保持している隣接セルへの参照配列をリンクした配列です。 こうして（そして簡潔さを念頭に置いて）右上と左下のちょうど左上。あなたは

の上にあるセル見つけたい場合は、任意の時点で、その後の適切な細胞

// first add all the cells to the array 
// then for each cell call this 
function AddCell(cell,x,y){ 
    cell.top = cells[x][y-1]; 
    cell.left = cells[x-1][y]; 
    cell.right = cells[x+1][y]; 
    cell.bottom = cells[x][y+1]; 
    // also the cells you just reference should also reference back 
    // where top refs botton and left refs right and so fourth. 
    cells.top.bottom = cell; 
    cells.bottom.top = cell; 
    cells.left.right = cell; 
    cells.right.left = cell; 

} 

にあなたが参照を設定するセルを追加するときに、各セルは、その後

cell = { 
    top : undefined, 
    left : undefined, 
    right : undefined, 
    bottom : undefined, 
    ... other data 
} 

ようになります。

//x and y are the cell 
var cellAbove = cell[x][y].top; 

このメソッドには、デッドセルやセルのスキップなど複雑なリンクが開始されたり、セルを挿入してグリッドのトポロジを変更したりするときに多くの利点があります。

また、2のような複雑な検索は

resultCall = cell[x][y].left.left.bottom; // returns the cell two left one down 

ダウン1を残してくださいすることができます。しかし、あなたの方法があり、単純な2次元グリッドのように、関連する余分なコードがたくさんあるとして、リンクを維持するための痛みですベスト。

Answer 2

正方形を選択するためのクリーンな方法は、ループを使用している場合があります。

function (x, y){ 
    var coords = []; 
    for(i = (x-1); i < (x+2); i++){ 
     for(j = (y-1); j < j (y+2); j++){ 
      coords.push([i, j]); 
     } 
    } 

    //rest of the code 
} 

あなたは[0で四角をチェックすると、 0]の場合、このコードは[-1、-1]で四角を検索します。適切な正方形を除外するために、真剣なif文が必要になります。

同様に、9x9グリッドを持ち、[8、8]を検索すると、コードは最終的に[9,9]の正方形を探して境界から外れます。