Projet Jeu 1

Rendu

Le rendu final du projet noté comprendra :

Site web avec le jeu.
Journal de bord indiquant les étapes réalisées et les difficultés rencontrées pour chaque semaine.

Objectifs

Prendre en main JavaScript avec la librairie KAPLAY.

Théorie

JavaScript

Le JavaScript est un langage de programmation qui permet de créer des pages web dynamiques.

Nous allons lister quelques différences notables entre JavaScript et Python. Pour plus de détails : https://grafikart.fr/tutoriels/variables-2055

Commentaires

Utiliser // pour faire un commentaire sur une seule ligne et /* */ pour faire un commentaire sur plusieurs lignes (au lieu de # en Python).

// Ceci est un commentaire sur une ligne

/*
 Et ici un commentaire
 sur plusieurs lignes
*/

Variables

Les mots-clés let et const sont utilisés pour déclarer une variable. La différence est que let permet de modifier la valeur de la variable après sa déclaration alors que const ne permet pas de modification.

let x = 10;
const couleur = "bleu";

x = 20; // OK
couleur = "rouge"; // Erreur

Types de données

Les types de données sont globalement les mêmes qu'en Python.

const nombre_entier = 10;
const nombre_decimal = 3.14;
const chaine_de_caractere = "Hello world";
const booleen = true;
const tableau = [1, 2, 3, "vert", false];

// Une variable peut aussi être non définie
const non_definie = undefined;

Console

On peut afficher des messages dans la console avec la fonction console.log.

console.log("Hello world");

Blocs de code

