Javascript - 如何使用循环定义对象内的数组？

Question

我正在尝试制作像素RPG游戏，而且有点困惑。

我想要做的事：

var character = { 
    gender: male, 
    age: 18, 
    action: walking, 
    direction: left, 
    skin: 0, 
    eyes: aqua, 
    hairStyle: 0, 
    hairColor: blue, 
    hat: 'cap' 
}; 

ctx.drawImage(characterIMG.body[character.gender][character.skinColor], 0, 0); 
ctx.drawImage(characterIMG.eyes[character.gender][character, 0, 0); 
ctx.drawImage(characterIMG.hair[style0], 0, 0); 
if(character.hat != "none"){ 
    ctx.drawImage(characterIMG.hat['cap'], 0, 0); 
} 

我怎么会去定义图像？

这里这么远，但我混了..

var characterIMG = [male, female]; //I want some separate variables to just write in, in case I need to add more images of the same type, then I can just write the "type" in the variable instead of changing a bunch of stuff :) 

for(var i in characterIMG){ 
    characterIMG[i] = { 
     skin: [], 
     eyes: [], 
     hair: [], 
     accessories: [] 
    } 
} 

除非有更有效的方式来做到这一点？

谢谢！

--in总之，我想这样做：

ctx.drawImage(characterIMG.body[character.gender][character.skinColor], 0, 0); 
ctx.drawImage(characterIMG.eyes[character.gender][character], 0, 0); 
ctx.drawImage(characterIMG.hair[style0], 0, 0); 

..with characterIMG包含所有相关的图像（本）

Answer 1

如下

// a list of image name comma delimited 
const imageURLs = "image1.jpg,image2.jpg,image3.jpg"; 

// create an array of images 
const myImageList = imageURLs.split(",").map(url => { 
    const image = new Image; 
    image.src = url; 
    return image; 
}); 

如果你有不同的类别和子类别的许多图像，然后这将取决于你如何在组织图像您可以加载一组图片你的文件系统。如果你有一个目录，并在所有的图像，然后每个图像的名称应该有一些图像描述

body_dark_female.jpg 
body_light_female.jpg 
body_dark_male.jpg 
body_light_male.jpg 
head_dark_female.jpg 
head_light_female.jpg 
head_dark_male.jpg 
head_light_male.jpg 

等等，或一个更好的选择是设置各种类别目录

body/dark/female/jill.jpg 
body/dark/male/tom.jpg 
body/light/female/jill.jpg 
body/light/male/tom.jpg 
head/light/female/jill.jpg 
head/light/male/tom.jpg 
head/dark/female/jill.jpg 
head/dark/male/tom.jpg 

然后，您可以使用名称或目录创建数据结构

// using the directory structure 
function loadImage(imageURL,images){ 
    const cats = imageURL.split("/"); // split the cats into an array 
    // remove the last item as that is the image name 
    var name = cats.pop(); 
    // remove the extension and add just the image name to the cats 
    cats.push(name.split(".")[0]); 
    // reference the base category 
    var currentCat = images; 
    cats.forEach(cat => { // for each category create the objects 
      if(currentCat[cat] === undefined){ // does this cat exist? 
       currentCat[cat] = {}; // no them create an object for it 
      } 
      currentCat = currentCat[cat]; // reference the category 
    }); 
    // now create the image and add it to the object 
    currentCat = new Image; 
    currentCat.src = imageURL; 
} 

然后使用目录列表创建图像列表加载

const imageURLs = ` 
    body/dark/female/jill.jpg 
    body/dark/male/tom.jpg 
    body/light/female/jill.jpg 
    body/light/male/tom.jpg 
    head/light/female/jill.jpg 
    head/light/male/tom.jpg 
    head/dark/female/jill.jpg 
    head/dark/male/tom.jpg 
`; 

由于目录列表可能会有点不干净（空格，制表符，换行符等），你应该确保每个图像的名称有效

// remove tabs, groups of spaces and returns, and use linefeed to seperate them 
    const imagesURLClean = imageURLs.replace(/\t|\r| +?/g,"").split("\n"); 

    // create the base category 
    const characterIMG = {}; 

    // add the images 
    imagesURLClean.forEach(imageURL => loadImage(imageURL,characterIMG)); 

当已经运行，你可以作为访问图像如下

ctx.drawImage(characterIMG.body.light.female.jill,0,0); 

或通过串

var part = "body"; 
var skin = "light"; 
var gender = "female"; 
var name = "jill"; 

ctx.drawImage(characterIMG[part][skin][gender][name],0,0); 

的目录列表将创建下列数据结构

characterIMG = { 
    body : { 
     dark : { 
      female : { 
       jill : // the image 
      }, 
      male : { 
       tom : // the image 
      }, 
     }, 
     light : { 
      female : { 
       jill : // the image 
      }, 
      male : { 
       tom : // the image 
      }, 
     } 
    }, 
    head : { 
     dark : { 
      female : { 
       jill : // the image 
      }, 
      male : { 
       tom : // the image 
      }, 
     }, 
     light : { 
      female : { 
       jill : // the image 
      }, 
      male : { 
       tom : // the image 
      }, 
     } 
    } 

如果您的列表很长，可能有遗漏的项目，在开发过程中，将支付给添加默认的类别，将返回适用于该类别的图像。

因此，你的目录列表看起来像

 body/default.jpg   // default 
    body/light/default.jpg  // default 
    body/light/female/default.jpg // default 
    body/light/male/default.jpg  // default 
    body/dark/default.jpg   // default 
    body/dark/female/default.jpg  // default 
    body/dark/female/jill.jpg 
    body/dark/male/default.jpg  // default 
    body/dark/male/tom.jpg 

    // and so on 

然后创建一个通过类别将获得一个图像的功能，如果有问题，它会尽可能它可以找到适合的类别使用默认图像

function getImage(images, ...categories){ 
    const count = 0;   
    var image = images 
    while(count < categories.length){ 
     if(image[categories[count]] !== undefined){ 
      image = image[categories[count++]]; 
     }else{ 
      return image.default; 
     } 
    } 
    return image; 
    } 

然后你可以如下

ctx.drawImage(getImage(characterIMG,"body","dark","female","jill"),0,0); 

    // when you get the wrong referance    
    ctx.drawImage(getImage(characterIMG,"leg","dark","female","jill"),0,0); 
    // it will return characterIMG.default 
    // or 
    ctx.drawImage(getImage(characterIMG,"body","dark","female","bill"),0,0); 
    // as there is no female bill, it will return characterIMG.body.dark.female.default 

Answer 2

使用对象的庞大的数据库，然后就新一轮上涨该对象每当你想创建一个新的角色实例时。有了这个，每个角色都可以从主对象（通过原型）继承它们的属性，并成为您游戏中的独立实体。

var Person = function(payload) { 
 
    this.name = payload.name; 
 
    this.age = payload.age; 
 
    this.gender = payload.gender; 
 
}; 
 

 
Person.prototype.talk = function() { 
 
    return console.log('hello, I am ' + this.name); 
 
} 
 

 
var Person1 = new Person({ 
 
    name : 'Amanda', 
 
    age  : 18, 
 
    gender : 'Female', 
 
}); 
 

 
var Person2 = new Person({ 
 
    name : 'Sam', 
 
    age  : 21, 
 
    gender : 'Make', 
 
}); 
 

 
Person1.talk(); 
 
Person2.talk();

Answer 3

这是你如何定义一个对象内的阵列。

var characterIMG = { 
 
    male: { 
 
     skins: [], 
 
     hair: ["black", "brown"] 
 
    }, 
 
    female: { 
 
     skins: [], 
 
     hair: [] 
 
    } 
 
}; 
 
console.log(characterIMG); 
 

 
console.log(characterIMG["male"]["hair"]); 
 
console.log(characterIMG.male.hair); //does the same