Blocs qui tournent

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.

Charger une image

load.js

const PNG = [

  "stone" ,
  "sun",

  "grass",
]

Créer un composant

component.js

// Ajoutes ici tes propres composants
  
function rotatingBlock(p) {
  // fait tourner des objets autour d'un point
  const param = {
    tag: "rotate-e",
    speed: 60,
    rotateSprite: true,
    relativeSpeed: true,
    ...p
  }
  return {
    rotationTarget: null,
    currentRotation: 0,
    rotationDistance: 0,
    startingRotation: 0,
    init() {
      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 (this.rotationTarget == null) this.init()
      else {
        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
      }
    },
  }
}

Déclarer un symbole

levelConf.js

const LEVEL_CONFIG = {

  // paramètres du niveau

  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,

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

    "e": () => [ // axe de rotation sens horaire
      sprite("sun"),
      anchor("center"),
      z(-1),
      "rotate-e",
    ],
    "a": () => [ // axe de rotation sens anti-horaire
      sprite("sun"),
      anchor("center"),
      z(-1),
      "rotate-a",
    ],
    "≤": () => [ // bloc qui tourne en sens horaire
      sprite("stone"),
      area(),
      body({ isStatic: true }),
      anchor("center"),
      offscreen({ hide: true }),
      rotatingBlock({ tag: "rotate-e" }),
    ],
    "≥": () => [ // bloc qui tourne en sens anti-horaire
      sprite("stone"),
      area(),
      body({ isStatic: true }),
      anchor("center"),
      offscreen({ hide: true }),
      rotatingBlock({ tag: "rotate-a" }),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
    
    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },

}

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  {
    map: `

                             ≥                       
                      ≤                              
        #                                            
      =====    e      e   ≥  a  ≥   e ≤  ≤ e     ===
                                                     
               ≤                                     
                             ≥  
                                                  
    `,
  },
  
];

rotatingBlock

levelConf.js
tiles :
rotatingBlock({

  tag: "rotate-e",

  speed: 60,

  rotateSprite: true,

  relativeSpeed: true,
  
}),