Ajouter des blocs qui s'écroulent

Les blocs qui s'écroulent permettent de corser l'expérience du joueur en ajoutant un paramètre de timing dans ses déplacements, et rendent ainsi ton jeu plus dynamique et stimulant. Une fois tombés, les blocs peuvent rester au sol et ainsi permettre au joueur de nouveaux passages, ou se remettre en position pour permettre au joueur de ressayer une séquence de mouvements.

Importer une image

Pour commencer, il va te falloir une image. Réalises-en une si tu ne l'as pas déjà fait, ou utilise celle ci-dessous (click droit -> enregistrer-sous).

Charger l'image dans le programme

Importe ensuite ton image dans ton projet en la plaçant dans le bon dossier : assets/sprites/. Puis, ajoute cette ligne au début de ton script game.js, comme suit.

// chargement des images du jeu
loadSprite( "bean"   , "assets/sprites/bean.png"   ) ;
loadSprite( "grass"  , "assets/sprites/grass.png"  ) ;
loadSprite( "portal" , "assets/sprites/portal.png" ) ;

loadSprite( "snow"   , "assets/sprites/snow.png"   ) ;

Déclarer un symbole

Nous allons maintenant déclarer un nouveau type d'objet que tu vas pouvoir placer dans ton jeu. Dans cet exemple nous avons choisi le caractère ≈. Dans le script level.js, trouve la variable LEVEL_CONFIG et ajoutes-y le code ci-dessous, comme suit.

// défini ce à quoi correspond chaque symbole dans le niveau
const LEVEL_CONFIG = {
  
  // taille en pixel de chaque case
  width: 64,
  height: 64,

  // sol
  "=": () => [
    sprite("grass"), 
    area(), 
    solid(), 
    origin("bot")
  ],
  
// neige
 "≈": () => [
   sprite("snow"), 
   area(), 
   solid(), 
   origin("bot"),
   opacity(),
   rotate(),
 ],
} ;

Placer les blocs

Tu vas maintenant pouvoir choisir l'emplacement de tes blocs dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et places des caractères ≈ là où tu le souhaites.

// plan du niveau
const LEVELS = [
  
  [
    " #                    @ " ,
    "====  ≈   ≈    ≈     ===" ,
  ],
  
];

Tes blocs sont maintenant apparents dans ton niveau, mais ils tombent immédiatement. S'ils ont été placés au-dessus du vide, tu ne pourra même peut-être pas les voir. Il nous reste quelques opérations à effectuer pour qu'ils tiennent en place, le temps que le joueur les rencontre.

Créer un nouveau composant

Pour que tes blocs puissent tomber, il va nous falloir créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant aux blocs de tomber
function snow(reset = false){
  
  const speed = 2 ; // vitesse à laquelle le bloc s'écroule
  const rlTime = 2 ; // temps que met le bloc à réapparaitre
  const rotS = 26 ; // vitesse de l'animation
  const rotA = 10 ; // amplitude de l'animation
  const disO = 0.25 ; // déla avant réduction de l'opacité
  const hiddenPos = new Vec2(0,0); 
  
  const support = add([
    rect(0, 0),
    pos(0,0),
    area(),
    solid(),
    origin("bot")
  ]);
  
  let melt = 0 ;
  let steppedOn = false ;
  let fallen    = false ;
  let startPos ;
  let timeStamp ;
  
    return {
      
      add() {       
        this.on("collide", (obj, col) => {
          if (col.isTop()) {
            steppedOn = true ;
	      }
	    })  
      },    
      
      load() {  
        support.pos=this.pos;
        startPos=this.pos;
      },   
      
      update() { 
        
        if (steppedOn){
          melt = Math.min(1,melt+dt()*speed);
        }
        
        if (melt==1 && !fallen){
          support.pos=hiddenPos;
          timeStamp=time();
          fallen=true;
        }
        else if(fallen && reset){
          if (time()-timeStamp>rlTime) {
            this.reset() ;
          }
          else {
            this.opacity = 1-Math.max(0,(time()-timeStamp-(rlTime-disO))/(disO));
          }
        }
        
        if(fallen) this.angle = 0 ;
        else this.angle = Math.sin(time()*rotS) * rotA*melt  ;
        
      },   
      
      reset() {
        support.pos = startPos ;
        this.pos    = startPos ; 
        steppedOn = false ;
        fallen    = false ;
        onGround  = false ;
        this.opacity = 1 ; 
        melt = 0 ;
      },
      
    }
}

Ajouter le nouveau composants

Maintenant, il ne nous reste plus qu'à ajouter notre nouveau composant aux blocs. Retourne dans le script level.js, et retrouve dans la variable LEVEL_CONFIG le passage où sont déclarés nos blocs, puis ajoutes-y cette ligne.

// neige
"≈": () => [
  sprite("snow"), 
  area(), 
  solid(), 
  origin("bot"),
  body(),
  rotate(),
  opacity(),
  
  body(),
  snow(),
],