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
                }
            }
        }
        ...

Note: I asked a similar question a while back: https://stackoverflow.com/q/40981329. I later learned it was the wrong way to think about the problem. — Chris Happy, Mar 22 '22 at 18:50

Chris Happy · Accepted Answer · 2022-03-26T20:20:22.043

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

I wish that eval note wasn't even there it's such bad advice. — Wyck, Mar 22 '22 at 18:59
So when I try this, it does not draw the canvas, and the console gives the following errors: Uncaught Reference Error: myGameTile1 is not defined, and Uncaught TypeError: cannot read the properties of undefined (reading 'start') I can post all of the code if that would help. — Dc19, Mar 23 '22 at 21:11
I think the issue lies with the myGame.push(); statement, because the program will draw the canvas if the myGameTile is in quotes, but it still does not draw anything on the canvas and still gives the same errors. Any help is appreciated. EDIT: I found the issue, it was with the loop starting at 1 instead of 0. It now works perfectly. — Dc19, Mar 24 '22 at 17:52
@Dc19, if your problem is resolved, could you accept and upvote the answer? Thank you! — Chris Happy, Mar 26 '22 at 20:23

Trying to find a way to call variables iteratively

1 Answers1

Use a myGameTiles array

Use a `myGameTiles` array