Plateforme 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.

Charger une image

load.js

const PNG = [

  "snowy" ,

  "grass",
]

Charger un effet sonore

load.js

const MP3 = [

  "crrr" ,

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

Créer un composant

component.js

// Ajoutes ici tes propres composants


function fallingBlock(p) {
  // permet à un objet de tomber lorsqu'un autre objet se trouve dessus
  const param = {
    tag: "body",
    autoRespaw: true,
    fallDelay: 0.6,
    respawnDelay: 2,
    collapseAmp: 100,
    collapseDelay: 0.4,
    disappearDelay: 0.4,
    ...p
  }
  return {
    isCollapsing: false,
    fellDown: false,
    id: "fallingBlock",
    add() {
      this.onCollide(param.tag, (obj) => this.collapse(obj))
    },
    collapse(obj) {
      if (!this.isCollapsing && this.pos.y > obj.pos.y) {
        collapsing = true
        wait(param.fallDelay - param.collapseDelay, () => this.collapseAnim())
        wait(param.fallDelay, () => this.fall())
      }
    },
    collapseAnim() {
      const clr = 255 - param.collapseAmp
      tween(
        - param.collapseAmp,
        --param.collapseAmp,
        param.collapseDelay,
        (v) =>
        (this.color = {
          r: Math.abs(v) + clr,
          g: Math.abs(v) + clr,
          b: 255,
        }),
        easings.easeOutSine
      )
      play("crrr")
    },
    fall() {
      this.isStatic = false
      this.fellDown = true
      if (param.autoRespaw && this.is("respawn"))
        wait(param.respawnDelay, () => this.autoRespawn())
    },
    autoRespawn() {
      if (this.fellDown) this.respawning()
    },
    resetFallingBlock() {
      this.isStatic = true
      this.isCollapsing = false
      this.fellDown = false
    },
  }
}

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


    "≈": () => [ // bloc qui tombe
      sprite("snowy"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
      fallingBlock(),
      respawn(),
      scale(),
      opacity(),
    ],

    "#": () => [ // 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 pics

level.js

const LEVELS = [
  
  // liste des niveaux du jeu 

  {
    map: `

                    ≈     ===
                             
                ≈            
       #                     
      ====   ≈ 
                   
    `,
  },
  
];

fallingBlock

levelConf.js
tiles :

fallingBlock({

  tag: "body",

  autoRespaw: true,

  fallDelay: 0.6,

  respawnDelay: 2,

  collapseAmp: 100,

  collapseDelay: 0.4,

  disappearDelay: 0.4,

}),