Pics

Les pics peuvent permettre d'apporter un peu de challenge pour le joueur, ou encore de contraindre sa circulation.

Charger une image

load.js

const PNG = [

  "spike" ,

  "grass" ,
  "bean"  ,
]

Charger un effet sonore

load.js

const MP3 = [

  "hit" ,

  "wooosh" ,
  "off"  ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function danger( damage = 1 , collision = ["top","left","bot","right"]  , ongoing = false , target = null ) {
  
  // blesse le joueur à son contact

  return {
    
    add() {
      const c = ongoing ? "collideUpdate" : "collide"
      this.on( c , (obj, col) => this.checkDangerColission(obj, col) )
    },
    
    checkDangerColission(obj, col) {
      if ( obj.is("character") && (target==null || obj.is(target) ) ) {
        let b = false
        for (const c of collision){
          if      ( c == "top"   && col.isTop()    ) this.dangerHit(obj)
          else if ( c == "left"  && col.isLeft()   ) this.dangerHit(obj)
          else if ( c == "bot"   && col.isBottom() ) this.dangerHit(obj)
          else if ( c == "right" && col.isRight()  ) this.dangerHit(obj)
        }
      }
    },
    
    dangerHit(obj) {
      if ( obj.hit(damage) ) play("hit")
    },
    
} }

Déclarer un symbole

level.js

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

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

    "M": () => [ // pic à l'endroit
      sprite("spike"), 
      area(), 
      area({scale:vec2(0.6,1)}), 
      anchor("bot"),
      offscreen({ hide: true }),
      danger(),
    ],
    "W": () => [ // pic à l'envers
      sprite("spike"),
      pos(0,-64),
      area({scale:vec2(0.6,1)}), 
      anchor("bot"),
      rotate(180),
      offscreen({ hide: true }),
      danger(),
    ],
    "S": () => [ // pic à l'envers
      sprite("spike"),
      pos(-32,-32),
      area({scale:vec2(0.6,1)}), 
      anchor("bot"),
      rotate(90),
      offscreen({ hide: true }),
      danger(),
    ],
    "Z": () => [ // pic à l'envers
      sprite("spike"),
      pos(32,-32),
      area({scale:vec2(0.6,1)}), 
      anchor("bot"),
      rotate(270),
      offscreen({ hide: true }),
      danger(),
    ],
    "#": () => [ // 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

  
  [
    " ===  M  M  M  M        " ,
    "     === ==== ===       " ,
    "         W  W      Z==S " ,
    "                        " ,
    "         Z==S     Z==S  " ,
    "  #  M M  ==  M M       " ,
    "===================     " ,
  ],
  
];

la taille de la hitbox

Pour éviter que le joueur ne soit touché trop facilement, il est possible peux rétrécir la zone de contact des pics dans le composant area. La première valeur permet de modifier la taille horizontale, la seconde permet de modifier la taille verticale ( 1 , 1 pour la taille originale )

area( { scale : vec2( 0.6 , 1 ) } )

le nombre de dégâts

Le premier paramètre du composant danger permet de spécifier le nombre de points de vie que le pic fait perdre au joueur.

danger( 1 )

la direction de la collision

Le deuxième paramètre du composant danger permet de spécifier dans quelle direction la collision avec les pics cause des dégâts ( "top", "left", "bot" ou "right" ).

danger( 1 , ["top","left","bot","right"] )

si les dégâts sont continus

Le troisième paramètre du composant danger permet de spécifier si le pic ne fait des dégâts qu'au moment de la collision (false) ou de manière continue (true). Dans ce dernier cas de figure, tu pourrait être tenté de régler le délai d'invincibilité des personnages dans le composant character du script player.js

danger( 1 , ["top","left","bot","right"] , true )

une cible

Le cinquième paramètre du composant danger permet de spécifier quels éléments sont sensibles aux dégats causés par les pics. L'identifiant "character" permet de rendre le pic hostile pour tous les objets ayant un composant character, l'identifiant "player" permet de ne rendre le pic hostile que pour les joueurs. Il est aussi possible de créer son propre identifiant et de l'attribuer aux objets de son choix.

danger( 1 , ["top","left","bot","right"] , true , "player" )

avec un personnage mobile

Personnage mobile dangeureux