Bloc qui s'écroule

Les plateformes qui s’écroulent permettent d’introduire une dimension de timing dans les déplacements du joueur. Ces blocs peuvent être utilisés pour introduire un sentiment d’urgence chez le joueur ou pour l’inciter à planifier ces mouvements dans des séquences plus difficiles.

1. Charger une image

   load.js

   const PNG = [
     'snowy',
     'grass',
   ];

2. Charger un son

   load.js

   const MP3 = [
     'crrr',
     'wooosh',
     'off',
   ];

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // bloc qui tombe
     '≈': () => [
       sprite('snowy'),
       area(),
       body({ isStatic: true }),
       fallingBlock(),
       scale(),
       opacity(),
       respawn(),
     ],
   
     // player
     '#': () => [
       sprite('bean'),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor('center'),
       'player',
     ],
   
     // block
     '=': () => [
       sprite('grass-tileset'),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
       autoTiling(),
       area(),
       body({ isStatic: true }),
     ],
   
   };

4. Lancer une animation

   events.js

   function events() {
     return {
       add() {
         // block qui tombe
         on('collapse', 'falling block', (obj) => {
           colorShiftFx(obj, { color: '85b4ff' });
         });
         on('collapse', 'falling block', () => play('crrr'));
   
         // personnages
         on('respawn', 'alive', (obj) => (obj.flipY = false));
         on('hurt', 'alive', (obj) => {
           play('hit');
           colorShiftFx(obj, { color: 'ff9b9b' });
         });
         on('death', 'alive', (obj) => {
           obj.flipY = true;
           wait(0.2, () => {
             if (!obj.isAlive) {
               obj.hidden = true;
               obj.collisionIgnore = ['*'];
               obj.isStatic = true;
             }
           });
         });
   
         // joueur
         on('respawn', 'player', (obj) => obj.play('idle'));
         on('sleep', 'player', (obj) => obj.play('sleep'));
         on('awake', 'player', (obj) => obj.play('idle'));
         on('jump', 'player', (obj) => {
           play('wooosh');
           obj.play('jump', {
             speed: 4,
             onEnd: () => obj.play('idle'),
           });
         });
         on('drop', 'player', (obj) => {
           play('off');
           obj.play('worry');
         });
         on('hurt', 'player', (obj) => {
           obj.play('worry', {
             speed: 2,
             onEnd: () => obj.play('idle'),
           });
         });
       },
     };
   }

5. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
                           ≈     ===
   
                       ≈
              #
             ===≈≈≈≈≈
   
       `,
     },
   
   ]

Paramètres

fallingBlock()

example

config.js

fallingBlock({
  tag: '*',
  respawnOnFall: true,
  fallDelay: 0.4,
  respawnDelay: 2,
  collapseDelay: 0.2,
  disappearDelay: 0.4,
  respawnAnimDuration: 0.4
}),

Ressources

• snowy.png
• crrr.mp3