Affiche un compteur de points

Quoi de plus satisfaisant pour un pirate que de voir gonfler son butin? Affiche un compteur à l'écran pour que le joueur sache à tout moment de combien de pièces il dispose.

Créer une variable

Tout d'abord nous avons nous-mêmes besoin de savoir combien de pièces détient le joueur. Dans le script item.js colle cette variable publique, en dehors d'une fonction.

let butin ;

Puis dans le script game.js, modifie la fonction initGame() pour qu'au début de la partie ton joueur ne dispose d'aucun point.

function initGame(){
    
    musics[5].stop();
  
    butin = 0 ;
    
    title  = false;
    win    = false;
    credit = false;
    thanks = false;
    
    touchDir = null;
    
    playerR = [ 0 , 0 ];
    
    playerLevel();
    
  }

Il va maintenant nous falloir une fonction pour augmenter le butin du joueur. Copie celle-ci dans le script item.js.

function pickCoin( thisItem ){
  
  fx[1].play() ;
  butin ++ ;
  items = supprObj( items , thisItem ) ;
  playerPos[1] = thisItem.pos ;

}

Quel objet veux-tu que ton joueur amasse dans son butin ? Dans la fonction pick(), toujours dans le script item.js, remplace pickItem par pickCoin dans la ligne qui correspond à l'objet en question.

function pick(thisItem){

  // interaction du joueur avec les objets

  // ici l'objet 1 ajoute une pièce au butin
  
  let objet = thisItem.type ;

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

Importer une liste d'images

Maintenant, nous allons avoir besoin d'images représentant des chiffres pour pouvoir les afficher à l'écran. Dans le script loadAssets.js colle cette ligne en dehors d'une fonction pour créer une liste publique.

var numbers = [];

Puis dans la fonction loadImages() importe tes images en rajoutant ces lignes, et en remplaçant le nom des images par celui des tiennes.

function loadImages(){
  
  // charge les images de ton jeu
  
  logoMP = loadImage('assets/logo/logo_MP.png');
  logoVM = loadImage('assets/logo/logo_VM.png');
  lee    = loadImage('assets/logo/lee.png');
  scan   = loadImage("assets/edwin.jpg");

  numbers[0] = loadImage('chiffre0.png');
  numbers[1] = loadImage('chiffre1.png');
  numbers[2] = loadImage('chiffre2.png');
  numbers[3] = loadImage('chiffre3.png');
  numbers[4] = loadImage('chiffre4.png');
  numbers[5] = loadImage('chiffre5.png');
  numbers[6] = loadImage('chiffre6.png');
  numbers[7] = loadImage('chiffre7.png');
  numbers[8] = loadImage('chiffre8.png');
  numbers[9] = loadImage('chiffre9.png');
}

J'imagine que tu aimerais que ces images soient détourées. Si ça n'est pas déjà le cas, trouve la fonction clippingImages(), toujours dans le script loadAssets.js et ajoutes-y cette ligne.

function clippingImages(){
  
  // affectue le détourage
  
  enemyImages = clippingList(enemyImages);
  artImages   = clippingList(artImages);
  itemImages  = clippingList(itemImages);
  
  numbers = clippingList(numbers);
  
}

Créer la fonction coinDisplay()

Voilà, il ne nous reste plus qu'à afficher tout ça ! Dans le script view.js colle cette nouvelle fonction de ma confection.

function coinsDisplay(px,py){
  
  // affiche le compteur de pièces
  
  // icone du butin
  const img = itemImages[1][0] ;
  
  let c = img.height / img.width;
  let w = width * 0.14;
  let h = w * c;
  let margin = 10;
  let x = width-w/2-margin;
  let y = margin+h/2;
  
  if (butin > 0){
      
      image(img,x,y,w,h);

      let n = numbers[ butin % 10 ];
      let nc = n.height / n.width;
      let nw = width*0.1;
      var nh = nw * nc;
        
      image(n ,x-w/2-nw/2-margin,y,nw,nh);
    
      if (butin >= 10){
        
        var nn = numbers[int(butin*0.1)];
        var nnc = nn.height / nn.width;
        var nnh = nw * nnc;
        
        image(nn,x-w/2-nw/2-margin-nw-margin,y,nw,nnh);

      }
  }
}

Tout au début de cette nouvelle fonction, remplace le 1 dans itemImages[1] par le numéro de l'image que tu souhaites afficher dans la liste itemImages.

const img = itemImages[1][0] ; // pour l'image de l'objet 1

const img = itemImages[2][0] ; // pour l'image de l'objet 2

const img = itemImages[3][0] ; // pour l'image de l'objet 3

Enfin, il nous faut appeller cette nouvelle fonction. Dans game.js, trouve la fonction game() et ajoutes y cette ligne.

function game(){
  
  viewDisplay();
  inventoryDisplay();

  coinsDisplay();
  
  if (animation()) playerControl();
  
}

Voilà, à toi la fortune moussaillon !