Blocs en mouvement alterné

Les plateformes en mouvement permettent d'introduire une dimension de timing dans les déplacements du joueur. Le mouvement alternatif de ces plateformes peut permettent au joueur de pouvoir prédir leur position et de planifier ces mouvements en conséquences. Avec un peu de créativité, l'utilisation des plateformes peut permettre une grande variété de défi pour le joueur.

Charger une image

load.js

const PNG = [

  "plate" ,

  "grass" ,
  "bean"  ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function movingBackAndForth( dirX = 1 , dirY = 0 , speed = 100 ) {
  
  // déplace un objet alternativement dans une direction puis dans l'autre
  
  const  switch_delay = 1
  
  return {
    
    direction     : vec2( dirX , dirY ).unit() ,
    facing        : 1 ,
    
    add(){
      this.onCollide("stopper", () => {
        tween(
          this.direction, 
          this.direction.scale(vec2(-1,-1)), 
          switch_delay, 
          (p) => this.direction = p , 
          easings.easeOutSine
        )
      }); 
    },
    
    update() {
      this.move( this.direction.scale(speed) )
      if      ( this.direction.x > 0 ) this.facing =  1 
      else if ( this.direction.x < 0 ) this.facing = -1 
    },
    
} }

Déclarer un symbole

level.js

const levelConf = {
  
  // paramètres du niveau
  
  tileWidth: 64,
  tileHeight: 64,

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

    "x": () => [ // stopper
      rect(64, 64),
      opacity(0), 
      area(), 
      anchor("bot"), 
      "stopper"
    ],
    "<": () => [ // plateforme en mouvement <-
      sprite("plate"),
      pos(0,-64),
      movingBackAndForth(-1, 0),
      body({ isStatic: true }),
      area(),
      anchor("top"),
    ],
    ">": () => [ // plateforme en mouvement ->
      sprite("plate"),
      pos(0,-64),
      movingBackAndForth(1, 0),
      body({ isStatic: true }),
      area(),
      anchor("top"),
    ],
    "v": () => [ // plateforme en mouvement v
      sprite("plate"),
      pos(0,-64),
      movingBackAndForth(0, 1),
      body({ isStatic: true }),
      offscreen({ hide: true }),
      area(),
      anchor("top"),
    ],
    "^": () => [ // plateforme en mouvement ^
      sprite("plate"),
      pos(0,-64),
      movingBackAndForth(0, -1),
      body({ isStatic: true }),
      offscreen({ hide: true }),
      area(),
      anchor("top"),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      health(1),
      character(),
      area(),
      anchor("bot"),
      body(),
    ],
    
    "=": () => [ // bloc
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],

  },

}

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  [
    "      x   < x       " ,
    "    x         x     " ,
    "                    " ,
    " #  ^               " ,
    "===           v  ===" ,
    "                    " ,
    "    x         x     " ,
    "      x >   x       " ,
  ],
  
];

la direction horizontale

Le premier paramètre du composant movingBackAndForth permet de choisir la direction horizontale de la plateforme ( -1 pour la gauche, 0 pour garder la même position, 1 pour la droite ). Quand elle changera de direction, la plateforme adoptera la direction opposée.

movingBackAndForth( 0 ),

la direction verticale

Le deuxième paramètre du composant movingBackAndForth permet de choisir la direction verticale de la plateforme ( -1 pour le haut, 0 pour garder la même position, 1 pour le bas ). Quand elle changera de direction, la plateforme adoptera la direction opposée.

movingBackAndForth( 0 , 1 ),

la vitesse

Le deuxième paramètre du composant movingBackAndForth permet de choisir la vitesse de déplacement de la plateforme. Plus le nombre est élevé, plus la plateforme se déplacera rapidement.

movingBackAndForth( 0, 1 , 100 ),