试图找到一种迭代调用变量的方法

Question

我正在尝试创建一个程序，该程序会布置一堆瓷砖，当你点击它们时，这些瓷砖会改变颜色。然而，我正在尝试创建一个循环，以迭代方式修改变量。我将此作为模板使用。如有任何帮助，我们将不胜感激。

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

使用myGameTiles数组

我建议你改变看待这个问题的方式。

如果有多个具有相同属性的GameTile变量，最好将它们视为数组中的元素：例如，创建一个名为myGameTiles的数组，然后将元素推送到该数组中。

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

^{注意：强烈不建议使用，但您也可以使用eval()(例如eval('myGameTiles' + ((y+1)*10+(x+1)) + ' = component(32,32,"#000000",0,0);')，但它很粗糙且不安全。同样，强烈不建议。(}