Bloc amovible

Les blocs qui écrasent sont des objets dynamiques que le joueur peut pousser, mais qui lui sont hostiles si elles le touchent par le haut alors que celui-ci est au contact du sol.

1. Charger des images

   load.js

   const PNG = [
     "sand",
     "steel",
     "grass",
   ]

2. Charger un son

   load.js

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

3. Créer un composant

   component.js

   function respawn(p) {
     const param = {
       onDeath: false,
       onPlayerDeath: true,
       appearAnimDuration: 0.4,
       delay: 0.4,
       hiddenPosition: vec2(-1000, -1000),
       ...p
     }
     return {
       id: "respawn",
       resetPos: null,
       resetCol: null,
       resetScale: null,
       resetOpacity: null,
       resetStatic: null,
       loadingForRespawn: false,
       add() {
         requestAnimationFrame(() => {
           if (this.is("pos")) this.resetPos = vec2(this.pos)
           if (this.is("color")) this.resetCol = this.color
           if (this.is("scale")) this.resetScale = this.scale
           if (this.is("opacity")) this.resetOpacity = this.opacity
           this.resetStatic = this.isStatic;
         })
         this.on("death", () => {
           wait(param.delay, () => {
             let alivePlayers = 0
             for (const e of get("player", { recursive: true })) if (e.isAlive) alivePlayers++
             if (param.onDeath && (alivePlayers > 0)) this.trigger("respawn")
             else if (alivePlayers == 0) for (const e of get("respawn", { recursive: true })) e.playerDeathRespawn()
           })
         })
         this.on("respawn", () => {
           this.hiddenFromScene = false
           this.hidden = false
           this.loadingForRespawn = false
           this.isStatic = this.resetStatic;
           if (this.is("pos")) this.pos = this.resetPos
           if (this.is("scale")) this.scaleTo(this.resetScale)
           if (this.is("body")) this.vel = vec2(0, 0)
           if (this.is("color")) this.color = this.resetCol
           if (this.is("opacity")) {
             this.opacity = this.resetOpacity
             this.fadeIn(param.appearAnimDuration)
           }
         })
       },
       playerDeathRespawn() {
         if (param.onPlayerDeath) this.trigger("respawn")
       },
       hideFromScene() {
         this.pos = param.hiddenPosition
         this.isStatic = true
         this.hidden = true
       },
       setInitPos(p) {
         this.resetPos = p
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "X": () => [ // acier
         sprite("steel"),
         area(),
         body(),
         anchor("bot"),
         stomp(),
         falling(),
         respawn({ onDeath: true }),
         opacity(),
         scale(),
       ],
   
       "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" }),
       ],
   
       "#": () => [ // 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('stomp', 'stomp', () => play('squish'))
     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: `
   
                               ===
                 X
                   X
               === s   s
                   s
                 #
             ============   s
   
                           ===
   
       `,
     },
   
   ]

Paramètres

example

config.js

body( { mass : 2 } ),

Paramètres

example

config.js

respawn({
  onDeath: false,
  onPlayerDeath: true,
  appearAnimDuration: 0.4,
  delay: 0.4,
  hiddenPosition: vec2(-1000, -1000)
}),

Ressources

• sand.png
• steel.png
• squish.mp3