Gymnase

Apparence

Scène, score et bonus ​

Scène ​

Créez votre scène de fin de jeu en cas de défaite en ajoutant ceci à la fin de votre code :

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

Mettez à jour votre collision avec les dangers en changeant de scène en cas de collision :

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

Question

Que se passe-t-il lorsque vous touchez un danger ?

Pour pouvoir revenir au jeu après avoir perdu, il faut que votre niveau soit une scène. Pour cela, commencez par créer une scène game vide :

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

Tout ce qui se trouve dans cette scène sera exécuté lorsque vous appellerez la scène game avec go("game").

Déplacez les éléments de votre niveau dans cette scène :

  • 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(...);
Vous devriez obtenir quelque chose comme ceci
js
scene("game", () => {
  const level = addLevel(
    [
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "     ^          ",
      "    ===         ",
      "                ",
      " @     ^  $ $ $ ",
      "================",
    ],
    {
      tileWidth: 40,
      tileHeight: 40,
      tiles: {
        "@": () => [
          "player",
          circle(20),
          color(33, 150, 243),
          area(),
          body(),
          anchor("topleft"),
        ],
        "=": () => [
          "grass",
          rect(40, 40),
          color(27, 94, 32),
          outline(),
          area(),
          body({ isStatic: true }),
          anchor("topleft"),
        ],
        $: () => [
          "coin",
          circle(20),
          color(253, 216, 53),
          area(),
          anchor("topleft"),
        ],
        "^": () => [
          "danger",
          rect(40, 40),
          color(244, 67, 54),
          area(),
          anchor("topleft"),
        ],
      },
    },
  );

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

  onCollide("player", "coin", (player, coin) => {
    coin.destroy();
  });

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

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

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

  onKeyDown("left", () => {
    player.move(-256, 0);
  });
}); // Fin de la scène game

Finalement, n'oubliez pas de commencer le jeu en appelant la scène game avec go("game") à la fin de votre code en dehors des scènes.

js
go("game");

Vérification

Vérifiez que votre jeu fonctionne toujours correctement.

Vous pouvez maintenant revenir au jeu en appuyant sur n'importe quelle touche après avoir perdu en modifiant votre scène de défaite :

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

  onKeyPress(() => { 
    go("game"); 
  }); 
});

Vérification

Vérifiez que vous pouvez bien recommencer le jeu après avoir perdu.

Compteur de points ​

Votre personnage peut ramasser des pièces. Il faut donc compter le nombre de pièces ramassées. Pour cela, 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
js
setGravity(1600);

let score = 0; 

scene("game", () => {
  const scoreLabel = add([text(score), color(0, 0, 0), pos(16)]); 
  ...
});

Il faut maintenant mettre à jour le score à chaque fois que le joueur ramasse une pièce :

js
onCollide("player", "coin", (player, coin) => {
  coin.destroy();
  score = score + 1; 
  scoreLabel.text = score; 
});

Vérification

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

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

Question

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

Comment corriger cela ?

Deuxième niveau ​

Créez un deuxième niveau :

  • Copiez la scène game et renommez-la game-2 (renommez aussi la première scène game-1)
  • Vérifiez de tout fonctionne toujours correctement
  • Ajoutez un portail dans le premier niveau qui permet de passer au deuxième niveau
    • Ajoutez un nouveau type de tuile * avec comme tag portal
    • Lorsqu'on touche un portail, on passe au deuxième niveau

Checkpoint ​

Exemple
js
kaboom({
  background: [227, 242, 253],
  width: 640,
  height: 480,
});

setGravity(1600);

let score = 0;

scene("game", () => {
  const scoreLabel = add([text(score), color(0, 0, 0), pos(16)]);

  const level = addLevel(
    [
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "                ",
      "     ^          ",
      "    ===         ",
      "                ",
      " @     ^  $ $ $ ",
      "================",
    ],
    {
      tileWidth: 40,
      tileHeight: 40,
      tiles: {
        "@": () => [
          "player",
          circle(20),
          color(33, 150, 243),
          area(),
          body(),
          anchor("topleft"),
        ],
        "=": () => [
          "grass",
          rect(40, 40),
          color(27, 94, 32),
          outline(),
          area(),
          body({ isStatic: true }),
          anchor("topleft"),
        ],
        $: () => [
          "coin",
          circle(20),
          color(253, 216, 53),
          area(),
          anchor("topleft"),
        ],
        "^": () => [
          "danger",
          rect(40, 40),
          color(244, 67, 54),
          area(),
          anchor("topleft"),
        ],
      },
    },
  );

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

  onCollide("player", "coin", (player, coin) => {
    coin.destroy();
    score = score + 1;
    scoreLabel.text = score;
  });

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

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

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

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

scene("lose", () => {
  add([text("You Lose"), color(0, 0, 0), pos(center()), anchor("center")]);

  onKeyPress(() => {
    go("game");
  });
});

go("game");
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Kaboom</title>
    <script src="https://unpkg.com/kaboom@3000.1/dist/kaboom.js"></script>
  </head>
  <body>
    <script src="game.js"></script>
  </body>
</html>

Bonus ​

Sprites animés ​

Après avoir dessiné votre sprite avec plusieurs images, vous pouvez créer une animation :

Sauvegardez votre sprite dans un fichier png, vous aurez chaque frame de votre animation sur une colonne.

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
    },
  },
});

...

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

Shake ​

Vous pouvez faire trembler l'écran en utilisant la fonction shake() :

js
shake(16);

Double Saut ​

Pour que votre personnage puisse faire un double saut, il faut lui ajouter le composant doubleJump :

js
const player = add([
  "player",
  circle(32),
  color(244, 67, 54),
  pos(128, 256),
  area(),
  body(),
  doubleJump(2), // Nombre de sauts
]);

Puis, vous devez utiliser la méthode doubleJump() pour faire sauter votre personnage :

js
player.doubleJump();

Quitter l'écran ​

Pour définir une action lorsque votre personnage sort de l'écran, il faut lui ajouter le composant offscreen() :

js
const player = add([
  "player",
  circle(32),
  color(244, 67, 54),
  pos(128, 256),
  area(),
  body(),
  offscreen(), 
]);

Puis, vous pourrez définir les actions à effectuer lorsque votre personnage sort de l'écran :

js
player.onExitScreen(() => {
  shake(10);
});

Arrière-plan d'une scène ​

Vous pouvez définir un arrière-plan pour une scène en ajoutant un élément qui prend toute la taille de l'écran :

js
scene("game", () => {
  add([rect(width(), height()), color(227, 242, 253)]); 
  ...
});

Avec une image :

js
loadSprite("background", "sprites/background.gif"); 

...

scene("game", () => {
  add([sprite("background", {width: width(), height: height()})]); 
  ...
});

Références ​