Blocks qui tombent

Les blocs 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" ,
  "bean"  ,
]

Charger un effet sonore

load.js

const MP3 = [

  "crrr" ,

  "wooosh" ,
  "off"    ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function fallingBlock( resetOnFall = true ){
  
  // fait chuter le block
  
  const fall_delay           = 1
  const reload_delay         = 2
  const collapse_anim_amp    = 100
  const collapse_anim_delay  = 0.4
  const disappear_anim_delay = 0.4
  const appear_anim_delay    = 0.4
  const resetOnLoose         = true
  
  let collapsing = false , resetPos=null
  
  return {
    
    id : "respawn" ,

    add() { 
      this.on( "collide" , (obj, col) => this.collapse(obj, col) )
    }, 

    update() {
      if (resetPos==null) resetPos = this.pos
    },   

    collapse(obj, col) {
      if ( !collapsing && obj.is("player") ) {
        collapsing = true
        wait( fall_delay-collapse_anim_delay , () => this.collapseAnim() )
        wait( fall_delay , () => this.fall() )
      }
    },   
    
    collapseAnim(){
      const clr = 255 - collapse_anim_amp 
      tween(
        collapse_anim_amp, -collapse_anim_amp, 
        collapse_anim_delay, 
        (p) => this.color = {
          r:Math.abs(p)+clr,
          g:Math.abs(p)+clr,
          b:255,
        }, 
        easings.easeOutSine
      ) 
      play("crrr")
    },

    fall() {
      this.isStatic = false
      if (resetOnFall) {
        wait( reload_delay - collapse_anim_delay , () => this.disappear()  )
        wait( reload_delay ,                       () => this.resetBlock() )
      }
    }, 

    disappear() {
      tween(
        1, 0, disappear_anim_delay, 
        (p) => this.opacity = p, 
        easings.easeOutSine
      )
    },    
    
    resetBlock(){
      this.pos=resetPos
      this.isStatic = true
      this.vel = vec2(0,0)
      collapsing = false
      tween(
        0, 1, appear_anim_delay, 
        (p) => this.opacity = p, 
        easings.easeOutSine
      )
    },
    
    respawning() { if (resetOnLoose) this.resetBlock() } ,

} }

Déclarer un symbole

level.js

const levelConf = {
  
  // paramètres du niveau
  
  tileWidth: 64,
  tileHeight: 64,

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

    "≈": () => [ // bloc qui tombe
      sprite("snowy"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
      fallingBlock(),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      health(1),
      character(),
      area(),
      anchor("bot"),
      body(),
    ],
    
    "=": () => [ // bloc
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],

  },

}

Placer les pics

level.js

const LEVELS = [
  
  // liste des niveaux du jeu 

  [
    "              ≈     ===" ,
    "                       " ,
    "          ≈            " ,
    " #                     " ,
    "====   ≈               " ,
  ],
  
];

si les blocs réapparaissent quand ils tombent

Le premier paramètre du composant fallingBlock permet de déterminer si les blocs réapparaissent ( true ) ou non ( false ) après leur chute

fallingBlock( true ),