Having a string array containing the sprites to display:
var lts = [
"letterA",
"letterB",
"letterC",
"letterD",
"letterE",
"letterF"
];
These sprites are loaded in 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');
}
The goal is to cycle through the letter options and select the correct one, like this:
letterNo = letterNo + 1;
var string = "sprites." + lts[letterNo];
console.log("sprite loading:" + string);
this.sprite = string;
Encountering an issue where it throws an error:
sprites.letterB causing:
TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
Seeking assistance on how to resolve this problem effectively.