chaîne de tableau JavaScript comme l'image clé

Question

J'ai un tableau:

myArray = []; 

Lorsqu'une nouvelle chaîne est ajoutée au tableau, je veux dessiner une image sur ma toile en utilisant la chaîne comme la clé de l'image par exemple. Remarque il pourrait y avoir jusqu'à 20 chaînes dans le tableau

myArray.push("apple"); 

Cela aurait alors besoin d'exécuter ceci afin de dessiner l'image sur la toile:

item_apple = game.add.sprite(70, 70, 'apple'); 

La chaîne de pomme à la fin est la chaîne du tableau, et c'est aussi la pomme après le "item_" au début.

Comment puis-je prendre la chaîne de mon tableau et l'utiliser comme une clé d'image lors de l'ajout d'un nouvel élément. Je pense que j'ai besoin d'une boucle donc chaque fois qu'une chaîne est poussée à la fin du tableau, lancez le fichier add.sprite en utilisant les chaînes du nouvel élément ajouté au tableau.

Answer 1

Il semble que vous souhaitiez appeler une méthode à chaque fois qu'un élément est ajouté à un tableau. En supposant que vous ne comptez pas sur un cadre comme Angular, React ou RXjs, Array.observe semble être votre meilleur pari.

Array.observe est une fonctionnalité non-standard et seulement supportée par Chrome 36 pour le moment, donc vous aurez besoin de use a polyfill si vous avez besoin d'un large support par navigateur.

Mais fondamentalement, il devrait fonctionner comme ça

var arr = ['a', 'b', 'c']; 

Array.observe(arr, function(changes) { 
    console.log(changes); 
}); 

arr[1] = 'B'; 
// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] 

arr[3] = 'd'; 
// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] 

arr.splice(1, 2, 'beta', 'gamma', 'delta'); 
// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}] 

Cet exemple a été pris forme le MDN Documentation

Donc, dans votre cas, vous aurez besoin de deux variables. Un tableau contenant les chaînes, et une carte (ou objet) pour maintenir les touches (que je suppose est ce que game.add.sprite retours)

var myArray = [] 
var myImages = {} 

function addImage(imageString){ 
    myImages['item_'+imageString] = item_apple = game.add.sprite(70, 70, imageString); 
} 

Array.observe(myArray, function(changes){ 
    if(changes.type === 'add'){ 
     addImage(changes.object[ changes.object.length -1 ]) 
    } 
}); 

donc ce qui suit entraînera cette

myArray.push('apple'); 

// myArray = ['apple'] 
// myImages = { item_apple: <Object> } 

Cependant, Je ne suis pas sûr de la cohérence avec les spécifications Array.observe proposées les polyfills disponibles. Donc, votre kilométrage peut varier.

Cependant, je pense que votre meilleur pari est d'utiliser quelque chose comme React.js. C'est parfait pour ce genre de choses. Si vous n'êtes pas familier avec React, je vous recommande de passer quelques jours à l'apprendre.

Answer 2

Vous pouvez le faire quelque chose comme ci-dessous si c'est ce que vous demandez:

item_apple = game.add.sprite(70, 70, myArray[myArray.length-1]); 

Si la longueur du tableau est toujours 1, vous pouvez donner comme myArray [0].