Points de vie

Les points de vie peuvent permettre de modérer la difficulté du jeu. Ils peuvent aussi créer une économie dans le jeu dans laquelle les points de vies apparaissent comme une ressource plus ou moins limitée que le joueur sera tenté de dépenser judicieusement.

Charger une image

load.js

const PNG = [

  "heart" ,

  "grass" ,
  "bean"  ,
]

Charger deux effets sonores

load.js

const MP3 = [


  "powerup" ,
  "blip" ,

  "wooosh" ,
  "off"    ,
]

Créer deux nouveaux composants

player.js


function lifebar( img="heart" , x = 40 , y = 40 ) {
  
  // affiche la santé du joueur
  
  const margin_x           = 30 
  const heal_anim_duration = 0.6
  const hurt_anim_duration = 0.2
  const life_zero          = true
  const icon_size          = 40 
  const icon_marign        = -10 
  
  let icons = [] , lastHealth ;
  
  return{
    
    add(){
      const zl = life_zero ? 1 : 0
      for (let i = 0 ; i < this.hp()-zl ; i ++ ) this.createIcon()
      this.updateIcons()
      this.on( "hurt" , () => this.updateIcons() )
      this.on( "heal" , () => this.updateIcons() )
    },
    
    createIcon(anim=false){
      const p = x + icons.length * (icon_size+icon_marign) ;
      const op = anim ? 0:1
      icons.push(add([
        sprite(img,{width:icon_size}),
        fixed(),
        pos(p,y),
        z(10),
        opacity(0),
        scale(0),
        anchor("center")
      ]))
    },
    
    updateIcons(){
      const zl = life_zero ? 1 : 0
      for ( let i = icons.length ; i < this.hp()-zl ; i ++ ) this.createIcon()
      for ( let i = 0 ; i < icons.length ; i ++ ) {
        if ( i<(this.hp()-zl) ) this.appear(i)
        else this.disappear(i)
      }
    },
    
    appear(i){
      tween(
        icons[i].opacity ,
        1 , heal_anim_duration , 
        (p) => {
          icons[i].opacity = p
          icons[i].scale = vec2(p,p) 
        } , 
        easings.easeOutBounce 
      )
    },
    
    disappear(i){
      tween(
        icons[i].opacity ,
        0 , hurt_anim_duration , 
        (p) => {
          icons[i].opacity = p
          icons[i].scale = vec2(p,p) 
        } , 
        easings.easeOutSine 
      )
    },
    
} }


function healing( h = 1 , respawn = true ) {
  
  // soigne le joueur
  
  const anim_full_duration   = 0.4
  const anim_full_amp        = 10
  const anim_full_speed      = 2
  const particule_life_span  = 1
  const particule_anim_speed = 30
  const appear_anim_duration = 0.4

  return{
    
    id:"respawn",
    
    add(){
      this.onCollide("player", (p) => this.healPlayer(p) )
    },
    
    healPlayer(p){
      if(!this.hidden){
        if (p.maxHP()==null||p.hp()<p.maxHP()){
          p.heal(1)
          play("powerup")
          splashFx(this.pos,-20,"ee8fcb")
          this.hidden=true
        }
        else {
          tween(
            0 ,
            Math.PI*2, anim_full_duration , 
            (p) => {
              this.angle = Math.sin(p*anim_full_speed) * anim_full_amp
            } , 
            easings.easeOutSine 
          )
          play("blip")
        }
      }
    },
    
    respawning(){
      if (respawn){
        this.hidden=false
        tween(
          0 ,
          1 , appear_anim_duration , 
          (p) => {
            this.opacity = p
          } , 
          easings.easeInSine 
        )
      }
    },
    
} }

Modifier un symbole

level.js
levelConf

"#": () => [ // player

  lifebar(),

  sprite("bean"),
  platformerController(),
  health( 1 ),
  character(),
  area(),
  anchor( "bot" ),
  body(),
],

le nombre de points de vie de départ

Le premier paramètre du composant health permet de spécifier le nombre de point de vie de départ du joueur.

health( 3 ),

le nombre de points de vie maximum

Le deuxième paramètre du composant health permet de spécifier le nombre de point de vie maximum du joueur.

health( 3 , 5  ),

l'icone de la barre de vie

Le premier paramètre du composant lifebar permet de spécifier l'icone à afficher dans la barre de vie.

lifebar( "heart" )

la position de la barre de vie

Les deuxième et troisième paramètres du composant lifebar permet de spécifier la position de la barre de vie.

lifebar( "heart" , 40 , 40 )

Déclarer un symbole

level.js

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

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


    "♥": () => [ // coeur
      sprite("heart"),
      area(),
      anchor("bot"),
      healing(),
    ],

    "#": () => [ // 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
  
  [
    "  #  ♥ ♥ ♥ " ,
    "===========" ,
  ],
    
];

le nombre de point de vie gagné

Le premier paramètre du composant healing permet de spécifier le nombre de point que gagne le joueur si cet objet est touché.

healing( 1 )

si l'objet se réinitialise quand le joueur perd

Le deuxième paramètre du composant healing permet de spécifier si cet objet réapparait lorsque le joueur perd (true) ou non (false)

healing( 1 , true )

avec un compteur de pièce

Afficher un compteur de points de vie