CodeCombat

Description rapide du logiciel

Le jeu étant en perpétuel évolution, la version testée en octobre 2014 ne correspond peut-être plus avec les dernières versions de CodeCombat.

Ce jeu est en plein développement au moment de l'écriture de cette fiche.
Certaines informations ou captures d'écran peuvent être obsolètes.  

Contenu enseigné

CodeCombat est un jeu éducatif qui permet d’apprendre plusieurs langages de programmation de façon ludique. Les langages proposés sont les suivants : Python, JavaScript, CoffeeScript et de façon expérimentale : Clojure, lua et Io. Que ce soit lors d’une campagne solo ou dans une partie multijoueurs, dans chaque niveau le joueur doit taper des lignes de code afin que son personnage (héros) remplisse divers objectifs.

Mécanique de jeu

Ce jeux pourrait être divisé en deux parties. Dans ces deux parties la mécanique de jeu est globalement la même cependant quelques changements subsistent alors je vais expliquer les deux parties. Dans ce jeu il y a également une fonctionnalité multi-joueurs mais celle-ci ne sera pas traitée. Dans le mode multijoueurs, les mécaniques de jeux sont les mêmes sauf les objectifs qui sont différents car on doit affronter des être humains.

Partie 1: La compagne pour les débutants: Au début du jeu on se retrouve dans une carte avec des niveaux (figure 1). La première fois qu'on y joue tous les niveaux sont bloqués sauf le tout premier. Le niveau suivant se débloque toujours en débloquant le niveau inférieur.

Figure 1: Accueil

Lorsqu'on clique sur un niveau, représenté par une ellipse rouge, on peut choisir un personnage ainsi que le langage de programmation (figure 2) pour jouer le niveau. Au départ uniquement deux personnages sont disponibles et possèdent les mêmes caractéristiques de combat (mis à part l'arme utilisée).

Figure 2: Sélection du personnage et du langage de programmation

Une fois qu'on a choisit le personnage et le langage de programmation, on peut équiper notre personnages avec différents équipements (figure 3). Chaque objet d'équipement a une utilité et certains permettent de débloquer des nouvelles fonctions pour le langage de programmation choisit. Au départ notre personnage ne possède que de simples bottes. Cependant, comme on peut le voir dans la figure 3, ces bottes nous permettront d'utiliser des fonctions du langage de programmation choisit pour déplacer notre personnage.

Figure 3: Équipement

Une fois le niveau de jeu chargé, on arrive à une interface qui se décompose en trois parties (figure 4).

Figure 4: Interface du jeu

Dans la première partie, on voit notre personnage et l'environnement dans lequel il se trouve. Ce personnage effectuera les instructions qu'on lui écrira. Les objectifs sont écrits en haut à gauche de l'écran. Dans chaque niveau les objectifs sont différents. Sur la figure 4 on peut voir que les objectifs sont d'éviter les pointes et de collecter les gemmes. Dans la deuxième partie on a accès a une barre temporelle, des paramètres audio et d'affichage du jeu. On a ensuite aussi une icone du personnage sélectionné qui nous donne ses statistiques (points de vie, sa coordonnée dans la carte...) ou un conseil. Dans la troisième partie, on a accès à l'éditeur pour programmer les actions de notre personnage. En bas sous "YOUR SKILLS" on a accès aux fonctions de programmation que l'on peut écrire. Si on remarque bien ces fonctions correspondent aux fonctions que nous donnent les bottes à la figure 3 permettant de déplacer notre personnage. L'icone de l'aimant en haut à droite permet de formater le code de façon standard pour qu'il soit plus joli. Le bouton "sort en court" sert à tester notre code en faisant tester nos instructions à notre personnage. La barre temporelle de la partie 2 permet de revenir en arrière ou en avant lors des tests. Si on est sûr du code qu'on a écrit on peut appuyer sur le bouton "Submit" et le jeu passe en mode cinématique où on voit notre personnage effectuer nos instructions.

