如何通过数组中的精灵位置递增？答案

【问题标题】：How to increment through sprite locations in an array?如何通过数组中的精灵位置递增？
【发布时间】：2019-11-04 18:17:23
【问题描述】：

所以我有一个字符串数组，其中包含我想要显示的精灵：

var lts = [
    "letterA",
    "letterB",
    "letterC",
    "letterD",
    "letterE",
    "letterF"
];

在我的assets.js 中加载它们：

function loadAssets(callback){

    function loadSprite(fileName){
        assetsStillLoading++;

        let spriteImage = new Image();
        spriteImage.src = "assets/sprites/" + fileName;

        spriteImage.onload = function()
        {
            assetsStillLoading--;
        }

        return spriteImage;
    }
    sprites.background = loadSprite('spr_background_pink.png');

    sprites.letterA = loadSprite('/Letters/letter_A.png');
    sprites.letterB = loadSprite('/Letters/letter_B.png');
    sprites.letterC = loadSprite('/Letters/letter_C.png');
    sprites.letterD = loadSprite('/Letters/letter_D.png');
    sprites.letterE = loadSprite('/Letters/letter_E.png');
    sprites.letterF = loadSprite('/Letters/letter_F.png');
}

现在我希望能够在这个字母选项中循环选择正确的选项，如下所示：

letterNo = letterNo + 1;

var string = "sprites." + lts[letterNo];
console.log("sprite loading:" + string);
this.sprite = string;

但是当我尝试时，我得到：

sprites.letterB 在调试器中，这是我要加载的精灵，但它不喜欢它：

TypeError：CanvasRenderingContext2D.drawImage 的参数 1 无法转换为以下任何一种：HTMLImageElement、SVGImageElement、HTMLCanvasElement、HTMLVideoElement、ImageBitmap。

请问我怎样才能让它工作？

【问题讨论】：

标签： javascript arrays html5-canvas sprite

【解决方案1】：

"sprites.letterB" 只是一个与 sprite 对象无关的字符串。如果要访问 sprite 对象中的键，请使用括号表示法：sprites[lts[letterNo]]。

【讨论】：

天哪！非常感谢，js新手，已经很近了，但是只见树木不见森林！
这就像将字符串转换为“sprites”类型吗？
不，sprites 不是一种类型，它是一个变量，它包含一个基本上像关联数组一样工作的对象。它具有指向值的字符串键，您可以通过在方括号内提供键来获取键，就像在普通数组中使用数字索引时一样。