Les accolades {} définissent un bloc de code (au lieu de l'indentation en Python). Les blocs de code sont utilisés pour définir des conditions, des boucles, des fonctions, etc.

if (note >= 4) {
  console.log(`Réussi !`);
}

Système de coordonnées

Le système de coordonnées usuel en informatique n'est pas le même qu'en mathématiques :

L'origine est en haut à gauche de l'écran.
L'axe des abscisses (x) est orienté vers la droite.
L'axe des ordonnées (y) est orienté vers le bas.
Les coordonnées sont exprimées en pixels (x, y).

Source : http://obligement.free.fr/articles/c_3denc_notions_base.php

Pratique

Mise en place

Changer le navigateur par défaut en Firefox ou Chrome
- Pomme (en haut à gauche) > Préférences Système > Général > Navigateur par défaut
- https://support.apple.com/fr-ch/102362
Dans le dossier informatique, créer un fichier Word projet-jeu-journal-prenom-nom.docx pour le journal de bord (avec son prénom et nom).

Créer un dossier projet-jeu dans votre dossier informatique

.
└── 2m/
    └── informatique/
        ├── projet-jeu
        ├── projet-jeu-journal-prenom-nom.docx
        └── html

Ouvrir le dossier projet-jeu dans Visual Studio Code.
Installer l'extension Live Server dans Visual Studio Code.
- Cliquer sur l'icône des extensions (à gauche).
- Chercher Live Server et installer l'extension.
Créer un fichier index.html dans le dossier projet-jeu avec le contenu suivant :

index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Kaplay</title>
    <script src="https://unpkg.com/kaplay@4000.0.0-alpha.26/dist/kaplay.js"></script>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

Créer un fichier main.js avec le contenu suivant :

main.js
kaplay({
  width: 640,
  height: 480,
  background: "#000000",
  letterbox: true,
});

add(["background",
  rect(width(), height()),
  pos(0, 0),
  color("#eee8d5"),
]);

add([
  "text",
  text("Hello world"),
  pos(128, 128),
  color("#073642"),
]);

Faire un clic droit sur le fichier index.html et cliquez sur Open with Live Server
- Une nouvelle page web devrait s'ouvrir avec le message Hello world.

Ajouter un personnage

Définir la gravité :
main.js
```
setGravity(1600);
```

Ajouter un personnage :

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

Ajouter un sol :

main.js
add([
  "ground",
  rect(width(), 64),
  pos(0, height() - 64),
  color("#859900"),
  area(),
  body({ isStatic: true }),
]);

Ajouter une action pour faire sauter le personnage :
main.js
```
onKeyPress("space", () => {
  player.jump();
});
```
Pour que votre personnage bouge vers la droite lorsque vous appuyez sur la flèche droite, ajouter :
main.js
```
onKeyDown("right", () => {
  player.move(256, 0);
});
```
Résultat attendu.
Ajouter le code pour pouvoir bouger à gauche avec la touche fléchée.
- La méthode move prend deux paramètres : la vitesse horizontale et la vitesse verticale.
Ajouter le code pour que le personnage saute aussi avec la touche fléchée du haut.
Ajouter le code pour que le personnage saute seulement s'il est au sol.
- Utiliser la méthode player.isGrounded().

Personnaliser le jeu

Modifier et tester les éléments suivants (le sélecteur de couleurs permet de trouver les codes couleur RGB) :
- la taille du personnage
- la couleur du personnage
- la position du personnage
- la couleur du sol
- le texte affiché
- la position du texte
- la vitesse horizontale (gauche et droite) du personnage
- la gravité

Ajouter une plateforme

main.js
add([
  "platform",
  rect(64, 64),
  color("#859900"),
  pos(256, 330),
  area(),
  body({ isStatic: true }),
]);

Supprimer body({ isStatic: true }) de la plateforme et observer son comportement.
- Lire la documentation pour comprendre ce que fait body.
Ajouter body({ isStatic: false }) à la plateforme et observer son comportement.
- Lire la documentation pour comprendre ce que fait isStatic.
Ajouter un bord autour de la plateforme avec la fonction outline.
Modifier la vitesse initiale des sauts du personnage avec la fonction jumpForce.

Formatage du code

Pour formater (aligner le code pour améliorer la lisibilité) le contenu d'un fichier sur Visual Studio Code, utiliser le raccourci Alt + Shift + F (Mac) ou Ctrl + Shift + F (Windows).

Journal de bord

Compléter le journal de bord chaque semaine avec les informations suivantes :

Date
Tâches réalisées
Difficultés rencontrées
Solutions trouvées

Dessiner le premier niveau du jeu de plateforme sur une grille 16x12 cases, mettre des plateformes, des pièces à collecter et des obstacles à éviter.

Sprite

Un sprite est une image qui représente un objet dans un jeu vidéo. Par exemple, dans un jeu de plateforme, les personnages, les ennemis, les pièces, etc. sont des sprites. Ils peuvent être statiques ou animés. Dans le cas d'un sprite animé, il s'agit d'une succession d'images qui donne l'illusion du mouvement.

Créer un dossier sprites dans le dossier projet-jeu.
Créer un sprite sur Piskel et exportez-le en GIF dans le dossier sprites.
- Choisir la taille du sprite : 40x40 pixels.
  - Cliquer sur Resize à droite.
  - Changer la largeur et la hauteur à 40 pixels.
- Dessiner le sprite (pour votre personnage principal).
- Exporter en GIF et le mettre dans le dossier sprites en le renommant player.gif.
Pour charger le sprite dans le code (mettre juste après le kaplay()).
- player est l'identifiant du sprite (le nom qu'on lui donne dans le code).
- sprites/player.gif est le chemin vers le fichier GIF.
- Utiliser l'identifiant à chaque fois qu'on souhaite utiliser ce sprite dans le code.

main.js
kaplay({
  width: 640,
  height: 480,
  background: "#000000",
  letterbox: true,
});

loadSprite("player", "sprites/player.gif");

Modifier la création du personnage pour utiliser le sprite (deux lignes à supprimer).

main.js
const player = add([
  "player",
  sprite("player", { width: 40, height: 40 }),
  pos(128, 256),
  area(),
  body(),
]);

Checkpoint

Exemple

main.js
kaplay({
  width: 640,
  height: 480,
  background: "#000000",
  letterbox: true,
});

add(["background", rect(width(), height()), pos(0, 0), color("#eee8d5")]);

add(["text", text("Hello world"), pos(128, 128), color("#073642")]);

setGravity(1600);

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

add([
  "ground",
  rect(width(), 64),
  color("#859900"),
  pos(0, height() - 64),
  area(),
  body({ isStatic: true }),
]);

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

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

add([
  "platform",
  rect(64, 64),
  color("#859900"),
  pos(256, 330),
  area(),
  body({ isStatic: true }),
]);

Objectifs​

Théorie​

JavaScript​

Commentaires​

Variables​

Types de données​

Console​

Blocs de code​

Système de coordonnées​

Pratique​

Mise en place​

Ajouter un personnage​

Personnaliser le jeu​

Formatage du code​

Journal de bord​

Sprite​

Checkpoint​