Javascript 如何改进重复的js代码

我将展示代码的一小部分，它实际上有12个图像，而不是我展示的3个。我开始创建不同的图像，然后在需要时将其绘制到画布上。正如您所看到的，switch语句执行相同操作12次，代码非常重复，唯一的区别是

this.img

中的数字。也许有一种更好的方法可以把这些图像制作12次

let Game = function (element) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));
    }
    this.matrix = matrix;

    this.canvas = element.querySelector('canvas.tetris');
    this.ctx = this.canvas.getContext('2d');

    // create all the images
    this.img1 = new Image();
    this.img1.src = 'img/1.gif';
    this.img2 = new Image();
    this.img2.src = 'img/2.gif';
    this.img3 = new Image();
    this.img3.src = 'img/3.gif';

    // Render the canvas board
    let lastTime = 0;
    this._update = (time = 0) => {
        const deltaTime = time - lastTime;
        lastTime = time;

        this.drawCanvas();
        this.gameAnimation = requestAnimationFrame(this._update);
    };
};

Game.prototype.drawCanvas = function () {
    // matrix[y][x] is the number of the img name
    for (let y = 0; y < matrix.length; y += 1) {
        for (let x = 0; x < matrix[y].length; x += 1) {
            switch (matrix[y][x]) {
            case 1:
               this.ctx.drawImage(this.img1, x, y, 0.99, 0.99);
               break;
            case 2:
               this.ctx.drawImage(this.img2, x, y, 0.99, 0.99);
               break;
            case 3:
               this.ctx.drawImage(this.img3, x, y, 0.99, 0.99);
               break;
            }
        } 
    }

}

let Game=函数（元素）{
常数矩阵=[]；
而（h--）{
矩阵push（新数组w.fill（0））；
}
这个矩阵=矩阵；
this.canvas=element.querySelector（'canvas.tetris'）；
this.ctx=this.canvas.getContext（'2d'）；
//创建所有图像
this.img1=新图像（）；
this.img1.src='img/1.gif'；
this.img2=新图像（）；
this.img2.src='img/2.gif'；
this.img3=新图像（）；
this.img3.src='img/3.gif'；
//渲染画布板
设lastTime=0；
此。_更新=（时间=0）=>{
常数deltaTime=时间-上次时间；
lastTime=时间；
这个.drawCanvas（）；
this.gameAnimation=requestAnimationFrame（this.\u更新）；
};
};
Game.prototype.drawCanvas=函数（）{
//矩阵[y][x]是img名称的编号
对于（设y=0；y

---

我希望有人知道一个更好的解决方案，而不是switch语句。

因为案例1对应于

this.img1

，案例2对应于

this.img2

，依此类推，只需使用括号符号即可：

for (let x = 0; x < matrix[y].length; x += 1) {
  const imgIndex = matrix[y][x];
  this.ctx.drawImage(this['img' + imgIndex], x, y, 0.99, 0.99);
}

然后访问矩阵循环中的相应索引：

for (let x = 0; x < matrix[y].length; x += 1) {
  const imgIndex = matrix[y][x] - 1;
  this.ctx.drawImage(this.images[imgIndex], x, y, 0.99, 0.99);
}

for（设x=0；x

由于案例1对应于

this.img1

，案例2对应于

this.img2

，依此类推，因此只需使用括号符号即可：

for (let x = 0; x < matrix[y].length; x += 1) {
  const imgIndex = matrix[y][x];
  this.ctx.drawImage(this['img' + imgIndex], x, y, 0.99, 0.99);
}

然后访问矩阵循环中的相应索引：

for (let x = 0; x < matrix[y].length; x += 1) {
  const imgIndex = matrix[y][x] - 1;
  this.ctx.drawImage(this.images[imgIndex], x, y, 0.99, 0.99);
}

for（设x=0；x

哇，这是一个多么快速完美的答案啊。你一定是某种上帝：）哇，多快又完美的回答啊。你一定是某种神：）