Checkpoints

pour Saul

Les checkpoints peuvent permettre de préserver la patience du joueur et d'éviter de susciter de la frustrantion. Leur accumulation peut aussi réduire le sentiment de tension du joueur lors de passages difficiles.

Charger une image

load.js

const PNG = [

  "flag" ,

  "grass" ,
  "bean"  ,
]

Charger un effet sonore

load.js

const MP3 = [

  "signal" ,

  "wooosh" ,
  "off"  ,
]

Créer un nouveau composant

component.js

// Ajoutes ici tes propres composants

function checkPoint() {
  
  // redéfini le point d'apparition du joueur
  
  const anim_delay   = 0.4
  const anim_amp     = 10
  const anim_speed   = 4
  const every_player = true

  return{
    
    animAmp : 0 ,
    animStart : 0 ,
    id : "checkpoint",
    
    add(){
      this.onCollide("player", (p) => {    
        if ( this.pos != p.resetPos ) {
          play("signal") ;
          this.setAnim();
          this.activate(p);
        } 
      })
    },
    
    activate(p){
      if (every_player) for ( const t of get("player",{recursive:true} ) ) t.resetPos = this.pos ;
      else p.resetPos = this.pos ;
    },
    
    setAnim(){
      for ( const t of get("checkpoint", {recursive:true} ) ) {
        tween(
          t.animAmp , 0 , 
          anim_delay , 
          (p) => t.animAmp = p , 
          easings.easeInSine
        )
      }
      tween(
        this.animAmp , 1 , 
        anim_delay , 
        (p) => this.animAmp = p , 
        easings.easeOutSine
      )
      this.animStart = time()
    },
    
    update() {
      const t = (time()-this.animStart ) * anim_speed ;
      const w = wave( -anim_amp , anim_amp , t ) ;
      this.angle = w * this.animAmp ; 
    },
    
} }

Déclarer un symbole

level.js

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

  tiles: {
    
    // listes des objet à placer dans les niveaux
        "P": () => [ // checkpoint
      sprite( "flag" ), 
      area(), 
      anchor( "bot" ), 
      pos(0, 10), 
      offscreen({ hide: true }),
      rotate(),
      checkPoint() ,
    ],
    "#": () => [ // 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 objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  [
    "  #       P          " ,
    "=====    ===     ====" ,
  ],

]