Bloc qui tourne

Les plateformes en mouvement permettent d’introduire une dimension de timing dans les déplacements du joueur. Le mouvement circulaire et continu de ces blocs permet une grande prédictibilité pour le joueur et peut ainsi lui permettre de planifier ces déplacements. Lorsque la sprite des blocs tourne également, ces plateformes peuvent s’ouvrir à une grande diversité d’utilisations dans lesquelles les murs deviennent alternativement des sols et inversement.

1. Charger une image

   load.js

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

2. Créer un composant

   component.js

   function rotatingBlock(p) {
     const param = {
       tag: "rotate-e",
       speed: 60,
       rotateSprite: true,
       relativeSpeed: true,
       ...p
     }
     return {
       rotationTarget: null,
       currentRotation: 0,
       rotationDistance: 0,
       startingRotation: 0,
       add() {
         requestAnimationFrame(() => {
           for (const t of get(param.tag, { recursive: true })) {
             if (this.rotationTarget == null || this.pos.dist(t.pos) < this.pos.dist(this.rotationTarget.pos)) {
               this.rotationTarget = t
             }
           }
           if (this.rotationTarget != null) {
             this.startingRotation = -this.rotationTarget.pos.angle(this.pos)
             this.rotationDistance = this.rotationTarget.pos.dist(this.pos)
             this.pos = Vec2.fromAngle(this.currentRotation).scale(this.rotationDistance).add(this.rotationTarget.pos)
           }
         })
       },
       update() {
         if (param.relativeSpeed) this.currentRotation += dt() * param.speed / this.rotationDistance * 100
         else this.currentRotation += dt() * param.speed
         this.pos = Vec2.fromAngle(this.currentRotation + this.startingRotation).scale(this.rotationDistance).add(this.rotationTarget.pos)
         if (param.rotateSprite) this.angle = this.currentRotation
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "e": () => [ // axe de rotation sens anti-horaire
         sprite("sun"),
         anchor("center"),
         z(-1),
         "rotate-e",
       ],
   
       "a": () => [ // axe de rotation sens horaire
         sprite("sun"),
         anchor("center"),
         z(-1),
         "rotate-a",
       ],
   
       "≤": () => [ // block qui tourne en sens anti-horaire
         sprite("stone"),
         area(),
         body({ isStatic: true }),
         anchor("center"),
         offscreen({ hide: true }),
         rotatingBlock({ tag: "rotate-e" }),
       ],
   
       "≥": () => [ // block qui tourne en sens horaire
         sprite("stone"),
         area(),
         body({ isStatic: true }),
         anchor("center"),
         offscreen({ hide: true }),
         rotatingBlock({ tag: "rotate-a" }),
       ],
   
       "#": () => [ // 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 }),
       ],
   
     },
   }

4. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
                                   ≥
                           ≤
             #
           =====    e      e   ≥  a  ≥   e ≤  ≤ e     ===
   
                     ≤
                                   ≥
   
       `,
     },
   
   ]

Paramètres

example

config.js

rotatingBlock({
  tag: "rotate-e",
  speed: 60,
  rotateSprite: true,
  relativeSpeed: true
}),

Ressources

• stone.png