C’est parti pour le jeu de la vie version Javascript. Dans ce premier article
nous allons créer une génération de cellules au hasard et l’afficher.
J’avais annoncé dans l’article précédent que je commencerais par la
version Ruby/Opal. Je l’ai écrite mais je n’en suis pas satisfait. Les
performances sont très pauvres et j’ai écrit plus de code que nécessaire.
Je prendrais donc le temps de la nettoyer un peu avant de la publier.
Pour les tests, j’utiliserais Jasmine et la structure du projet sera la
suivante:
Dans le fichier test.html on charge les dépendances de Jasmine, puis notre
application (app/application.js) et enfin nos tests (spec/test.js).
Créer une génération de cellules au hasard
Nous allons écrire la fonction createGeneration qui
devra fabriquer un ensemble de cellules, mortes (0) ou vivantes (1), au
hasard. Mon premier test avec Jasmine est de m’assurer que cette fonction
renvoie un tableau (Array).
Lorsqu’on lance test.html Jasmine nous dit que createGeneration n’existe
pas. Le code javascript permettant de faire passer ce test consiste donc à
renvoyer un tableau vide.
Maintenant il nous faut un tableau à 2 dimensions:
La fonction suivante est suffisante pour faire passer le test.
Et maintenant on rempli notre tableau 2D avec des 1 ou des 0. D’abord un
test pour vérifier que chaque cellule du tableau contient 1 ou 0.
Puis l’implémentation.
Voilà, cette première partie du jeu de la vie en Javascript était simple et
rapide à coder. Je vais maintenant mettre les tests de coté pour me
concentrer sur l’affichage d’une génération.
Afficher une génération
Voyons pour commencer le contenu du fichier index.html.
Nous référençons bien entendu notre application.js et nous créons un
canvas de (petite) dimension 100x100. C’est dans ce canvas que nous allons
dessiner nos cellules.
Sans plus attendre, voici le contenu de application.js.
Ces quelques petites fonctions sont bien suffisantes pour afficher un
ensemble de cellules.
Dans le prochain article nous calculerons l’état des générations suivantes.