生成并绘制瓦片地图

Question

我在将生成图块并将其绘制为两个独立函数的方法中断时遇到问题。它与一个一起工作正常，但一些未知的问题是在 2 个函数中停止它。

这是一个函数：

createBoxes: function () {
    this.ctx.clearRect(0, 0, this.ctx.width, this.ctx.height);

    this.ctx.save();
    this.ctx.fillStyle = "burlywood";
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.restore();

    var gridSpace = this.canvas.width / this.BOX.BOX_SIZE;
    var cellNum = gridSpace * gridSpace;

    //add each spawn point to an array, and set to false
    this.ctx.save();
    this.ctx.fillStyle = "black";
    for (var i = 0; i <= gridSpace;) {
        for (var j = 0; j <= gridSpace;) {
            this.cells[i, j] = false;
            this.ctx.fillRect(i * this.BOX.BOX_SIZE, j * this.BOX.BOX_SIZE, 2, 2);
            j++;
        }
        i++;
    }
    this.ctx.restore();

    //generate boxes
    this.ctx.save();
    this.ctx.fillStyle = this.BOX.BOX_COLOR;

    for (var i = 0; i < this.BOX.NUM_BOXES; i++) {
        var locX = Math.floor(getRandom(0, gridSpace));
        var locY = Math.floor(getRandom(0, gridSpace));

        //console.log(locX + ", " + locY)

        if(this.cells[locX, locY] == true) {

        } else {
            this.cells[locX, locY] = true;
        } 

        this.ctx.fillRect(locX * this.BOX.BOX_SIZE, locY * this.BOX.BOX_SIZE, this.BOX.BOX_SIZE, this.BOX.BOX_SIZE);
    }

}

在 2 中：

generateTiles: function() {
    var gridSpace = this.canvas.width / this.TILES.BOX_SIZE;
    //var cellNum = gridSpace * gridSpace;

    //clear cells array
    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {
            this.cells[i, j] = 0;
            console.log(this.cells[i,j]);
            j++;
        }
        i++;
    }

    //assign block tiles
    for (var i = 0; i < this.TILES.BLOCK_NUM; i++) {
        this.locX = Math.floor(getRandom(0, gridSpace));
        this.locY = Math.floor(getRandom(0, gridSpace));

        this.cells[this.locX, this.locY] = 1;
    }

    for (var i = 0; i < this.TILES.GOLD_NUM; i++) {
        this.locX = Math.floor(getRandom(0, gridSpace));
        this.locY = Math.floor(getRandom(0, gridSpace));

        console.log(this.locX + "," + this.locY)

        if(this.cells[this.locX, this.locY] == 0) {
            this.cells[this.locX, this.locY] = 2;
        } else {
        }
        console.log("gold generated");
    }

    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {
            console.log("Cell " + i + "," + j +  " = " + this.cells[i,j]);
            j++;
        }
        i++;
    }
}
, drawTiles: function() {
    var gridSpace = this.canvas.width / this.TILES.BOX_SIZE;
    //var cellNum = gridSpace * gridSpace;

    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {

            if(this.cells[i,j] == 1) {
                this.ctx.drawImage(stone, i * this.TILES.BOX_SIZE, j * this.TILES.BOX_SIZE, this.TILES.BOX_SIZE, this.TILES.BOX_SIZE);
            } else if (this.cells[i,j] == 2) {
                this.ctx.save();
                this.ctx.fillStyle = "gold";
                this.ctx.fillRect(0,0, i * this.TILES.BOX_SIZE, j * this.TILES.BOX_SIZE);
                this.ctx.restore();
            } else {

            }

            j++;
        }
        i++;
    }
}

从第二个块生成的模式最终看起来像这样：

22222
00000
11111
22222
22222

而不是完全随机生成。我觉得这里有一个非常明显的错误，请帮我找到它！

Answer 1

我认为问题在于您在多维数组中引用元素的方式。

而不是 this.cells[i,j] 试试 this.cells[i][j]

因此您的代码变为：

generateTiles: function() {
    var gridSpace = this.canvas.width / this.TILES.BOX_SIZE;
    //var cellNum = gridSpace * gridSpace;

    //clear cells array
    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {
            this.cells[i][j] = 0;
            console.log(this.cells[i][j]);
            j++;
        }
        i++;
    }

    //assign block tiles
    for (var i = 0; i < this.TILES.BLOCK_NUM; i++) {
        this.locX = Math.floor(getRandom(0, gridSpace));
        this.locY = Math.floor(getRandom(0, gridSpace));

        this.cells[this.locX][this.locY] = 1;
    }

    for (var i = 0; i < this.TILES.GOLD_NUM; i++) {
        this.locX = Math.floor(getRandom(0, gridSpace));
        this.locY = Math.floor(getRandom(0, gridSpace));

        console.log(this.locX + "," + this.locY)

        if(this.cells[this.locX][this.locY] == 0) {
            this.cells[this.locX][this.locY] = 2;
        } else {
        }
        console.log("gold generated");
    }

    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {
            console.log("Cell " + i + "," + j +  " = " + this.cells[i][j]);
            j++;
        }
        i++;
    }
}
, drawTiles: function() {
    var gridSpace = this.canvas.width / this.TILES.BOX_SIZE;
    //var cellNum = gridSpace * gridSpace;

    for (var i = 0; i < gridSpace;) {
        for (var j = 0; j < gridSpace;) {

            if(this.cells[i][j] == 1) {
                this.ctx.drawImage(stone, i * this.TILES.BOX_SIZE, j * this.TILES.BOX_SIZE, this.TILES.BOX_SIZE, this.TILES.BOX_SIZE);
            } else if (this.cells[i][j] == 2) {
                this.ctx.save();
                this.ctx.fillStyle = "gold";
                this.ctx.fillRect(0,0, i * this.TILES.BOX_SIZE, j * this.TILES.BOX_SIZE);
                this.ctx.restore();
            } else {

            }

            j++;
        }
        i++;
    }
}

这个问题没有影响你之前的功能，因为它实际上并没有使用数组数据。

生成并绘制瓦片地图

Generating and drawing a tile map

javascript

loops

canvas

multidimensional-array

tile