Apprendre la programmation aux enfants

Cela faisait déjà quelques mois, que le plus grand de mes 2 garçons (qui a 7 ans et demi), me demandait de lui apprendre à programmer des jeux sur ordinateur. J’ai eu tout de suite envie de répondre positivement à sa demande, mais en même temps j’étais hésitant quant à l’approche à adopter (je souhaitais l’initier en douceur, sans risquer de l’effrayer avec trop de code…).

Mon fils avait déjà été initié à Scratch par sa maîtresse, et nous avions aussi expérimenté cette solution ensemble à la maison. Scratch me semblait pas mal pour découvrir les premiers rudiments de la programmation, mais faute de temps, je n’avais pas réellement exploré toutes les possibilités de l’outil. Plus récemment, nous avions testé ensemble CodeCombat, un logiciel d’apprentissage en ligne destiné à s’initier à la programmation dans différents langages (nous avions testé cette solution avec l’apprentissage de Javascript). La solution me plaisait assez, et mon fils avait semblé « accrocher », mais après réflexion, son verdict fut sans appel : « c’est déjà tout fait, moi je veux créer mes propres jeux ».

Par ailleurs, j’avais parcouru plusieurs livres (en anglais) sur la programmation de jeux en Javascript (exploitant notamment l’API Canvas de la norme HTML5). Mais chacun de ces livres présentait différents moteurs Javascript de création de jeux, et je n’arrivais pas à me décider sur l’utilisation de l’un ou l’autre de ces moteurs pour initier un enfant de 7 ans à la programmation.

A la veille des congés scolaires de ce Noël 2014, je tombe sur un article publié par le magazine WebDesign (numéro 36) qui s’intitule : « Créer des jeux HTML5 ». En parcourant l’article, je me suis dit que le jeu proposé (un petit jeu de plateforme très classique), pourrait plaire à mon garçon.

Le jeu proposé dans l’article s’appuie sur le moteur de jeu Crafty.js, complété d’un moteur de génération d’effets physiques, Box2DWeb.js, pour le mouvement des personnages. Le code Javascript du jeu lui-même est relativement simple. J’y vais donc par étapes, montrant à mon garçon comment constituer une page HTML. En ajoutant progressivement différents éléments à la page (un titre, puis une balise « div » avec un peu de texte dedans), et en rafraîchissant périodiquement la page dans le navigateur, j’ai pu lui montrer les premiers rudiments d’un site internet. Puis j’ai ajouté les premiers éléments du code Javascript. Au fur et à mesure de l’avancement, je lui ai montré les erreurs que je faisais (signalées par la console du navigateur) et comment les corriger. Il ne semblait pas du tout s’ennuyer et me posait plein de questions.

Quand nous sommes arrivés à la phase de création des personnages, j’ai proposé à mon fils de les dessiner sur une feuille, ce qu’il a fait avec grand plaisir. J’ai ensuite scanné ses dessins, et il les a retravaillés sur le logiciel Gimp, en ajoutant de la couleur via le pinceau et le pot de peinture. Nous avons redimensionné les dessins, en les mettant aux dimensions requises pour le jeu et nous avons vu les personnages apparaître sur l’écran, les uns après les autres, au fur et à mesure de notre progression. J’ai ensuite montré à mon garçon le principe de la couleur de transparence (pour le contour des personnages), et il a vu immédiatement la différence de rendu sur l’écran.

C’est mon plus jeune fils, qui a 3 ans et demi, qui s’est attelé à la tâche de dessiner le fond d’écran du jeu. Il faut dire qu’il venait périodiquement voir où nous en étions, et il a finalement eu envie de participer lui aussi, à sa façon. Pour dessiner le fond d’écran, il a utilisé Pixia, un petit logiciel de dessin, plus convivial pour les enfants que Gimp, dont l’interface est un peu austère, il faut bien le reconnaître. Comme mon fils a beaucoup usé de la gomme, on voit plus le fond d’écran rose (par transparence) que les couleurs qu’il avait placées dans un premier temps. Mais le rendu final est finalement très sympa.

Le jeu fonctionne, même si, bien évidemment, il n’est pas complètement fini (les garçons ont repéré quelques petits bugs en jouant avec, mais rien de grave). On va donc le retravailler, l’améliorer, sans doute lui ajouter de nouveaux tableaux (il n’en contient qu’un pour l’instant). Vous trouverez la toute première version du jeu (conforme à l’article du magazine Webdesign, hormis le design des personnages et du décor) en cliquant sur ce lien. Je l’ai mis en ligne pour que mes enfants puissent le montrer à la famille et aux amis.

Je me suis régalé à créer ce premier jeu avec mes enfants. Cela m’a rappelé l’époque, fort lointaine, où je créais des jeux sur mon Commodore64, à partir de listings trouvés dans divers magazines d’informatique. Mais surtout cela m’a permis de vérifier que Javascript était un langage qui pouvait être tout à fait adapté à l’apprentissage de la programmation, pour de jeunes enfants. Bien évidemment, c’est moi qui ai saisi la majeure partie du code, mais en y allant par étapes, en expliquant ce que je faisais, et pourquoi je le faisais, j’ai vu dans le regard de mon grand garçon qu’il n’en perdait pas une miette. De plus, le moteur Crafty.js me semble une bonne solution pour le développement de jeux adaptés à de jeunes enfants, du coup je vais étudier plus avant sa documentation, qui me semble plutôt bien faite. Et je vais étudier aussi, pour comparaison, la documentation de Phaser, un autre moteur de jeu, qui semble également très puissant et très polyvalent. Je vous tiendrai au courant de mes découvertes, et des prochains développements réalisés avec mon grand garçon, qui semble avoir plein d’idées, suite à cette première expérience.

Sur ce, bonnes fêtes de fin d’année à tous, et à l’année prochaine !!!