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++;
    }
}

此问题不会影响您之前的功能，因为它实际上并没有使用数组数据。

生成并绘制切片贴图

1 个答案: