Portes

Les portes permettent de diviser un jeu en plusieurs niveaux et d'introduire un nouveau type de circulation pour le joueur. Les niveaux peuvent s'enchainer les uns après les autres de manière continue et ainsi rythmer la progression du joueur. Un même niveau peut aussi comprendre différentes portes vers différents niveaux, à la manière d'un hub.

Charger une image

load.js

const PNG = [

  "door" ,

  "grass" ,
]

Charger un effet sonore

load.js

const MP3 = [

  "door" ,

  "wooosh",
  "off",
  "hit",
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function door(p) {
  // permet à un objet de changer le niveau actuel lorsqu'un joueur entre collision avec lui
  const param = {
    destination: null,
    delay: 0.1,
    ...p
  }
  return {
    add() {
      this.onCollide("player", () => this.enter())
    },
    enter() {
      const d = param.destination == null ? CURRENT_LEVEL + 1 : param.destination
      wait(param.delay, () => this.next(d))
      play("door")
    },
    next(d) {
      if (d < LEVELS.length) CURRENT_LEVEL = d
      else CURRENT_LEVEL = 0
      go("game")
    },
  }
}

Déclarer un symbole

levelConf.js

const LEVEL_CONFIG = {

  // paramètres du niveau

  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,

  tiles: {
    
    // listes des objets à placer dans les niveaux

   "D": () => [ // porte vers le niveau suivant
      sprite("door"),
      area(),
      door(),
      anchor("bot"),			
      offscreen({ hide: true }),
      z(-1),
    ],
   "0": () => [ // porte vers le niveau 0
      sprite("door"),
      area(),
      door(0),
      anchor("bot"),			
      offscreen({ hide: true }),
      z(-1),
    ],
   "1": () => [ // porte vers le niveau 1
      sprite("door"),
      area(),
      door(1),
      anchor("bot"),			
      offscreen({ hide: true }),
      z(-1),
    ],
   "2": () => [ // porte vers le niveau 2
      sprite("door"),
      area(),
      door(2),
      anchor("bot"),			
      offscreen({ hide: true }),
      z(-1),
    ],
   "3": () => [ // porte vers le niveau 3
      sprite("door"),
      area(),
      door(3),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
    
    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },

}

Placer les objets

level.js

const LEVELS = [

  // liste des niveaux du jeu

  {
    map: `

       2       
      ===   ===
               
               
       #     D 
      ===   ===

    `,
  },

  {
    map: `

       D       
      ===      
               
          =    
       0     # 
      ===   ===

    `,
  },

  {
    map: `

       #     D
      ===   ===
               
          =    
             1 
            ===

    `,
  },

  {
    map: `

       2     # 
      ===   ===
               
              
             1 
      ===   ===
      
    `,
  },
  
];

door

levelConf.js
tiles :
door({

  destination: 0,

  delay: 0.1,

}),