Compteur de pièces

pour Marius

Les pièces peuvent permettre de donner un objectif au joueur, de lui donner des directions, ou encore de récompenser son exploration.

Charger une image

load.js

const PNG = [

  "coin" ,

  "grass" ,
]

Charger un effet sonore

load.js

const MP3 = [

  "score" ,

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

Créer des composants

component.js

// Ajoutes ici tes propres composants


function collectible(p) {
  // permet à un objet d'être collecté par un joueur
  const param = {
    ...{
      offset: vec2(0, -20),
    }, ...p
  }
  return {
    id: "collectible",
    add() {
      this.onCollide("player", (p) => this.collectCoin(p))
    },
    collectCoin(p) {
      if (!this.is("respawn") || !this.beenHidden) {
        if (p.is("collector")) p.getCoin()
        else for (const e of get("collector", { recursive: true })) e.getCoin()
        if (this.is("respawn")) this.hideObject()
        else destroy(this)
        splashFX(this.pos, { offset: param.offset })
      }
    },
  }
}

function collector(p) {
  // permet d'afficher un compteur d'objets collectés
  const param = {
    deleteOnRespawn: false,
    margin: vec2(30, 40),
    anchor: "left",
    sprite: "coin",
    detuneSpeed: 100,
    textSize: 30,
    iconSize: 30,
    iconMarign: 10,
    hideWhenEmpty: true,
    noText: false,
    ...p
  }
  return {
    icon: null,
    label: null,
    collected: 0,
    total: null,
    id: "collector",
    pitch: 0,
    add() {
      this.label = add([
        text("", { size: param.textSize }),
        pos(param.margin),
        fixed(),
        anchor(param.anchor),
        z(10),
      ])
      if (param.noText) this.label.hidden = true
      else {
        if (param.anchor == "right") this.label.pos.x = width() - param.margin.x
        if (param.sprite != null) {
          this.icon = add([
            sprite(param.sprite, { width: param.iconSize }),
            pos(param.margin),
            fixed(),
            anchor(param.anchor),
            z(10),
          ])
          if (param.anchor == "right") {
            this.icon.pos.x = width() - param.margin.x
            this.label.pos.x -= param.iconSize + param.iconMarign
          } else this.label.pos.x += param.iconSize + param.iconMarign
          if (param.hideWhenEmpty) this.icon.hidden = true
        }
      }
    },
    resetCoin() {
      if (param.deleteOnRespawn){
        this.collected = 0
        this.updateText()
      }
    },
    getCoin() {
      this.collected++
      this.pitch += 100
      if (!param.noText) this.updateText()
      play("score", { detune: this.pitch })
    },
    updateText() {
      if (this.is("player")) this.label.text = this.collected
      else this.label.text = this.collected + "/" + this.total
      if (param.hideWhenEmpty && this.collected == 0) {
        this.label.hidden = true
        if (this.icon != null) this.icon.hidden = true
      } else {
        this.label.hidden = false
        if (this.icon != null) this.icon.hidden = false
      }
    },
    update() {
      if (this.total == null) this.setTotal()
      this.pitch = Math.max(0, this.pitch - dt() * param.detuneSpeed)
    },
    setTotal() {
      this.total = get("collectible", { recursive: true }).length
      this.updateText()
    },
  }
}

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
  
    "$": () => [ // pièces
      sprite("coin"),
      area(),
      anchor("bot"),
      pos(0, -12),
      collectible(),
    ],

    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
    
    "=": () => [ // bloc
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],

  },

}

Modifier un symbole

levelConf.js
tiles :

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

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

Placer les pièces

level.js

const LEVELS = [

  // liste des niveaux du jeu
  
  {
    map: `

              $   $   $   $      
            $   $   $   $   $    
        # $   $   $   $   $   $  
      =====   =   =   =   =   ===" ,
    
    `,
  },
    
];

collectible

levelConf.js
tiles :

collectible( { offset: vec2(0, -20) } ),

collector

levelConf.js
tiles :

collector({
  
  deleteOnRespawn: false,
  
  margin: vec2(30, 40),
  
  anchor: "left",
  
  sprite: "coin",
  
  detuneSpeed: 100,
  
  textSize: 30,
  
  iconSize: 30,
  
  iconMarign: 10,
  
  hideWhenEmpty: true,
  
  noText: false,
  
}),