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 :
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 :
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 :
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
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.
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 :
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
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 :
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-lagame-2
(renommez aussi la première scènegame-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 tagportal
- Lorsqu'on touche un portail, on passe au deuxième niveau
- Ajoutez un nouveau type de tuile
Checkpoint
Exemple
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");
<!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.
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()
:
shake(16);
Double Saut
Pour que votre personnage puisse faire un double saut, il faut lui ajouter le composant doubleJump
:
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 :
player.doubleJump();
Quitter l'écran
Pour définir une action lorsque votre personnage sort de l'écran, il faut lui ajouter le composant offscreen()
:
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 :
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 :
scene("game", () => {
add([rect(width(), height()), color(227, 242, 253)]);
...
});
Avec une image :
loadSprite("background", "sprites/background.gif");
...
scene("game", () => {
add([sprite("background", {width: width(), height: height()})]);
...
});