Javascript - 画像のツリーを効率的に定義する方法

Question

基本的には、画像が枝分かれしたフォルダがあります。

EG：

Character 
__male 
____plain 
______white 
______brown 
______black 
____suit 
______white 
______brown 
______black 
__female 
____plain 
______white 
______brown 
______black 
____dress 
______white 
______brown 
______black 
____bathingSuit 
______white 
______brown 
______black 

私はそうのようなdrawImage機能を使用して終了します：

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

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

は、どのように私は100行を必要としないきちんとした方法でこれを行うに行きますかコードの？

また、画像のフォルダも広がっています。コードが手動でコードに追加するのではなく、自動的に "フォルダを通過"してイメージを追加する方法はありますか？

Answer 1

ロジックを関数内にカプセル化し、正しいイメージを設定するときに文字列連結を使用します。srcあなたが使用することができ、あなたのCharacterフォルダがHTMLファイルと同じディレクトリにあると仮定すると：

// Placeholder variable 
 
var ctx = { drawImage: Function.prototype } 
 

 

 
var imageCache = {} 
 

 
function getCharacterImage(options) { 
 
    var src = ['Character', options.gender, options.clothing, options.color, options.action].join('/') + '.png' 
 

 
    if (src in imageCache) return imageCache[src] 
 

 
    var image = imageCache[src] = document.createElement('img') 
 
    image.src = src 
 
    return image 
 
} 
 

 
var image = getCharacterImage({ 
 
    gender: 'male', 
 
    color: 'white', 
 
    clothing: 'plain', 
 
    action: 'walking' 
 
}) 
 

 
console.log(image.src) 
 

 
ctx.drawImage(image, 0, 0, 100, 100)

編集：は、すでに作成されている画像をキャッシュすることを好む場合は、あなたがすることができますダイナミックオブジェクトキーを使用してsrcからマップへのマップを作成します。