Les pics sont à la fois des obstacles à éviter pour le joueur, mais peuvent aussi être un moyen de condamner certains accès dans ton niveau.

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( "spike"  , "assets/sprites/spike.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")
  ],
  
  // pic
  "^": () => [
    sprite("spike"), 
    area(), 
    origin("bot"),
    "danger",
  ],
} ;

Placer les blocs

Tu vas maintenant pouvoir choisir l'emplacement de tes pics 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 = [
  
  [
    "                     " ,
    " #      ^^   ^^      @ " ,
    "=======================" ,
  ],
  
];

facultatif : Pouvoir marcher sur les pics

Ce qui suit va permettre de ne rendre les pics dangereux pour le joueur que si celui-ci saute dessus. Le joueur pourra donc marcher sur les pics, mais ne pourra pas tomber dessus.

Créer un nouveau composant

Pour cela, nous allons devoir créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant aux pics de faire perdre le joueur
function spike() {
  
  const MARGIN = 30 ;
  
  return {
    
    add() {
      
      this.onCollide("player", (p) => {

        const d = this.pos.y - p.pos.y ;
        
        if ( d > MARGIN ) {
          
          play( "hit" ) ;
          p.lose();
          
        }
        
      })
      
    },
  }
}

Ajouter le nouveau composant

Maintenant, il ne nous reste plus qu'à ajouter notre nouveau composant aux pics. 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.

// pic
"^": () => [
  sprite("spike"), 
  area(), 
  origin("bot"),

  "danger",

  spike(),

],