javascript - 如何通过数组中的精灵位置递增?
问题描述
所以我有一个字符串数组,其中包含要显示的精灵:
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。
请问我怎样才能让它工作?
解决方案
"sprites.letterB"
只是一个与 sprite 对象无关的字符串。如果要访问 sprite 对象中的键,请使用括号表示法:sprites[lts[letterNo]]
.
推荐阅读
- angular - 我如何使用 async 和 await ?它不工作
- c - 使用指针算术更新值但不使用指针算术值的 C 递归函数
- python - 如何处理snakemake中的python版本/包冲突?
- .net-core - 有没有办法在 arm64 环境中运行 Avalonia 应用程序?
- python - Python 惰性枚举
- c++ - 旧 Visual Studio C++ 项目中的 RPL_Plugin
- flutter - 截图小部件在 Flutter 中剪辑我的列表视图
- html - 尝试使表格的内容和边界线居中时出现问题?
- iframe - 在 folium iframe 中使用可变文本
- python-3.x - face_recognition.compare_faces 只返回 false