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",
]

Charger deux effets sonores

load.js

const MP3 = [


  "powerup" ,
  "blip" ,

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

Créer deux nouveaux composants

component.js


function lifebar(p) {
  // permet d'afficher la santé du joueur
  const param = {
    sprite: "heart",
    margin: vec2(40, 40),
    healAnimDuration: 0.6,
    hurtAnimDuration: 0.2,
    lifeZero: true,
    iconSize: 40,
    iconMarign: -10,
    ...p
  }
  return {
    id: "lifebar",
    icons: [],
    add() {
      const zl = param.lifeZero ? 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() {
      const p = param.margin.x + this.icons.length * (param.iconSize + param.iconMarign)
      const e = add([
        sprite(param.sprite, { width: param.iconSize }),
        fixed(),
        pos(p, param.margin.y),
        z(10),
        scale(0),
        anchor("center"),
        { displayed: false }
      ])
      this.icons.push(e)
    },
    updateIcons() {
      const zl = param.lifeZero ? 1 : 0
      for (let i = this.icons.length; i < this.hp() - zl; i++) this.createIcon()
      for (let i = 0; i < this.icons.length; i++) {
        if (i < this.hp() - zl && !this.icons[i].displayed) {
          this.icons[i].displayed = true
          tween(0, 1, param.healAnimDuration, (v) => this.icons[i].scaleTo(v), easings.easeOutBounce)
        }
        else if (i >= this.hp() && this.icons[i].displayed) {
          this.icons[i].displayed = false
          tween(1, 0, param.hurtAnimDuration, (v) => this.icons[i].scaleTo(v), easings.easeOutSine)
        }
      }
    },
  }
}

function healing(p) {
  // permet à un objet de donner des points de vie à un joueur lorsqu'il entre collision avec lui
  const param = {
    duration: 0.4,
    amplitude: 10,
    speed: 2,
    ...p
  }
  return {
    add() {
      this.onCollide("player", (obj) => this.healCollide(obj))
    },
    healCollide(obj) {
      if (!this.is("respawn") || !this.beenHidden) {
        if (obj.maxHP() == null || obj.hp() < obj.maxHP()) this.getHealth(obj)
        else this.maxedOutHealth()
      }
    },
    getHealth(obj) {
      obj.heal(1)
      play("powerup")
      splashFX(this.pos, { offset: vec2(0, -20), color: "ee8fcb" })
      if (this.is("respawn")) this.hideObject()
      else destroy(this)
    },
    maxedOutHealth() {
      tween(
        0,
        Math.PI * 2,
        param.duration,
        (v) => {
          this.angle = Math.sin(v * param.speed) * param.amplitude
        },
        easings.easeOutSine
      )
      play("blip")
    }
  }
}

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


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

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

  },

}

Modifier un symbole

levelConf.js
tiles :

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

  lifebar(),

  sprite("bean"),
  platformerController(),
  alive(),
  opacity(),
  scale(),
  health(1, 4),
  area(),
  anchor("bot"),
  body(),
  respawn(),
  falling(),
  coloring(),
  animator(),
],

Placer les objets

level.js

const LEVELS = [

  // liste des niveaux du jeu
  
  {
    map: `

        #  ♥ ♥ ♥
      ===========
      
    `,
  },
    
];

health

levelConf.js
tiles :

health(

  1 , // points de vie

  4 , // points de vie maximum

),

lifebar

levelConf.js
tiles :

lifebar({

  sprite: "heart",

  margin: vec2(40, 40),

  healAnimDuration: 0.6,

  hurtAnimDuration: 0.2,

  lifeZero: true,

  iconSize: 40,

  iconMarign: -10,

}),

healing

levelConf.js
tiles :

healing({

  duration: 0.4,

  amplitude: 10,

  speed: 2,

}),