Créer un système de particules (en ECMAScript6)

Cette article technique propose un ensemble de méthodes génériques et récurrentes pour la création de systèmes de particules en mouvement.

1. Singletons VS classes

La première des bonnes idées au moment d’écrire les premières lignes de code d’un système de particule – et a fortiori pour toute application vouée à être modularisée – est de rassembler ses méthodes dans une même instance. La mécanique de classes apportée par ES6 peut venir remplacer le rattachement des méthodes à un namespace de la façon suivante :

ES5

var FieldArt = {};
FieldArt.init = function() {...}
FieldArt.move = function() {...}
...

document.addEventListener('DOMContentLoaded', function() {
  FieldArt.init();
});

var FieldArt = {};

FieldArt.init = function() {...}

FieldArt.move = function() {...}

...

document.addEventListener('DOMContentLoaded', function() {

FieldArt.init();

});

ES6

class FieldArt {
  constructor() {...}
  init() {...}
  move() {...}
  ...
}
document.addEventListener('DOMContentLoaded', () => {
  var fieldArt = new FieldArt();
  fieldArt.init();
});

class FieldArt {

constructor() {...}

init() {...}

move() {...}

...

}

document.addEventListener('DOMContentLoaded', () => {

var fieldArt = new FieldArt();

fieldArt.init();

});

Lé présence du constructeur en ES6 permet en outre de séparer les lignes qui consistent à récupérer des informations du DOM (dimensions des canvas, sources des images, …) des lignes de mise en places des paramètres du système de particule comme leur population ou les forces en présence bouncy castle with water slide.

Créer un système de particules (en ECMAScript6)

1. Singletons VS classes

Soyez le premier à commenter

Laisser un commentaire Annuler la réponse