生成并绘制切片贴图(Generating and drawing a tile map)

我遇到了一个问题，它会产生一个方法来生成并绘制成两个独立的函数。它适用于一个，但一些未知的问题是在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

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

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:

}

and in 2:

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!

更多推荐