Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/467.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何通过阵列中的精灵位置递增?_Javascript_Arrays_Html5 Canvas_Sprite - Fatal编程技术网

Javascript 如何通过阵列中的精灵位置递增?

Javascript 如何通过阵列中的精灵位置递增?,javascript,arrays,html5-canvas,sprite,Javascript,Arrays,Html5 Canvas,Sprite,因此,我有一个字符串数组,其中包含要显示的精灵: var lts = [ "letterA", "letterB", "letterC", "letterD", "letterE", "letterF" ]; 在myassets.js中,我加载它们: function loadAssets(callback){ function loadSprite(fileName){ assetsStillLoading++;

因此,我有一个字符串数组,其中包含要显示的精灵:

var lts = [
    "letterA",
    "letterB",
    "letterC",
    "letterD",
    "letterE",
    "letterF"
];
在my
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、HtmlCanvaSeElement、HTMLVideoElement、ImageBitmap


我怎样才能让它工作呢?

“sprites.letterB”
只是一个与sprites对象无关的字符串。如果要访问精灵对象中的键,请使用括号表示法:
sprites[lts[letterNo]]

噢,天哪!非常感谢,js的新人,离我们很近,但看不见树木,看不见树木!这就像将字符串转换为“sprites”类型一样吗?不,sprites不是一种类型,它是一个变量,它包含一个基本上像关联数组一样工作的对象。它具有指向值的字符串键,您可以通过在方括号内提供该键来获取该键,就像在普通数组中使用数字索引一样。