Si les actions ne sont pas bonnes le personnage se trouvera bloqué et ne pourra pas accomplir les objectifs de la mission. De plus la barre temporelle lui permet de revenir en arrière pour pouvoir modifier le code et le relancer le test. En définitive il est possible de simuler le résultat du code plusieurs fois. Plusieurs feedback permettent à l'utilisateur de voir qu'il a fait des erreurs. Nous avons par exemple des erreurs de syntaxe qui sont détectés et indiquées dans l'éditeur de programmation puis des erreurs dans les commandes qui elles se traduisent par notre personnage qui se retrouve bloqué ou qui meurt. Quand le personnage se retrouve bloqué il nous parle et une bulle apparait pour dire qu'il ne peut pas continuer dans cette direction (figure 5). Le joueur peut donc par essais et erreurs corriger son code jusqu'à ce que celui-ci fasse ce qu'il veut.

Figure 5: Personnage bloqué

Une fois la cinématique finie, un message de félicitation apparaît, nous sommes renvoyés à la carte et le prochain niveau est débloqué. En terminant le niveau on gagne les gemmes que l'on y a collecté et de l'expérience. Cette expérience est simplement indicative. Elle indique l'expérience du joueur dans le jeu. En commençant un niveau, on a parfois accès à de nouveaux équipements qui nous permettront de faire de nouvelles actions durant le niveau.

Partie 2: Anciennes campagnes: Pour accéder aux anciennes campagnes, il suffit de cliquer sur "Older Campaigns" en bas à droite de l'interface de la carte des niveaux de la campagne pour les débutants (figure 1). On a accès à d'autres niveaux pour apprendre des bases de programmation, pour comprendre des algorithmes, pour jouer en multi joueur et pour tester des niveaux crées par des joueurs. La mécanique du jeu est globalement la même seulement que pour ces anciennes campagnes on incarne cette fois le rôle d'un magicien qui à son tour peut contrôler une ou plusieurs unités, contrairement à la campagne pour débutants, et leur donner des ordres en programmant (figure 6).

Figure 6: Interface du jeu pour les anciennes campagnes

Un autre ajout dans ce mode de jeu est le message de félicitation nous dit cette fois les notions que l'on a appris dans le jeu mais également en programmation (figure 7).

Figure 7: Message de félicitation

Enfin il faut noter que le principe d'équipement est inexistant dans les anciennes campagnes.

Environnement informatique

CodeCombat se joue directement depuis un navigateur web. Il est tout de même conseillé d'utiliser un version récente d'un navigateur web et si possible un ordinateur pas trop vieux pour que le jeu ne soit pas ralenti. Ce jeu est construit sur plusieurs projets open source et est créé à partir de plusieurs langages de programmation comme le CoffeeScript, Jade, Sass et Markdown. Le jeu est disponnible à l'adresse suivante: http://codecombat.com/

Accès

CodeCombat est gratuit. Deux alternatives sont possibles pour jouer à ce jeu. On peut soit y jouer directement soit y jouer en s'authentifiant. On peut soit créer un compte en fournissant une adresse e-mail soit se connecter directement avec notre compte Facebook, Google ou GitHub. Si on s'authentifie on peut sauvegarder notre avancement dans le jeu ainsi que nos réponses pour chaque niveau et jouer à la partie multi-joueurs.

Principes pédagogiques

Apprentissage actif

Le joueur est actif, c’est à lui d’écrire ses lignes de codes afin que son personnage interagisse avec l’environnement, d’ailleurs le jeu oblige le joueur à taper son code car on ne peut pas directement copier/coller les fonctions. Le joueur a une grande liberté d’action comme il est libre d’écrire les lignes de codes dans l’ordre qu’il veut. Il doit aussi regarder en permanence comment son code agit sur le personnage et donc c’est à lui même de faire des feed-back et de prendre en compte les erreurs de ses actions passées.

Apprentissage cognitif

On a à faire un apprentissage actif sur le plan cognitif. Le joueur doit apprendre à coder des actions de son personnage en prenant en compte l’environnement. Ce qu’apprend le joueur ne se trouve pas au niveau de l’action directe mais au de l’environnement représenté et de l’action qui s’y trouve. La difficulté du jeu augmente au fil des niveaux, au début les niveaux sont faciles et demandent peu d’actions cognitives, ensuite les niveaux lui demandent de faire des associations de représentations cognitives de plus en plus complexes, afin de répondre à une situation de plus en plus complexe elle aussi.

