Trampolines

Saul

Les objets rebondissants peuvent être l’occasion de confronter le joueur à de nouveaux challenges sollicitant sa précision et son sens du timing

1. Charger une image

   load.js

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

2. Charger un son

   load.js

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

3. Créer des composants

   component.js

   function spring(p) {
     const param = {
       power: 1200,
       tag: "body",
       ...p
     }
     return {
       id: "spring",
       add() {
         this.onCollide(param.tag, (obj, col) => this.checkSpringColission(obj, col))
       },
       checkSpringColission(obj, col) {
         if (col.isTop()) {
           obj.jump(param.power)
           this.trigger("spring")
           obj.trigger("spring")
         }
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "T": () => [ // champignon
         sprite("mushroom"),
         area(),
         anchor("bot"),
         body({ isStatic: true }),
         offscreen({ hide: true }),
         scale(),
         spring(),
       ],
   
       "#": () => [ // 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('spring', 'spring', (obj) => squishFx(obj))
     on('spring', 'spring', () => play('boing'))
     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: `
   
             ===       === ===
   
   
                   T      T
   
                               ===
   
   
             #    T       T
           =====      T
   
       `,
     },
   
   ]

Paramètres

example

config.js

spring({
  power: 1200,
  tag: "body"
}),

Ressources

• mushroom.png
• boing.mp3