Pics

Les pics peuvent permettre d’apporter un peu de challenge pour le joueur, ou de contraindre sa circulation. Un pic bien placé peut à lui seul s’avérer un obstacle sérieux.

1. Charger une image

   load.js

   const PNG = [
     "spike",
     "grass",
   ]

2. Charger un son

   load.js

   const MP3 = [
     "hit",
     "wooosh",
     "off",
   ]

3. Créer des composants

   component.js

   function danger(p) {
     const param = {
       damage: 1,
       collisions: ["top", "left", "bot", "right"],
       ongoing: false,
       tag: "alive",
       ...p
     }
     return {
       add() {
         const c = param.ongoing ? "collideUpdate" : "collide"
         this.on(c, (obj, col) => this.checkDangerColission(obj, col))
       },
       checkDangerColission(obj, col) {
         if (obj.is(param.tag) && !this.hidden) {
           for (const c of param.collisions) {
             if (c == "top" && col.isTop()) obj.trigger("hit", param.damage)
             else if (c == "left" && col.isLeft()) obj.trigger("hit", param.damage)
             else if (c == "bot" && col.isBottom()) obj.trigger("hit", param.damage)
             else if (c == "right" && col.isRight()) obj.trigger("hit", param.damage)
           }
         }
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "M": () => [ // pic à l'endroit
         sprite("spike"),
         area({ scale: vec2(0.6, 1) }),
         anchor("bot"),
         offscreen({ hide: true }),
         danger({ tag: "player" }),
       ],
   
       "W": () => [ // pic à l'envers
         sprite("spike"),
         pos(0, -64),
         area({ scale: vec2(0.6, 1) }),
         anchor("bot"),
         rotate(180),
         offscreen({ hide: true }),
         danger({ tag: "player" }),
       ],
   
       "S": () => [ // pic vers la droite
         sprite("spike"),
         pos(-32, -32),
         area({ scale: vec2(0.6, 1) }),
         anchor("bot"),
         rotate(90),
         offscreen({ hide: true }),
         danger({ tag: "player" }),
       ],
   
       "Z": () => [ // pic vers la gauche
         sprite("spike"),
         pos(32, -32),
         area({ scale: vec2(0.6, 1) }),
         anchor("bot"),
         rotate(270),
         offscreen({ hide: true }),
         danger({ tag: "player" }),
       ],
   
       "#": () => [ // 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 }),
       ],
   
     },
   }

5. Lancer une animation

   game.js

   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('hurt', 'alive', (obj) => colorShiftFx(obj, { color: 'ff9b9b' }))
     on('hurt', 'alive', () => play('hit'))
     on('hurt', 'player', (obj) => obj.play('worry', { speed: 2, onEnd: () => obj.play('idle') }))
     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'))
   
   }

6. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
              ===S M  M  M  M
                  === ==== ===
                      W  W      Z==
   
                      Z==S     Z==
               #  M M  ==  M M
             ===================
   
       `,
     },
   
   ]

Paramètres

example

config.js

danger({
  damage: 1,
  collisions: ["top", "left", "bot", "right"],
  ongoing: false,
  tag: "alive"
}),

Ressources

• spike.png
• hit.mp3