Apprentissage par répétition

Il y a aussi un apprentissage par répétition, chaque nouveau niveau reprend souvent la base des précédents en les complexifiant ce qui permet au joueur de réutiliser des raisonnements cognitifs tout en les faisant évoluer pour les adapter à la nouvelle situation. Les lignes de code sont quasiment toujours les mêmes à travers les niveaux mais le jeu force à nous les faire retaper pour que l’apprentissage se fasse avec la répétition. Le fait aussi de devoir passer le niveau en passant par un processus répété de plusieurs essais et d’erreurs nous permet d’apprendre à composer et mémoriser des suites de lignes de code cohérentes.

Facteurs motivationnels

CodeCombat pousse l’utilisateur a se dépasser pour avancer au niveau cognitif et personnel. Il répond donc à des besoins de l’utilisateur. Pour y arriver le jeu utilise un système de plusieurs niveaux sur une carte de campagne que l’on déverrouille au fil de nos réussites. Une fois une campagne finie, on peut passer à une campagne composée de niveaux plus complexe. Le mode multijoueurs poussant vraiment le principe à l’extrême car il ne s’agit plus de défier l’intelligence du jeu mais d’autres joueurs, c’est qui est encore plus motivant. Le joueur est aussi vraiment libre de déterminer quels actions il va programmer, ce qui lui laisse l’entière réussite lorsqu’il passe un niveau.

Régulations Metacognitives

Ce jeu stimule chez le joueur :

• La planification et la prévision, en effet, le joueur doit réussir à planifier le parcours de son personnage selon les fonctions proposées et les obstacles présents dans l’environnement afin d’atteindre l’objectif. Il doit aussi prévoir le déplacement des bots ennemis.
• Le contrôle, où il faut évaluer les conséquences d’une fonction visant à déplacer ou interagir notre héros.

Apprentissage par discours

Chaque niveau commence par une cinématique où un personnage nous parle et nous apprend de nouvelles notions. Parfois, un personnage nous demande de faire quelque chose en nous donnant des astuces. Il y a aussi des aides écrites directement dans l'éditeur sous forme de commentaires.Elle pourrait cependant être plus complète au niveau du feedback (erreur dans le code, documentation).

Intégration du contenu enseigné dans le jeu

Globalement le jeu CodeCombat présente une bonne intégration du contenu enseigné dans la mécanique du jeu. En effet apprendre à programmer est vraiment très ludique grâce au fait d’avancer dans les niveaux du jeu tout en tapant les fonctions qui nous sont données pour y faire évoluer notre héros. On apprend et on tape du code pour un objectif ludique qui nous pousse à intégrer rapidement des notions de programmation. De plus le jeu n'utilise pas des fonctions qui n'ont aucun rapport avec le niveau. Chaque fonction est nommée de façon intuitive pour que l'utilisateur la comprenne. Par exemple si on prend la fonction "this.moveRight();" on comprend que cette fonction va faire bouger notre personnage vers la droite. Cependant on ne peut pas écrire cette fonction n'importe comment, c'est-à-dire qu'il faut respecter l'orthographe et répondre aux principes de programmation (dans notre cas JavaScript) en mettant les parenthèses pour la fonction et en n'oubliant pas de mettre le point virgule à la fin. L'intégration est bien faite au niveau de l'équipement du personnage où chaque pièce d'équipement permet de faire de nouvelles actions qui se traduisent par de nouvelles fonctions de programmation disponibles dans le niveau. Le fait de pouvoir suivre notre progression nous permet de savoir où nous en sommes dans notre apprentissage.

Points forts et points faibles

Points forts

