\2TP n°1bis : just for javascript

Détails: Écrit par : stéphane Domas; Catégorie : R3.01 - dev. Web côté client (vuejs); Publié le : 27 Mars 2015; Clics : 372

Just for Javascript

Exercice 1

Rappel : la fonction updateCaracs() étant dans la classe Perso, elle peut accéder à n'importe quel attribut de la classe grâce à this.nom_attribut.
Solution possible :

  updateCaracs() {
    this.vitaliy = this.level*50;
    this.armor = 0;
    this.strength = this.level*20;
    for(let i=0;i<this.slots.length;i++) {
      let slot = this.slots[i];
      for(let j=0;j<slot.items.length;j++) {
        let item = slot.items[j];
        // search for armor effects
        if (item.effect[0] == 'A') {
          let val = item.effect.substring(2,item.effect.length);
          if (item.effect[1] == '+') this.armor += eval(val);
          else if (item.effect[1] == '-') this.armor -= eval(val);
        }
        // search for vitality effects
        if (item.effect[0] == 'L') {
          let val = item.effect.substring(2,item.effect.length);
          if (item.effect[1] == '+') this.vitality += eval(val);
          else if (item.effect[1] == '-') this.vitality -= eval(val);
        }
        // search for strength effects
        if (item.effect[0] == 'S') {
          let val = item.effect.substring(2,item.effect.length);
          if (item.effect[1] == '+') this.strength += eval(val);
          else if (item.effect[1] == '-') this.strength -= eval(val);
        }
      }
    }
    if (this.life > this.vitality) this.life = this.vitality;
  }

Remarques :

On accède aux caractères d'un chaîne directement grâce aux [ ].
Quand on appelle substring(), on obtient une chaîne. Si on la concatène directement à une variable avec +=, on va faire de la concaténation de chaîne. Il faut donc forcer JS à considérer la sous-chaîne comme un nombre, par exemple grâce à eval().

Exercice 2

Solution possible :

 assign(itemId, to) {    
    let item = this.boughtItems[itemId];
    if (item == undefined) return false;
    let slot = this.slots.find(e => e.name == to);
    let slotLim = itemLimits.find(e => e.slot == to);
    // if to exists in player's slots and itemLimits
    if ((slot != undefined) && (slotLim != undefined)) {
      // check if limits/type is ok or not
      if (slot.items.length == slotLim.limit) {
        alert('limit for '+to+' alreay reached');
        return false;
      }
      let t = slotLim.types.find(e => e == item.type);
      if (t == undefined) {
        alert(to+' cannot be assigned with '+item.type);
        return false;
      }
      slot.items.push(item);
      this.boughtItems.splice(itemId,1);
      this.updateCaracs();
      return true;
    }
    return false;
  }

Remarques :

accéder en dehors d'un tableau renvoie undefined : pas besoin de tester l'indice.
la méthode find() de la classe Array permet de faire une recherche selon un critère évalué grâce à une fonction définie par le programmeur. Cette fonction renvoie true ou false selon que l'élément actuel correspond au critère. Si un élément du tbaleau correspond, find() renvoie cet élément. Sinon, elle renvoie undefined.
Comme dans le TP 1, on peut utiliser les fonctions fléchées pour définir le test de recherche. Par exemple, pour l'élément e actuellement parcouru, renvoie si l'attribut name est égal à to, s'écrit : e => e.name == to.
push() permet d'ajouter un élément à la fin d'un tableau et splice() d'en supprimer un.
ATTENTION ! quand on manipule un tableau d'objets, le fait de retirer un élément du tableau ne détruit pas l'objet. En fait, ce qui est mis dans le tableau n'est qu'une référence (ou pointeur) vers l'objet. Par exemple :

var obj1 = {type:'circ',coords:{x:1,y:2}}
var obj2 = {type:'rect',coords:{x:3,y:0}}
 
var tab = [ obj1, obj2 ]; // met 2 références dans tab
tab[0].coords.x = 8; // OK
obj1.coords.x = 8; // identique à la ligne précédente car tab[0] pointe vers obj1
tab.splice(0,1); // enlève la première référence dans tab => ne détruit pas obj1
console.log(tab[0].type); // affiche rect 
console.log(obj1.type); // affiche circ : obj1 existe encore

Téléchargement

Vous pouvez télécharger le fichier complet [ ici ]

Connexion

R3.01 - dev. web - côté client (vuejs)

\2TP n°1bis : just for javascript - solution