Il est possible de faire autant de niveaux que tu le souhaites dans ton jeu.

Ajouter un niveau

Dans le script level.js, trouve la variable LEVELS et ajoutes-y simplement ton nouveau niveau de la façon suivante.

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

  [
    "        ==        " ,
    " #              @ " ,
    "======      ======" ,
  ],
];

N'oublie pas de placer un portail avec le symbole @ pour que ton joueur puisse accéder au niveau suivant.

BONUS : Ajouter des portes avec différentes destinations

La suite va te permettre de placer plusieurs portails dans ton niveau avec pour chacun une destination différente.

Importer des images

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

Charger les images dans le programme

Importe ensuite tes images dans ton projet en les plaçant dans le bon dossier : assets/sprites/. Puis, ajoute ces lignes 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( "door1" , "assets/sprites/door1.png"  ) ;
loadSprite( "door2" , "assets/sprites/door2.png"  ) ;
loadSprite( "door3" , "assets/sprites/door3.png"  ) ;

Déclarer des symboles

Nous allons maintenant déclarer de nouveaux types d'objets que tu vas pouvoir placer dans ton jeu. Dans cet exemple nous avons choisi les caractères 1, 2 et 3. 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")
  ],
  
// porte 1
  "1": () => [
    sprite("door1"), 
    area(), 
    origin("bot"), 
    "door",
  ],

  // porte 2
  "2": () => [
    sprite("door2"), 
    area(), 
    origin("bot"), 
    "door",
  ],
  
  // porte 3
  "3": () => [
    sprite("door3"), 
    area(), 
    origin("bot"), 
    "door",
  ],
} ;

Placer les portes

Tu vas maintenant pouvoir disperser des portes dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et place des caractères 1, 2 et 3 là où tu le souhaites.

// plan du niveau
const LEVELS = [
  
  // niveau 1
  [
    "    3 " ,
    "   ===" ,
    " #  2 " ,
    "======" ,
  ],
  
  // niveau 2
  [
    "    1 " ,
    "   ===" ,
    " #  3 " ,
    "======" ,
  ],
  
  // niveau 3
  [
    "    2 " ,
    "   ===" ,
    " #  1 " ,
    "======" ,
  ],
  
];

Créer un nouveau composant

Pour que ton joueur puisse utiliser les portes, il nous faut créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant aux portes de changer de niveau
function door( num = 0 ){
  
  return {
    
    number : num - 1 ,
    
    add(){
      
      onCollide( "player" , "door" , ( p , d ) => {

        if ( d.number <= LEVELS.length ) {
          
          CURRENT_LEVEL = d.number ;
          
        }

        play( "portal" ) ;
        go( "game" ) ;  
        
      })  
    },   
  }  
}

Ajouter le nouveau composant

Pour finir, nous devons maintenant ajouter ce nouveau composant aux portes. Dans le script level.js, trouve dans la variable LEVEL_CONFIG le passage où nous avons déclaré les portes, puis ajoute-leur ton nouveau composant.

// porte 1
"1": () => [
  sprite("door1"), 
  area(), 
  origin("bot"), 

  door(1),

  "door",
],

// porte 2
"2": () => [
  sprite("door2"), 
  area(), 
  origin("bot"), 

  door(2),

  "door",
],

// porte 3
"3": () => [
  sprite("door3"), 
  area(), 
  origin("bot"), 

  door(3),

  "door",
],