Ce jeu présente divers points forts. Premièrement, le gros point positif de ce jeu est qu’il propose beaucoup de contenu et que tout est gratuit. Il y a même un éditeur de niveau. De nombreux langages de programmation sont aussi proposés à l’apprentissage. Le fait d'apprendre la programmation sans se rendre compte représente pour nous un grand point fort. En effet l'utilisateur se consacre uniquement au but de la mission affiché en haut à gauche de l'écran comme montré dans la figure 4. Cependant en remplissant les objectifs, l'utilisateur est en train d'apprendre des principes de programmation sans se rendre compte comme on peut le voir dans le message de félicitation à la figure 7.

Ensuite le design est plutôt bon et son interface est agréable et facile à utiliser. On s'immerge assez facilement dans le jeu en tentant d'aider nos personnages à atteindre leurs objectifs. Le jeu est amusant et nous laisse même parfois être créatifs comme lorsque par exemple nous pouvons utiliser la fonction "say" pour afficher un message. On est guidé dans le jeu et on nous donne des conseils qui peuvent aussi être écrits sous forme de commentaire dans l'éditeur de code. Il y a toujours une ou quelques commandes déjà écrite dans l'éditeur pour aider le joueur à comprendre et poursuivre le code. De plus les messages d'aide de l'éditeur, lorsqu'on fait une erreur de syntaxe dans le code, sont plutôt clairs et utiles. La difficulté des niveaux est progressive et cela permet de commencer très facilement tout en progressant très rapidement. Il y a aussi la présence d’un mode multi-joueurs qui permet d’avoir énormément de nouveaux défis.

Points faibles

Malgré que le jeu soit disponible sous plusieurs langues, le jeu est partiellement traduit. Il y a encore beaucoup de restes d'anglais, la langue d'origine du jeu, ce qui peut poser problème et mettre des barrières envers les personnes ayant peu de connaissances dans cette langue. De plus, le jeu est malheureusement uniquement disponible en ligne. Il pourrait être intéressant d’avoir accès à ce jeu en vacances sans avoir besoin d’une connexion internet. Le jeu est incomplet, ce qui peut paraitre frustrant pour le joueur car typiquement dans le mode campagne pour les débutants uniquement deux personnages sont disponibles et tout le reste est bloqué. Cependant, comme le jeu est inachevé, on ne peut pas tester les nouveaux personnages ce qui peut être frustrant. Ceci est également le cas pour ce qui concerne l'équipement disponible car il y a pleins d'emplacements qui ne peuvent pas être utilisés. Certaines fonctions ne sont pas documentées. Le guide est absent. Les fonctions "sort en court" et "submit" pourraient être regroupées en une seule.

Logiciels similaires

Quelques jeux similaires à CodeCombat qui permettent d’apprendre la programmation de façon ludique.

• K-ROBOT (edutechwiki) - Un jeu éducatif qui entraîne aux bases de la programmation
• RobotProg (edutechwiki) - Un jeu où on programme un robot virtuel à l'aide d'un organigramme. Ce jeu ressemble à CodeCombat dans le sens où on "programme" les actions du robot bien que dans ce jeu cela se fait au niveau de l'algorithme et non du langage de programmation.
• CeeBot 4 (edutechwiki) - Un jeu, où il faut coder les actions des robots, visant à initier l’utilisateur aux langages de programmation orientés objet tel C++ ou Java.
• Ruby Warrior - Un jeu pour apprendre à faire de l’intelligence artificielle avec du Ruby.
• Leek Wars - Un jeu où il faut développer une intelligence artificielle pour remplir les objectifs du jeu.
• Light bot - Un jeu où il faut dire au light bot comment parvenir à allumer tous les carrés bleus en utilisant des principes programmation.
• Code Hunt - Un jeu produit par Microsoft dont le but est d'apprendre à programmer en Java ou en C#.

Références

• Wikipédia, Méthode d'apprentissage cognitif, wikipédia.fr
• Viviane Lepemp, Les differentes méthodes d'apprentissage (Bloom,Changeux,Piaget,Brunner,Shmidt,Skinner...) - Conseil Soutien Educatif, soutien-educatif.fr
• Wikipédia, Métacognition, wikipédia.fr
• Nicolas Szilas et Julien Da Costa, jeux VIdéo Pédagogiques, support de cours de la période 1 (Utopia 2014)

Fait par Arnaud et Victor Garretas