When outside of the function scope, Tiles[[]] loses all of it's values.
var Tiles= [[]];
function drawGrid(){
Grid=true;
// for the amout of rows
for (let rowcount = 0; rowcount < amountOfrows; rowcount++) {
ctxB.lineWidth = 1;
// filling the rows
// check for (un)even
if(rowcount%2==0){
for (let boxcount = 0; boxcount < amountOfHorBoxes; boxcount++) {
ctxB.strokeStyle = "black";
ctxB.fillStyle = "white";
ctxB.beginPath();
ctxB.rect(addHorBox, addVertBox, boxsize, boxsize);
ctxB.fill();
ctxB.closePath();
ctxB.stroke();
Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
//console.log('Tiles:',Tiles[rowcount[boxcount]]);
addHorBox+=boxsize;
}
}else{
for (let boxcount = 0; boxcount < amountOfHorBoxes; boxcount++) {
ctxB.strokeStyle = "black";
ctxB.fillStyle = "white";
ctxB.beginPath();
ctxB.rect(addHorBox+boxsize/2, addVertBox, boxsize, boxsize);
ctxB.fill();
ctxB.closePath();
ctxB.stroke();
Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
//console.log('Tiles:',Tiles[rowcount[boxcount]]);
addHorBox+=boxsize;
}
}
addHorBox=0;
addVertBox+=boxsize;
}
}
I haven't fully been able to check if I fill up the array properly, but regardless, it doesn't hold the values outside of it's scope. How do I do this?
In you code you are accessing the Tiles array like so:
Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
So the index you are using is the value stored at the boxcount property of rowcount, i.e the same as doing:
let index = rowcount[boxcount];
Tiles[index]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
Since the value of rowcount[boxcount] is undefined, you're storing your object in Tile[undefined].
In order to access the two dimensional array, you need to do this:
Tiles[rowcount][boxcount]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
Also, you only have one row available to you initially, as you initialise you array like so: Tiles = [[]];
What I would recommend is to initialise Tiles as an empty array: Tiles = [];
Then for each row, push a new empty array into Tiles:
for (let rowcount = 0; rowcount < amountOfrows; rowcount++) {
ctxB.lineWidth = 1;
Tiles.push([]);
...
}