Affiche un compteur de points

pour Daniel (Rosny-sous-bois)

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 coinDisplay(px,py){ // affiche le compteur de pièces // icone du butin const img = itemImages[1] ; 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[0],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] ; // pour l'image de l'objet 1
const img = itemImages[2] ; // pour l'image de l'objet 2
const img = itemImages[3] ; // 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 !