Aller au contenu principal

Projet Jeu 3

Objectifs​

  • Créer une scène de fin de jeu en cas de défaite.
  • Revenir au jeu après avoir perdu.
  • Compter le nombre de pièces ramassées.
  • Afficher le score à l'écran de fin de jeu.
  • Créer plusieurs niveaux.

Scène​

Créer une scène de fin de jeu en cas de défaite en ajoutant ceci à la fin du code :

main.js
scene("lose", () => {
  add([text("You Lose"), color("#ffffff"), pos(center()), anchor("center")]);
});

Mettre à jour la collision avec les dangers en changeant de scène en cas de collision :

main.js
onCollide("player", "danger", (player, danger) => {
  addKaboom(player.pos);
  go("lose");
});

Pour revenir au jeu après avoir perdu, il faut mettre le niveau dans une scène. Pour cela, commencer par créer une scène game vide :

main.js
scene("game", () => {
  // contenu de la scène
});

Tout le code dans la scène sera exécuté lorsqu'on appellera la scène game avec go("game").

Déplacer les éléments du niveau dans la scène :

  • L'ajout du fond : add(["background", ...]).
  • L'ajout optionnel du texte de fond : add(["text", ...]).
  • La définition du niveau : const level = addLevel(...);
  • Les collisions : onCollide(...);
  • La définition du personnage : const player = level.get("player")[0];
  • Les contrôles du personnage : onKeyPress(...);
Exemple
main.js
scene("game", () => {
  add(["background", pos(0, 0), rect(width(), height()), color("#eee8d5")]);
  const level = addLevel(
    [
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "     ^          ",
      "    ===         ",
      "                ",
      " @     ^  $ $ $ ",
      "================",
    ],
    {
      tileWidth: 40,
      tileHeight: 40,
      tiles: {
        "@": () => [
          "player",
          circle(20),
          color("#dc322f"),
          area(),
          body(),
          anchor("topleft"),
        ],
        "=": () => [
          "grass",
          rect(40, 40),
          color("#859900"),
          outline(),
          area(),
          body({ isStatic: true }),
          anchor("topleft"),
        ],
        "$": () => [
          "coin",
          circle(20),
          color("#b58900"),
          area(),
          anchor("topleft"),
        ],
        "^": () => [
          "danger",
          rect(40, 40),
          color("#d33682"),
          area(),
          anchor("topleft"),
        ],
      },
    },
  );

  const player = level.get("player")[0];

  onKeyPress(["space", "up"], () => {
    player.jump();
  });

  onKeyDown("right", () => {
    player.move(256, 0);
  });

  onCollide("player", "danger", (player, danger) => {
    addKaboom(player.pos);
  });
}); // Fin de la scène "game"

Commencer le jeu en appelant la scène game avec go("game") à la fin du code (après les scènes) :

main.js
go("game");
Vérification

Vérifier que le jeu fonctionne toujours correctement.

Pour revenir au jeu en appuyant sur n'importe quelle touche après avoir perdu, modifier la scène de défaite :

main.js
scene("lose", () => {
  add([text("You Lose"), color("#ffffff"), pos(center()), anchor("center")]);

  onKeyPress(() => {
    go("game");
  });
});
Vérification

Vérifier qu'on peut recommencer le jeu après avoir perdu.

Score​

Pour compter le nombre de pièces ramassées, il faut :

  • Créer une variable qui va stocker le nombre de pièces ramassées.
  • Afficher le nombre de pièces ramassées à l'écran (après le fond pour qu'il soit dessiné après).
main.js
...

setGravity(1600);

let score = 0;

scene("game", () => {
  add(["background", pos(0, 0), rect(width(), height()), color("#eee8d5")]);
  const scoreLabel = add([text(score), color("#ffffff"), pos(16)]);
  ...
});

Mettre à jour le score à chaque fois que le joueur ramasse une pièce :

main.js
onCollide("player", "coin", (player, coin) => {
  ...
  score = score + 1;
  scoreLabel.text = score;
});
Vérification

Le score se met-il à jour lorsque vous ramassez une pièce ?

Afficher le score à l'écran de fin de jeu.

  • Modifier le texte de la scène de défaite pour afficher le score :
    main.js
    scene("lose", () => {
      add([text("You Lose " + score), color("#ffffff"), pos(center()), anchor("center")]);
      ...
    });
  • Utiliser \n pour faire un saut de ligne dans le texte.
Question

Essayer de ramasser des pièces, toucher un danger et recommencer le jeu. Que se passe-t-il et comment corriger cela ?

Plusieurs niveaux​

Créer un autre niveau :

  • Copier la scène game et la renommer game-2.
  • Renommer la première scène game-1.
  • Vérifier que tout fonctionne toujours correctement.
  • Ajouter un portail dans le premier niveau qui permet de passer au deuxième niveau.
    • Ajouter un nouveau type de tuile * avec comme tag portal.
    • Lorsqu'on touche un portail, on passe au deuxième niveau.

Bonus​

Quelques idées de fonctionnalités à ajouter.

Sprites animés​

  • Dessiner une sprite avec plusieurs images (animation) sur Piskel.
  • Sauvegarder la sprite dans un fichier png, chaque frame de l'animation sera sur une colonne.
main.js
loadSprite("identifiant", "chemin-vers-l'image", {
  sliceX: 1, // Nombre de colonnes
  sliceY: 2, // Nombre de lignes
  anims: {
    // Nom de l'animation avec les index des images à afficher
    idle: {
      from: 0,
      to: 1,
      loop: true,
      speed: 2, // Nombre de frames par seconde
    },
  },
});

...

[
  "tag",
  sprite("identifiant", {
    width: 40,
    height: 40,
    anim: "idle", // démarrer avec l'animation "idle"
  }),
]

Shake​

Faire trembler l'écran en utilisant la fonction shake() :

main.js
shake(16);

Double Saut​

Pour que le personnage puisse faire un double saut, ajouter le composant doubleJump :

main.js
const player = add([
  "player",
  circle(32),
  color("#dc322f"),
  pos(128, 256),
  area(),
  body(),
  doubleJump(2),
]);

Utiliser la méthode doubleJump() au lieu de jump() pour faire sauter le personnage :

main.js
player.doubleJump();

Quitter l'écran​

Définir une action lorsque le personnage sort de l'écran, ajouter le composant offscreen() :

main.js
const player = add([
  "player",
  circle(32),
  color("#dc322f"),
  pos(128, 256),
  area(),
  body(),
  offscreen(),
]);

Définir les actions à effectuer lorsque le personnage sort de l'écran :

player.onExitScreen(() => {
  shake(8);
});

Son​

Voir la documentation sur les sons.

Points de vie​

Voir health.

Shooter​

Voir l'exemple.

Références​

Dernière mise à jour le