Aller au contenu

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 des images
Section intitulée « Charger des images »
load.js
```
const PNG = [
  "heart",
  "grass",
]
```

Charger un son

const MP3 = [
  "powerup",
  "blip",
  "wooosh",
  "off",
]

Créer des composants

function lifebar(p) {
  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())
      this.on("death", () => 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) {
  const param = {
    duration: 0.4,
    amplitude: 10,
    speed: 2,
    ...p
  }
  return {
    id: "healing",
    add() {
      this.onCollide("player", (obj) => this.healCollide(obj))
      this.on("disapear", () => {
        if (this.is("respawn")) this.hideFromScene()
        else destroy(this)
      })
    },
    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)
      obj.trigger("heal")
      this.trigger("heal")
      this.trigger("disapear")
    },
    maxedOutHealth() {
      tween(0, Math.PI * 2, param.duration, (v) => { this.angle = Math.sin(v * param.speed) * param.amplitude, easings.easeOutSine })
      this.trigger("maxed out")
    }
  }
}

Déclarer un objet

const LEVEL_CONFIG = {

  // paramètres du niveau

  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,

  tiles: {

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

    "#": () => [ // player 1
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
    ],

    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },
}

modifier le joueur

    "#": () => [ // player 1
      lifebar(),
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
    ],

Lancer une animation

scene("game", () => {

  const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
  const map = LEVELS[CURRENT_LEVEL].map.split("\n")
  const level = addLevel(map, config)

  add([
    multiplayerCamera(),
  ])
  setGravity(config.gravity)
  setBackground(config.backgroundColor)

  on('heal', 'healing', (obj) => splashFX(obj.pos, { offset: vec2(0, -20), color: 'ee8fcb' }))
  on('heal', 'healing', () => play('powerup'))
  on('maxed out', 'healing', () => play('blip'))
  on('jump', 'player', () => play('wooosh'))
  on('drop', 'player', () => play('off'))
  on('respawn', 'player', (obj) => obj.play('idle'))
  on('sleep', 'player', (obj) => obj.play('sleep'))
  on('awake', 'player', (obj) => obj.play('idle'))
  on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
  on('drop', 'player', (obj) => obj.play('worry'))

}

Placer les objets

const LEVELS = [

  {
    map: `

          # ♥ ♥ ♥
        ===========

    `,
  },

]

Paramètres

example

health(
  1 , // points de vie au départ
  4 , // points de vie maximum
),

example

lifebar({
  sprite: "heart",
  margin: vec2(40, 40),
  healAnimDuration: 0.6,
  hurtAnimDuration: 0.2,
  lifeZero: true,
  iconSize: 40,
  iconMarign: -10
}),

Ressources