Échelles

pour Issa

Les échelles peuvent permettre de donner au jeu plus de verticalité et peuvent être l'occasion de présenter de nouveaux types de défis pour le joueur.

Charger une image

load.js

const PNG = [

  "ladder" ,

  "grass" ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function climbController(p) {
  // permet à un joueur de grimper sur certains objets
  const param = {
    upKey: "up",
    downKey: "down",
    climbSpeed: 400,
    climbJump: 600,
    delay: 0.05,
    sticky: true,
    catch: true,
    ...p
  }
  return {
    onLadder: false,
    savedTimeOnLadder: 0,
    isClimbing: false,
    require: ["player"],
    add() {
      this.onCollideUpdate("climb", () => this.savedTimeOnLadder = time())
      onKeyDown(param.upKey, () => this.climb(-1));
      onKeyDown(param.downKey, () => this.climb(1));
      this.on("climb", () => this.climbing());
    },
    climb(d) {
      if (this.isAlive && this.isClimbing && this.onLadder) this.move(0, d * param.climbSpeed);
    },
    update() {
      this.onLadder = time() - this.savedTimeOnLadder < param.delay
      if (this.isAlive && this.onLadder && (param.sticky || isKeyDown(param.upKey))) {
        this.gravityScale = 0;
        this.vel = vec2(0, 0);
        this.isClimbing = true;
      }
      else if (this.isClimbing && !this.onLadder) {
        if (isKeyDown(param.upKey)) this.jump(param.climbJump);
        this.isClimbing = false;
        this.gravityScale = 1;
      }
      else if (this.isClimbing && this.isGrounded()) {
        this.isClimbing = false;
        this.gravityScale = 1;
      }
      else if(this.isClimbing && !param.catch && !isKeyDown(param.upKey) ){
        this.isClimbing = false;
        this.gravityScale = 1;
      }
    },
  }
}

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
    
    "H": () => [ // échelle
      sprite("ladder"), 
      area(), 
      anchor("bot"), 
      offscreen({ hide: true }),
      z(-1),
      "climb",
    ],
    "#": () => [ // 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 }),
    ],

  },

}

Modifier un symbole

levelConf.js
tiles :

"#": () => [ // player

  climbController(),

  sprite("bean"),
  platformerController(),
  alive(),
  opacity(),
  scale(),
  health(1, 4),
  area(),
  anchor("bot"),
  body(),
  respawn(),
  falling(),
  coloring(),
  animator(),
],

Placer les objets

level.js

const LEVELS = [

  // liste des niveaux du jeu

  {
    map: `

               H         
           H   H    H ===
           H   H    H    
        #  H        H    
        
      ======             
    `,
  },
  
];

area

levelConf.js
tiles :
area( { scale: vec2(0.6 , 1) } )

climbController

levelConf.js
tiles :
climbController({

  upKey: "up",

  downKey: "down",

  climbSpeed: 400,

  climbJump: 600,

  delay: 0.05,

  sticky: true,

  catch: true,

}),