Skip to content

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