Crée un effet potion magique

Tu veux préparer à ton joueur une petite concoction magique dont il se souviendra? J'ai exactement ce qu'il te faut, un petit effet de particules qui affichera plein de petites images qui flotteront vers le haut.

Créer la classe particle

Tout d'abord crée une liste publique en collant cette ligne dans ton script view.js, en dehors d'une fonction.

let particles = [];

Super. Maintenant, il va nous falloir créer une nouvelle classe. Colle celle-ci dans le script view.js.

class particle {
  
  // initialisation des particules

  constructor( i ){
    
    this.x =  random( 0 , 1 ) ;
    this.y =  1 ;
    this.size = random(0,1) ;
    this.speed = random(0,1) ;
    this.img = i ;
  
  }
}

Créer les fonxtions launchParticles() et displayParticles()

Ensuite nous allons avoir besoin d'une fonction pour démarrer notre effet. Colle celle-ci dans le script view.js

function launchParticles( thisItem ){

  const l = 100;
  
  let img = itemImage(thisItem);

  for( let i = 0 ; i < l ; i ++ ) {

    particles = append( particles , new particle( img[1] ) );

  }

  items = supprObj( items , thisItem ) ;
  playerPos[1] = createVector(thisItem.pos.x,thisItem.pos.y) ;
  
  fx[1].play();

}

Enfin, il nous faudras une fonction pour afficher cet effet à l'écran. Colle celle-ci dans le script view.js

function displayParticles(){

  const minSize = width * 0.05 ;
  const maxSize = width * 0.2 ;
  const minSpeed = height * 0.00003 ;
  const maxSpeed = height * 0.0001 ;

  let l = particles.length;
  
  for(var i = 0 ; i < l ; i ++ ) {
    
    if ( particles[i].y > 0 ){
      
      var x = particles[i].x*width;
      var y = particles[i].y*height;
      var w = minSize+particles[i].size*maxSize;
      var h = particles[i].img.height/particles[i].img.width*w;
      var s = minSpeed + particles[i].speed*maxSpeed;
      let img = particles[i].img;
      fill( 255 );
      image( img , x , y , w , h );
      particles[i].y -= s ;
      
    }
    
    else suppr( particles , i );
    
  }
}

Appeller les fonctions launchParticles() et displayParticles()

La fonction launchParticles() a besoin d'être appellée à chaque fois que l'effet est lancé. Colle cette ligne à l'endroit de ton programme ou tu veux la déclencher.

launchParticles( thisItem ) ;

Dans cet exemple j'ai modifié la fonction pick() dans le script item.js afin qu'il soit déclenché quand le joueur passe sur un objet de type 3.

function pick(thisItem){

  // interaction du joueur avec les objets
  
  let objet = thisItem.type ;

  if ( objet == 0 ) treasure( thisItem ) ;
  if ( objet == 1 ) pickItem( thisItem ) ;
  if ( objet == 2 ) pickItem( thisItem ) ;
  if ( objet == 3 ) pickItem( thisItem ) ;
  if ( objet == 3 ) launchParticles( thisItem ) ;
}

Enfin, pour que ton effet soit visible, trouve la fonction game() dans le script game.js et rajoutes-y cette ligne

function game(){
  
  background(0);
  
  viewDisplay();

  displayParticles();
  
  inventoryDisplay();

  if (animation()) playerControl();

}

Voilà. Je te laisse découvrir l'effet !