使用Canvas进行地图渲染时JavaScript JavaScript算法错误

Question

所以现在我有一些简单的代码来创建一个随机生成的几个图块的地图，代码：

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个参数，xOffset，yOffset和Canvas 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++;
    }
}

我的问题可以通过使用这张图片来解释：

正如你所看到的那样，每当新的yy开始时，它会使用前一个使地图变得杂乱的图块，我该如何解决？

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

Answer 1

我建议使用2d数组。像这样使用：myArray [x] [y] = value;然后有一个10 x 10 y映射的嵌套循环（我想你想要一个10乘10的映射？）并用随机磁贴填充每个myArray [x] [y]。然后，当您想要显示地图时，再次执行嵌套循环以迭代数组，并使用x和y值乘以tile width＆amp;将瓷砖放置在正确位置的高度。