Pourquoi utiliser la programmation événementielle pour développer vos jeux HTML5 ?

La programmation événementielle en javascript est surtout connue pour écouter des événements sur le DOM (HTML). Par exemple pour intercepter le click de la souris ou le resize de la fenêtre.

Si vous utilisez jQuery, la syntaxe proposée est assez élégante :

$("#link").on("click", function(e) {
    alert("link clicked !");
});

Allons au-delà des événements prédéfinis par le navigateur : créons les nôtres.

Un exemple concret

Vous développez un jeu avec un personnage qui a la faculté de tuer des monstres.

Lorsqu’un monstre est tué, vous souhaitez :

  • Détruire le monstre (Effet de mort + suppression du cadavre)
  • Donner de l’or
  • Donner des points d’expérience

Grâce à la programmation événementielle, mettre en place chacun de ces comportements est un jeu d’enfant.

Voici un schéma qui représente la mort d’un monstre :

killmonster

Un peu de code

L’idée est d’avoir un objet global que nous allons appeler sandbox qui permet d’écouter (.on) ou d’émettre (.emit) un événement.

Pour créer cet objet je vais utiliser la lib EventEmitter2, mais il en existe de nombreuses autres (vous pouvez aussi la créer vous-même) que je vais lister à la fin de cet article.

var sandbox = new EventEmitter2();

Supposons que notre application est déjà structurée en modules :

  • Player > Pour donner de l’or et des points d’expérience
  • Monster > Pour détruire le monstre

A l’endroit exact dans le code où le monstre se fait tuer :

sandbox.emit("kill monster", player, monster);

Et maintenant séparément dans chaque module :

// Inside the player module
sandbox.on("kill monster", function(player, monster) {
    // 1 - player object earn experience from monster object
    // 2 - player object earn gold from monster object
});

// Inside the monster module
sandbox.on("kill monster", function(player, monster) {
    // Play death animation and destroy the monster object
});

Lorsque vous avez trop de code dans un événement, ça veut dire que vous pouvez probablement faire des proxies.

Par exemple lorsque le joueur tue un monstre, il gagne de l’expérience, et lorsqu’il gagne de l’expérience on doit vérifier si il a gagné un niveau ainsi que mettre à jour sa barre d’expérience :

sandbox.on("kill monster", function(player, monster) {
    this.emit("earn experience", player, 10);
    this.emit("earn gold", player, 2);
});

sandbox.on("earn experience", function(player, amount) {
    // 1 - Add experience
    // 2 - Check if level up
    // 3 - Draw the updated Experience Bar
});

Un gros avantage est que vous pouvez supprimer entièrement un module sans aucune conséquence sur le jeu, celui-ci fonctionnera toujours parfaitement vu que le module est complétement indépendant des autres.

Cela aide également à la lisibilité, que vous soyez seul ou plusieurs développeurs sur le même projet, dès qu’il prendra de l’ampleur, cela sera toujours simple d’intervenir sur un bout de code en particulier. Sous réserve que vos modules soient bien découplés.

Finalement, le meilleur avantage à mon goût est que cela facilite la façon de concevoir l’application. Vous pouvez, à la manière du BDD, écrire dans un premier temps, chaque comportement sans les coder concrètement, cela permet d’avoir une vue d’ensemble et de voir si votre structure tient la route et gagner un temps considérable si vous devez pivoter.

Libs de programmation événementielle

3 thoughts on “Pourquoi utiliser la programmation événementielle pour développer vos jeux HTML5 ?”

  1. Top merci pour cet article :)

    À savoir que la programmation événementielle est aussi une best-practice pour les applications web.

    J’aimerai avoir ton avis d’expert sur le développement de jeux en HTML5, d’après toi, quel est la ou les meilleures librairies actuelles pour concevoir un jeu HTML5 avec et en 2D Isométrique (qui en plus serait facile à utiliser avec la programmation événementielle) ?

    Merci Cyrille !

  2. Salut Sébastien,
    A vrai dire je n’ai jamais fait de 2D Iso. Mais je sais que Crafty le gère nativement et est pas mal orienté programmation événementielle.

    Ceci dit il n’y a aucun Game Engine que je connaisse qui exploite vraiment à fond ce pattern. A toi d’en faire une surcouche à ta sauce.

Leave a Reply

Your email address will not be published. Required fields are marked *