錯誤的JavaScript算法地圖與帆布

渲染所以現在我有一些簡單的代碼與一對夫婦的瓷磚是隨機生成的，代碼創建地圖：錯誤的JavaScript算法地圖與帆布

function generateMap() { 
    for (var y = 0; y < this.height; y++) { 
     for (var x = 0; x < this.width; x++) { 
      this.map[x + y * this.width] = Math.round(Math.random() * (this.tileset.length - 1)); 
     } 
    } 

    this.map[this.width * this.height] = Math.round(Math.random() * (this.tileset.length - 1)); 
}

這裏是繪製代碼圖（它使用3個參數，X偏移，Y偏移，和帆布2dcontext對象）：

function renderMap(xOff, yOff, g) { 
    var wPort = Math.ceil(WIDTH/64); 
    var hPort = Math.ceil(HEIGHT/64); 
    var xx = 0; 
    var yy = 0; 

    for (var y = this.yTile; y < this.yTile+hPort+2; y++) { 
     xx = 0; 
     for (var x = this.xTile; x < this.xTile+wPort+2; x++) { 
      var fTile = x + y * this.width; 

      if (fTile > this.width*this.height || fTile < 0 || x < 0 || x > this.width || y < 0 || y > this.height) { 
       this.overheaptile.render(xOff + this.xOff + xx * 64 - 128, yOff + this.yOff + yy * 64 - 128, g); 
      } else { 
       this.tileset[ this.map[fTile] ].render(xOff + this.xOff + xx * 64 - 128, yOff + this.yOff + yy * 64 - 128, g); 
      } 

      if (debug) { 
       g.fillText(fTile, xOff + this.xOff + xx * 64 - 100, yOff + this.yOff + yy * 64 - 94); 
       g.strokeRect(xOff + this.xOff + xx * 64 - 128, yOff + this.yOff + yy * 64 - 128, 64, 64); 
      } 

      xx++; 
     } 
     yy++; 
    } 
}

我的問題可以通過使用這個圖象來解釋：

Problem

正如你所看到的，每當一個新的yy開始時，它會使用前一個使地圖加密的tile，我該如何解決這個問題？

COMPLETE MAP JS FILE：https://dl.dropboxusercontent.com/u/48864953/map.js

來源

2014-10-31 MrBurnedPotato

由於邏輯奇怪，代碼很難理解。我會建議使用2d數組。 myArray [x] [y] = value;然後有一個10 x 10 y的地圖（我認爲你需要一個10乘10的地圖？）的嵌套循環，並用隨機圖塊填充每個myArray [x] [y]。然後，當您想要顯示地圖時，再次執行嵌套循環來遍歷數組，並使用乘以瓦片寬度和高度的x和y值將瓦片放置在正確的位置。 – 2014-10-31 19:16:50

啊，謝謝你，我會試試看！ – MrBurnedPotato 2014-10-31 19:33:55

我修好了，它完全正常工作，謝謝！如果你可以回答這個答案，我會將其標記爲'回答我的問題'。 – MrBurnedPotato 2014-10-31 22:24:40

我建議使用2D陣列。像這樣使用：myArray [x] [y] = value;然後有一個10 x 10 y的地圖（我認爲你需要一個10乘10的地圖？）的嵌套循環，並用隨機圖塊填充每個myArray [x] [y]。然後，當您要顯示地圖時，再次執行嵌套循環來遍歷數組，並使用乘以寬度&高度的x和y值將拼貼放在正確的位置。

來源

2014-11-02 19:29:23

錯誤的JavaScript算法地圖與帆布

回答

相關問題