Programme principal

Dans le fichier main.mjs, nous allons maintenant utiliser la classe Balles pour mainpuler la canvas et le DOM.

main.mjs

import { Balles } from './classes/Balles.mjs'; // Importe la classe Balles depuis le fichier Balles.mjs

// Éléments du DOM
const canvas = document.querySelector('canvas');
const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');
const clearButton = document.querySelector('#clear');
const spanNombreBalles = document.querySelector('#balls-count');

let nombreInitialDeBalles = 5;

// Crée une nouvelle instance de la classe Balles
let balles = new Balles(canvas, nombreInitialDeBalles, window.innerWidth, window.innerHeight);

// Appelle la méthode render de l'instance balles
balles.render();

// Met à jour le contenu de l'élément spanNombreBalles avec le nombre de balles
spanNombreBalles.textContent = balles.nombreBalles;

// Écoute l'événement resize (redimensionnement) sur la fenêtre
// Met à jour la largeur et la hauteur du canvas avec la largeur et la hauteur de la fenêtre
window.addEventListener('resize', () => {
    balles.width = window.innerWidth;
    balles.height = window.innerHeight;
});

// Écoute l'événement click sur le canvas
// Ajoute une nouvelle balle à la position de la souris
canvas.addEventListener('click', (event) => {
    balles.ajouterBalle(event.clientX, event.clientY);
    spanNombreBalles.textContent = balles.nombreBalles; // Met à jour le nombre de balles
});

// Écoute l'événement click sur le bouton start
// Appelle la méthode demarrer de l'instance balles
startButton.addEventListener('click', function () {
    balles.demarrer();
});

// Écoute l'événement click sur le bouton stop
// Appelle la méthode stop de l'instance balles
stopButton.addEventListener('click', function () {
    balles.stop();
});

// Écoute l'événement click sur le bouton clear
// Appelle la méthode reinitialiser de l'instance balles
clearButton.addEventListener('click', function () {
    balles.reinitialiser();
    spanNombreBalles.textContent = balles.nombreBalles;
});

Prenez un moment pour étudier le code princpal de l’application.

Remarque

Si on observe le code entre le fichier main.mjs et les classes Balle.mjs et Balles.mjs, on peut voir que l’on ne fait aucune référence à l’API DOM dans les classes d’objets, uniquement au contexte du canvas.

Cela permet de séparer la logique de l’animation des balles, de la logique de l’interface utilisateur.

Git

Il serait judicieux de créer un dépôt git pour versionner notre projet.

Si vous utilisez VSCode, vous pouvez créer un dépôt et le déployer sur Github directement depuis l’interface.

Sinon, vous pouvez utiliser les commandes suivantes pour :

1. initialiser un dépôt git :

git init

2. créer un commit initial :

git add .
git commit -m "Initial commit"

3. ajouter un dépôt distant (Pensez à modifier l’url du dépôt, celle-ci est un exemple) :

git remote add origin git@github.com:User/UserRepo.git

4. pousser le code sur le dépôt distant :

git push -u origin main

Conclusion

Dans cette première partie du tutoriel, nous avons :

• créé une architecture html basique.
• encapsulé les balles dans des classes d’objets Balle et Balles.
• utilisé ces classes pour gérer l’animation des balles dans le canvas.
• séparé la logique de l’animation des balles de la logique de l’interface utilisateur.

De plus, nous avons en réalité utilisé d’autres API que Canvas :

• DOM pour manipuler les éléments HTML.
• RequestAnimationFrame pour animer les balles.
• Math pour générer des nombres aléatoires.
• Event pour gérer les événements utilisateur.

Vous devriez maintenant avoir une application frontend fonctionnelle.

Nous allons laisser cette partie de côté pour le moment et commencer à développer la partie backend de notre application.