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. Créer un composant

   component.js

   function fallingBlock(p) {
     const param = {
       tag: "body",
       respawnOnFall: true,
       fallDelay: 0.4,
       respawnDelay: 2,
       collapseDelay: 0.2,
       disappearDelay: 0.4,
       respawnAnimDuration: 0.4,
       ...p
     }
     return {
       isCollapsing: false,
       respawnFallPos: null,
       id: "falling block",
       add() {
         this.onCollide(param.tag, (obj) => this.collapse(obj))
         requestAnimationFrame(() => this.respawnFallPos = this.pos)
         this.on("respawn", () => {
           this.isStatic = true
           this.isCollapsing = false
           this.pos = this.respawnFallPos
           this.vel = vec2(0, 0)
           this.opacity = 1
           this.fadeIn(param.respawnAnimDuration)
         })
       },
       collapse(obj) {
         if (!this.isCollapsing && this.pos.y > obj.pos.y) {
           collapsing = true
           wait(param.collapseDelay, () => {
             this.trigger("collapse")
             wait(param.fallDelay, () => {
               this.isStatic = false
               if (param.respawnOnFall) wait(param.respawnDelay, () => this.trigger("respawn"))
             })
           })
         }
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "≈": () => [ // bloc qui tombe
         sprite("snowy"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         fallingBlock(),
         scale(),
         opacity(),
       ],
   
       "#": () => [ // player 1
         sprite("bean"),
         platformerController(),
         alive(),
         opacity(),
         scale(),
         health(1, 4),
         area(),
         anchor("bot"),
         body(),
         respawn(),
         falling(),
       ],
   
       "=": () => [ // block
         sprite("grass"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
       ],
   
     },
   }

5. Lancer une animation

   game.js

   scene("game", () => {
   
     const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
     const map = LEVELS[CURRENT_LEVEL].map.split("\n")
     const level = addLevel(map, config)
   
     add([
       multiplayerCamera(),
     ])
     setGravity(config.gravity)
     setBackground(config.backgroundColor)
   
     on('collapse', 'falling block', (obj) => colorShiftFx(obj, { color: '85b4ff' }))
     on('collapse', 'falling block', () => play('crrr'))
     on('jump', 'player', () => play('wooosh'))
     on('drop', 'player', () => play('off'))
     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) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
     on('drop', 'player', (obj) => obj.play('worry'))
   
   }

6. Placer les objets

   level.js

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

Paramètres

example

config.js

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

Ressources

• snowy.png
• crrr.mp3