如何在for循环中创建新变量？游戏随机方块生成实现问询

先帮你梳理下原代码里的几个问题，再给出可行的解决方案：

原代码的问题点： #

• 构造函数里的x、y、w、h没有作为参数传入，会导致这些属性值为undefined；另外按照JS约定，构造函数首字母建议大写（比如Block而非block），方便区分普通函数。
• var block[i]是语法错误，不能用这种方式动态声明命名变量。
• 用new创建实例后，block[i]是对象而非函数，直接调用block[i]()会报错。

解决方案1：创建独立命名变量（block0、block1、block2） #

如果确实需要单独的命名变量，可以借助全局对象（浏览器环境下是window）来动态挂载变量，代码如下：

// 先修正构造函数，添加参数并抽离绘制方法
function Block(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  // 把绘制逻辑封装成方法，方便后续调用
  this.draw = function() {
    ctx.fillRect(this.x, this.y, this.w, this.h);
  };
}

// 循环创建3个方块
for (let i = 0; i < 3; i++) {
  // 生成随机x坐标（和你原逻辑一致：0、100、200、300、400、500中的随机值）
  const randomX = Math.floor(Math.random() * 6) * 100;
  // 创建方块实例
  const newBlock = new Block(randomX, 0, 100, 100);
  // 动态挂载到全局，生成block0、block1、block2变量
  window[`block${i}`] = newBlock;
  // 调用绘制方法
  newBlock.draw();
}

// 之后可以直接访问block0、block1、block2
console.log(block0.x); // 输出第一个方块的x坐标

解决方案2：用数组管理方块（更推荐） #

其实在游戏开发中，用数组统一管理这类元素会更灵活，后续遍历更新、批量绘制都更方便，效果和单独命名变量类似：

function Block(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.draw = function() {
    ctx.fillRect(this.x, this.y, this.w, this.h);
  };
}

const blocks = [];
for (let i = 0; i < 3; i++) {
  const randomX = Math.floor(Math.random() * 6) * 100;
  const block = new Block(randomX, 0, 100, 100);
  blocks.push(block);
  block.draw();
}

// 通过blocks[0]、blocks[1]、blocks[2]访问，和block0、block1等价
console.log(blocks[1].y); // 输出第二个方块的y坐标

补充说明： #

• 尽量避免在构造函数里直接执行绘制逻辑，抽成独立方法后，你可以在游戏的渲染循环里统一调用所有方块的draw()方法，更符合游戏开发的逻辑。
• 如果你的代码不在全局作用域（比如模块内），可以声明一个局部对象来存储这些命名变量，比如const blockMap = {};，然后用blockMap[block${i}] = newBlock;来存储。

内容的提问来源于stack exchange，提问作者ItzFrostbiteTv