Trying to find a way to call variables iteratively

Question

I am trying to create a program that lays out a bunch of tiles that change color when you click on them. However, I'm trying to create a loop that would iteratively modify variables. I am using this as a template. Any help would be appreciated.

function updateGameArea(){
    myGameArea.clear();
    myGameTile1.update();
    myGameTile2.update();
    myGameTile3.update();
    ...
    }
var myGameArea = {
    ...
    window.addEventListener("mousedown",function(e){
        myGameArea.x = e.pageX;
        myGameArea.y = e.pageY;
        if(myGameArea.x <= 320 && myGameArea.y <= 320){
            for(var y=0;y<10;y++){
                for(var x=0;x<10;x++){
                    myGameTile+((y+1)*10+(x+1)) = component(32,32,"#000000",0,0); //I know this doesnt work, but this is what I imagine it would look something like
                }
            }
        }
        ...

Answer 1

Use a myGameTiles array

I would suggest changing the way you're looking at this problem.

If you have multiple GameTile variables that all have the same properties, it's better to think of them as elements in an array: e.g. create an array called myGameTiles then push your elements to this array.

// Create an array
myGameTiles = [];
myGameTiles.push(myGameTile1);
myGameTiles.push(myGameTile2);
myGameTiles.push(myGameTile3);
// ...

function updateGameArea(){
    myGameArea.clear();
    
    for (var i = 0; i < myGameTiles.length; i++) {
        myGameTiles[i].update();
    }
    // ...
    }
var myGameArea = {
    // ...
    window.addEventListener("mousedown",function(e){
        myGameArea.x = e.pageX;
        myGameArea.y = e.pageY;
        if(myGameArea.x <= 320 && myGameArea.y <= 320){
            for(var y=0;y<10;y++){
                for(var x=0;x<10;x++){
                    function updateGameArea(){
    myGameArea.clear();
    myGameTile1.update();
    myGameTile2.update();
    myGameTile3.update();
    ...
    }
var myGameArea = {
    ...
    window.addEventListener("mousedown",function(e){
        myGameArea.x = e.pageX;
        myGameArea.y = e.pageY;
        if(myGameArea.x <= 320 && myGameArea.y <= 320){
            for(var y=0;y<10;y++){
                for(var x=0;x<10;x++){
                    myGameTile+((y+1)*10+(x+1)) = component(32,32,"#000000",0,0); //I know this doesnt work, but this is what I imagine it would look something like
                }
            }
        }
        ...myGameTiles[(y+1)*10+(x+1)] = component(32,32,"#000000",0,0); // Very similar to your original code!
                }
            }
        }
        ...

^{Note: Highly NOT recommended, but you can also use eval() (e.g. eval('myGameTiles' + ((y+1)*10+(x+1)) + ' = component(32,32,"#000000",0,0);') but it's hacky and unsafe. Again, highly not recommended.)}