CodeCombat : apprendre le code au travers un jeu

L'apprentissage du code, et plus largement du développement est une tâche qui peut s'avérer hardue, notamment lorsque l'on peine à trouver des contextes d'utilisation concrets, ce qui est notamment le cas à  l'école

C'est dans ce contexte que je vous présente aujourd'hui CodeCombat, un site web, ou plutôt un jeu en ligne, dont l'objectif est de faire apprendre la programmation en s'amusant, c'est à dire en jouant. Il s'agit en somme d'une plateforme d'apprentissage en ligne qui tourne 100% autour de la gamification.

CodeCombat a avant tout pour cible les étudiants et les salles de classe. Cette plateforme peut très bien être utilisée dans le cadre de TP afin de rendre l'apprentissage du code un peu moins ennuyante et un peu plus concrète (en tout cas pour les bases) :

Voici la liste des langages que CodeCombat permet d'aborder :

Voici la définition Wikipédienne de la gamification ("ludification" en bon français) :

"La ludification, couramment désignée par l'anglicisme gamification, est le transfert des mécanismes du jeu dans d’autres domaines, en particulier des sites web, des situations d'apprentissage, des situations de travail ou des réseaux sociaux. Son objet est d’augmenter l’acceptabilité et l’usage de ces applications en s’appuyant sur la prédisposition humaine au jeu." Source : Wikipédia

La gamification est donc le fait d'apporter les attributs et caractéristiques d'un jeu vidéo à un domaine qui n'en possède pas à la base. Nous retrouverons par exemple dans CodeCombat un scénario, qui permet d'appliquer un domaine d'apprentissage précis, un contexte, qui justifie l'utilisation de tel ou tel algorithme, de telle ou telle fonction, un système de point, de récompense et d’expérience, nous aurons aussi accès à un héro dont l'équipement pourra être amélioré et personnalisé.

Le principe de CodeCombat est donc le suivant, le "jeu" est découpé en plusieurs mondes, chacun d'eux permettra d'aborder un domaine d'apprentissage supplémentaire au langage de programmation que l'on souhaite apprendre :

• Monde 1 : syntaxe, méthode, paramètres, chaine, boucles, variables
• Monde 2 : if/else, opérateurs relationels, propriétés d'objet, manipulation d'entrées
• Monde 3 : Arithmétique, compteurs, boucle tandis que, break, tableau, comparaison de chaine, min/max
• Monde 4 : Objets, Invocations, Boucles For, Fonctions, Dessins, Modulo ...
• Monde 5 : techniques avancées

Voyez plutôt :

Entre ces mondes, on retrouve des étapes intermédiaires qui permettent notamment d'en apprendre plus sur l'HTML et le LUA  :

Chaque monde est découpé en plusieurs dizaines de niveaux qui permettent d'aborder différents aspects de la programmation, chaque niveau en présentant une aspect ou une utilisation différente ainsi qu'une montée en complexité. L'utilisateur est donc amené à s'adapter au contexte de son niveau afin de faire en sorte que son héro termine la mission tel qu'attendu, héro qui est géré justement par des instructions (ex : hero.attack(target), hero.moveDown(3)) . Parmi les langages disponibles :

Chaque exercice possède un contexte, une petite histoire qui permet de s'ancrer dans le scénario global du jeu. Également, on sait par avance les connaissances dont nous aurons besoin pour résoudre le problème posé :

Je dois donc penser à sélectionner les bons outils dont le héro va avoir besoin. Comme indiqué précédemment, chaque outil permettra d'utiliser des fonctions particulières, décrites avant le démarrage de la partie :

Une fois dans la mission, le détail de ce que l'élève doit réaliser est clairement indiqué, souvent avec des schémas et parfois avec des exemples de code montrant comment utiliser un nouvel algorithme, une nouvelle fonction, etc :

Dans cet autre exemple, une partie du code est pré-écrit et l'élève n'a qu'à comprendre sa logique, corriger quelques erreurs et/ou ajouter quelques lignes pour apprendre à utiliser une fonction bien précise :

Ici, un exemple plus complexe, aucune aide n'est apportée à l'utilisateur au niveau code. Il s'agit d'un exercice final du Monde 2, un exercice qui permet de réunir toutes les connaissances acquises lors du monde et de prouver que l'utilisateur (ou l'élève) sait les utiliser :

Au centre, l'élève trouvera toujours une aide (documentation) montrant comment utiliser les fonctions disponibles.

Ici, le jeu nous apporte donc plusieurs éléments, un scénario qui permet de comprendre ce qu'il faut faire, une aide, qui permet d'apporter du soutien et une piste à suivre dans le programme à développer, un éditeur (droite) et une fenêtre de jeu (gauche). CodeCombat est donc très facile d'accès en tant que support de formation/cours et l'aspect ludique évitera l'ennui. L'aspect le plus intéressant est je pense celui d'apporter un scénario qui amène à comprendre la logique d'un bout de code et l'intérêt de ce bout de code dans un programme plus grand.

Bien entendu, la complexité augmente au fur et a mesure et l'on est en capacité d'utiliser de plus en plus de fonction, avec plusieurs possibilité pour réaliser un même objectif.

En accumulant de l'expérience, il sera possible d'acheter des items qui apporteront de nouvelles fonctions à utiliser. Par exemple l'ajout de flag qui permettra au joueur de manipuler son héro en temps réel ou l'ajout d'un bracelet permettant d'indiquer l'heure (et ainsi de gérer des coolDown de sorts, du séquençage dans les actions en fonction du temps qui s'écoule, etc.)

Je doit dire que le jeu est très bien tourné et que l'apprentissage est beaucoup plus simple ainsi. CodeCombat est avant tout dédié à la tranche d'âge 12-20 ans, mais tout le monde peut s'y inscrire. On peut notamment s'inscrire en tant que professeur, pour ensuite pouvoir gérer sa classe, voir la progression des élèves, etc.

A titre indicatif, voici l'expérience moyenne en programmation des utilisateurs de CodeCombat :

Le premier monde, qui contient une cinquantaine de niveaux, est disponible gratuitement, afin de comprendre le mécanisme du jeu et la façon dont l'apprentissage est fait. Ensuite, il est nécessaire de souscrire à un abonnement de 9.99$ par mois, abonnement auquel j'ai souscrit afin de tester le jeu plus longuement (et me perfectionner en Python au passage 😉 ).

Parmi les points à améliorer, je note que certaines traductions sont manquantes, ce qui peut être géant lorsque l'on propose ce jeu dans des salles de classes (si les élèves ne parlent pas anglais). L'anglais, même très simple, peut parfois être un frein à l'apprentissage au collège ou au lycée par exemple. Néanmoins les éditeurs sont en train de remédier à ce problème en cherchant activement des traducteurs.

Bref, je trouve l'initiative très intéressante, bien qu'un abonnement soit nécessaire, je pense que ce genre de plateforme peut être d'une grande aide dans le domaine de la formation et de l'apprentissage du code aux plus jeunes (et aux moins jeunes aussi d'ailleurs). Et vous, vous en pensez quoi ?

Mickael Dorigny Co-founder

Co-fondateur d'IT-Connect.fr. Auditeur/Pentester chez Orange Cyberdéfense.

See Full Bio