在Javascript和EaselJS的3x3數組中工作，抵消分塊tile地圖的最佳方法是什麼？

Question

我正在構建一個分塊的地圖系統，使用3x3迷你地圖塊從一個更大的地圖。在這一點上，我已經得到了它與塊的工作，但我不能完全弄清楚如何補償瓷磚類內的瓷磚，以便它相對於對象的原始x/y填充它們。它目前迭代嵌套的循環，但只顯示一個瓷磚 - 在每個對象的左上角。這是我目前有：

(function() { 

var tile = function(array, _x, _y, spritesheet) { 
    this.initialize(array, _x, _y, spritesheet); 
} 
tile.prototype = new createjs.Container(); 

tile.prototype.Container_initialize = this.initialize; 
tile.prototype.initialize = function(array, _x, _y, spritesheet) { 

    this.x = _x * 120; 
    this.y = _y * 120; 

    this.tileArray = array; 

    this.tilesheet = spritesheet; 

    this.i = 0; 

    for (this.x = 0; this.x < 3; this.x++) 
    { 
     for (this.y = 0; this.y < 3; this.y++) 
     { 
      var tileSprite = new createjs.Sprite(this.tilesheet, this.tileArray[this.x][this.y]); 
      tileSprite.x = this.x; 
      tileSprite.y = this.y; 


      this.addChild(tileSprite); 



      this.i++; 
     }  
    } 
} 

window.tile = tile; 
}()); 

任何人都可以提供關於如何解決偏移正常使用，這時所有九個瓦片被拉出的建議，而不是隻有一個？

Answer 1

佈置網格的更好方法是用一些數學方法進行一次迭代以進行佈局。

下面是一些僞代碼（沒有測試，但應該給你你想要什麼的想法）

var cols = 3; 
var rows = 3; 
for (var i = 0; i<rows*cols; i++) { 

    // Determine the row & column using simple math 
    var row = Math.floor(i/cols); 
    var col = i%cols; 

    // Create the item 
    var tileSprite = new createjs.Sprite(this.tilesheet, this.tileArray[row][col]); 
    // Note there is probably a better way to determine the item you want, you can probably 
    // use the "i" variable instead. 
    var tileSprite = new createjs.Sprite(this.tilesheet, i); 

    // Position it using width/height variables 
    tileSprite.x = col * COL_WIDTH; 
    tileSprite.y = row * ROW_HEIGHT; 
    this.addChild(tileSprite); 
}