Projet Jeu

Le but de ce projet est de créer un jeu de plateformes en JavaScript avec la bibliothèque Kaboom.

Objectifs

• Concevoir un jeu de plateformes en JavaScript en utilisant la librairie Kaboom
• Créer des sprites
• Concevoir des niveaux
• Gérer les scènes
• Gérer les collisions

Rendu

Les éléments suivants sont à rendre sur Teams dans le devoir “Projet Jeu" au plus tard le dimanche 7 janvier 2024 à 23h59 :

• Un fichier zip contenant le code source du jeu (dossier projet-jeu)
  • Clic droit sur le dossier projet-jeu > Compresser "projet-jeu"
• Renommez le fichier projet-jeu.zip créé avec votre prénom, nom et le nom de votre jeu en minuscule sans accent (ex. prenom-nom-nomdujeu.zip)
  • Vous pouvez vérifier le fichier zip en le mettant sur https://app.netlify.com/drop

Les travaux pratiques des semaines du 8 au 19 janvier 2024 (selon votre groupe de TP) seront consacrés à un travail écrit sur papier de 45 minutes.
Vous pourrez découvrir les projets de vos camarades durant la seconde période.

Evaluation

L'évaluation du projet se fera principalement sur le travail écrit avec des points bonus selon le rendu du projet. Le rendu du projet est obligatoire pour pouvoir passer le travail écrit.

Travail écrit

• Durée : 45 minutes
• Matériel autorisé : calculatrice

Exemples de question

Quels sont les raccourcis clavier pour :

• Sauvegarder un fichier ?
• Copier la sélection ?
• Coller ?
• Couper la sélection ?
• Annuler la dernière action ?
• Bonus : formater le code ?

Réponse

• Sauvegarder un fichier : Cmd + S
• Copier la sélection : Cmd + C
• Coller : Cmd + V
• Couper la sélection : Cmd + X
• Annuler la dernière action : Cmd + Z
• Formater le code : Alt + Maj + F (Maj = Shift en anglais)

Cmd sur Mac = Ctrl sur Windows

Vous lancez le jeu suivant :

kaboom({
  background: [227, 242, 253],
  width: 100,
  height: 60,
});

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

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

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

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

Vous appuyez sur "espace" pour faire sauter le personnage mais rien ne se passe, pourquoi et comment corriger le problème ?

Réponse

La touche de saut est "↑" (up) et non "espace" (space). On peut soit changer la touche de saut, soit rajouter le saut avec "espace" :

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

Vous essayez de déplacer le personnage à gauche avec la touche fléchée "←" mais rien ne se passe (le déplacement à droite fonctionne par contre) , pourquoi et comment corriger le problème ?

Réponse

Il faut rajouter le déplacement à gauche avec la touche "←" :

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

Combien y a-t-il de cases dans le niveau ?

Réponse

L'écran fait 100x60 pixels et chaque case fait 20x20 pixels, il y a donc 5x3 = 15 cases.

Que se passera-t-il si on rajoute le code suivant à la fin ?

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

Réponse

Une animation d'explosion "Kaboom" se déclenchera sur le personnage quand ce dernier touchera une pièce.

Rendu du projet

Critères d'acceptation

• Le rendu doit être fait à temps
• Présenter son jeu au groupe
• Être capable de justifier chaque ligne de son code (pourquoi tel ou tel choix)

Critères de réussite

• Avoir un jeu fonctionnel, jouable et cohérent (pas de bugs, pas de comportements étranges (saut infini), etc.)
• Donner un nom à son jeu (dans le titre de la page HTML)
• Le code est formaté
• Avoir au moins un sprite personnalisé
• Utiliser le système de niveau de Kaboom
• Le jeu contient au moins une scène de fin (en cas de victoire et/ou défaite)
• Recommencer le jeu depuis la scène de fin
• Gérer les collisions entre les différents éléments du jeu (pièces, ennemis, etc.)
• Compteur de points

Critères d'excellence

• Le jeu contienne au moins 2 niveaux avec un portail pour passer d'un niveau à l'autre
• Le jeu est complètement personnalisé avec les sprites (statiques et animés) et les textes
• Le code est clair et bien structuré (espaces, fonctions, variables, commentaires, etc.)
• Maîtriser les variables, à choix (et cumulable) parmi :
  • Compteur de points (pièces ramassées, ennemis tués, etc.) différent de celui donné en exemple
  • Compteur de vies
  • Compteur de temps
  • Utilisation de constantes et/ou de variables globales
• Maîtriser les fonctions, à choix (et cumulable) parmi :
  • Structurer le code en fonctions (éviter de dupliquer du code)
  • Shooter (tirer des projectiles)
  • Gestion et affichage des points de vie
• Avoir un gameplay intéressant et diversifié (plusieurs niveaux, plusieurs ennemis, plusieurs mécaniques de jeu, etc.)
  • Voir la section Bonus pour des idées