Generating and drawing a tile map

Question

I am having an issue breaking a method that generates and draws tiles into two separate functions. It works fine with one, but some unknown issue is stopping it in 2 functions.

Here it is in one function:

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

}

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

The patterns generated from the 2nd block end up looking like this:

22222
00000
11111
22222
22222

as opposed to a completely random spawning. I feel there is a painfully obvious error here, please help me find it!

Answer 1

I think the issue is the way you are referencing the elements in the multi-dimensional array.

Instead of this.cells[i,j] try this.cells[i][j]

So your code becomes:

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

This issue did not affect your earlier function because it did not actually make use of the array data.