Javascript—定义图像树的有效方法

基本上我有一个文件夹，里面有很多图像

例如：

我希望最终使用drawImage函数，如下所示：

var gender = "male",
    color = "white",
    clothing = "plain";

ctx.drawImage(character[gender][clothing][color], 0, 0, 100, 100);

我该如何以一种不需要100行代码的简洁方式来做这件事呢

---

此外，图像文件夹也在不断扩展。有没有一种方法可以让代码自动遍历文件夹并添加图像，而不是手动将其添加到代码中？

将您的逻辑封装在函数中，并在设置正确的图像src时使用字符串连接。假设您的角色文件夹与HTML文件位于同一目录中，您可以使用：

//占位符变量 var ctx={drawImage:Function.prototype} var imageCache={} 函数getCharacterImageoptions{ var src=['Character'，options.gender，options.clothing，options.color，options.action]。加入'/'+'.png' 如果imageCache中的src返回imageCache[src] var image=imageCache[src]=document.createElement'img' image.src=src 返回图像 } var image=getCharacterImage{ 性别：'男性'， 颜色：'白色'， 服装:"朴素",， 动作：“走路” } console.logimage.src

---

根据应用程序逻辑，可以使用函数并将这些变量值作为函数参数传递，也可以从某些HTML字段读取值。我不确定你在这里错过了什么，你能更好地解释你的问题吗？我认为将它传递给gyre explained这样的函数对CPU不是很友好，因为它是用于游戏的，而且会有很多变化，在使用它们之前先定义所有图像不是更好吗？你可以；但这种方法是否更好取决于你是否认为所有的图像排列都可能会在给定的会话中使用。很可能不会，但这是一个画布游戏，所以我想利用ram，使编程更高效。这段代码很漂亮，尽管我不认为它正是我想要的，我只是添加了一个图像缓存，这样一个图像就不会为特定的src值创建多次。让我知道这是否有效。

var gender = "male",
    color = "white",
    clothing = "plain";

ctx.drawImage(character[gender][clothing][color], 0, 0, 100, 100);