Blokoding : un jeu pour apprendre la programmation aux enfants !

Hello, ça fait quelques jours que pendant mon temps libre, je code un petit projet : Blokoding (pour PC, j’avais déjà fait un jeu qui y ressemblait pour mobile mais le jeu était pas franchement utilisable).

Blokoding rend plus facile l’apprentissage de la programmation aux enfants. Oui, un jeu pour apprendre les bases de la programmation! Glisser-deposez des cartes (par exemple des cartes d’actions, des boucles, des conditions…) et démarrez un niveau pour que votre personnage avance et exécute vos instructions dans le jeu.

Page du jeu avec lien de telechargement : https://gaziduc.itch.io/blokoding

Le jeu est egalement dispo sur le google play store pour android : https://play.google.com/store/apps/details?id=com.blokoding

Si vous avez des remarques n’hesitez pas !

Vidéo : https://www.youtube.com/watch?v=PDCCYULOMDc

Salut,

Je viens de tester sur Linux avec godot 4.1 et ça fonctionne. J’ai ce warning au lancement, au cas où ça t’est utile :

$ godot --rendering-driver opengl3
Godot Engine v4.1.1.stable.arch_linux - https://godotengine.org
OpenGL API 4.6 (Core Profile) Mesa 23.1.4 - Compatibility - Using Device: Intel - Mesa Intel(R) UHD Graphics (CML GT2)

WARNING: Icon too large, attempting to resize icon.
     at: set_icon (platform/linuxbsd/x11/display_server_x11.cpp:4893)

Sur mon écran (1440p), la police n’est pas lisse :

et au passage une typo (Level 4 je crois): "It’s" au lieu de "Its".

Le concept lui-même est intéressant, même si pas nouveau (scratch est dans une veine similaire). Par contre, je pense qu’en l’état, le jeu est inutilisable par quelqu’un qui ne connait pas déjà un peu la programmation. Il y a des bonnes idées (l’organisation en 2D, les couleurs par "catégorie" de tuile avec les connecteurs) mais là tu lâches le joueur avec toutes les tuiles d’entrées de jeu (ce qui fait que je me suis retrouvé à écrire 5 fois la même boucle…). Les niveaux existants pourraient servir de tutoriel en donnant accès aux tuiles les unes après les autres.

Salut, Tout d’abord, merci beaucoup d’avoir testé !

Pour le bug de la police, je vais essayer de voir d’où vient le problème. Mon ecran est en 1080p, et le jeu est en 1920x1080:

j’ai peut-être mal configurer les paramètres, je vais relire cette page https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html

Bien vu pour la faute d’orthographe !

Ouais pour l’instant je suis d’accord, faudrait qu’au fur et à mesure des niveaux on debloque les cartes.

Salut,
Bravo pour le jeu, c’est intéressant.

Effectivement, j’aime bien aussi la catégorisation que tu as mis en place, avec le code couleur, et le rappel de couleur sur les connecteurs. J’apprécie également beaucoup que tu introduises des vrais termes de programmation.

Il y a encore pas mal à améliorer mais c’est normal, tu n’y as passé que quelques jours. Je vais cependant essayer d’être assez complet même si j’imagine que tu gardes déjà dans un coin certaines de ces améliorations.

• Ce qui me gêne le plus, c’est le workflow. En l’état, le jeu nous demande de programmer quelque chose, pour utiliser des cartes, et nous montre ensuite à quoi ça sert. M’est d’avis qu’un niveau du jeu devrait suivre le cycle en V. Il nous présente le problème avec une intro et la vision du chemin que dois emprunter la créature, formule le problème de façon claire pour que le joueur puisse penser à une solution dans le langage naturel, puis l’encourage à le traduire avec les tuiles (phase descendante du V). Puis il arrive ce qui est déjà codé, c’est à dire il l’exécute pour tester, il voit les erreurs de compil ou d’exécution et corrige (phase montante du V)
• Personnellement j’ai eu un peu de mal avec l’ordre d’exécution des cartes. Comme elles ont un arrondi en haut et un trou en bas, j’ai d’abord cru que l’exécution allait être verticale, qu’elle suivait les connecteurs. En fait elle suit le sens de lecture (gauche à droite, de haut en bas). Ce qui n’est pas plus mal mais je pense qu’il faudrait une icône qui le présente, et une petite marque qui montre le début. Peut-être même une petite animation.
• L’instruction "end" me parait un peu problématique, elle a un sens seulement pour le parsing du programme.
• J’aimerai bien pouvoir interrompre l’exécution sans attendre que la créature meure ou soit arrivée.
• Je pense que le clic droit pour retirer une tuile n’est pas trop adapté aux enfants, parfois un peu maladroits ou agités. Je pense qu’il vaudrait mieux qu’ils drag’n’drop la tuile vers une poubelle. ça évitera des accidents.
• Le défilement du texte est long, il faudrait qu’on puisse un peu plus agir dessus : l’accélérer, le ralentir, le skip… Par ailleurs je pense qu’une narration audio peut être beaucoup plus attrayant pour un enfant, pour qui lire un pavé peut être un sérieux frein.
• On l’a déjà dit, mais c’est sûr que dans un jeu on aime ressentir la progression. C’est une bonne idée de débloquer les tuiles au fur et à mesure. Je souhaite quand même relever qu’il faut faire quand même attention à ce que ça n’en devienne pas frustrant ("ah si j’avais eu ça dans le niveau précédant !")
• Je pense que pour un jeu d’apprentissage, il faut particulièrement bien traiter les erreurs. Si on peut faire plus qu’un message de compilateur, genre une animation qui te montre où se situe l’erreur, un message qui t’explique pourquoi c’est une erreur en plus du message qui t’a dit quelle erreur c’est …
• Et pour finir, évidemment en quelques jour c’est pas fait, mais pour cibler les enfants, je pense qu’il faut une identité visuelle particulièrement riche, il faut construire tout un univers, et raconter des histoires. Nomme ta créature, mets la dans des situations identifiable comme "rentrer à la maison", "aller chercher un trésor" ou que sais-je. Voir explique par le lore pourquoi elle obéit précisément à nos ordres.

Salut, merci @romantik pour les retours !

L’instruction "end" me parait un peu problématique, elle a un sens seulement pour le parsing du programme.

Oui, mais du coup je vois pas de solution pour savoir où s’arrete une boucle / une condition. Je pourrais faire a truc à la Python où c’est l’identation qui compte… Mais pas sûr que ce soit mieux

J’aimerai bien pouvoir interrompre l’exécution sans attendre que la créature meure ou soit arrivée.

Oui d’ailleurs je viens de me rendre compte mais si tu fait "While True End" t’es soft lock, obligé de faire Alt + F4 pour quitter.

Je pense que le clic droit pour retirer une tuile n’est pas trop adapté aux enfants, parfois un peu maladroits ou agités. Je pense qu’il vaudrait mieux qu’ils drag’n’drop la tuile vers une poubelle. ça évitera des accidents.

Yes, bien vu l’idee de la poubelle.

Oui, mais du coup je vois pas de solution pour savoir où s’arrete une boucle / une condition. Je pourrais faire a truc à la Python où c’est l’identation qui compte… Mais pas sûr que ce soit mieux

Comme tu contrôles complètement le layout, tu pourrais organiser ça visuellement. Ajouter un if fait apparaître un bloc qui contient le corps du if, visuellement détaché du reste du programme.

Au passage, le pattern while true revient souvent (en l’état, true est la seule condition intéressante à mettre après un while et true n’est là que pour ça), donc tu pourrais utiliser une unique instruction loop à la place qui représente une boucle infinie.

Le défilement du texte est long, il faudrait qu’on puisse un peu plus agir dessus : l’accélérer, le ralentir, le skip… Par ailleurs je pense qu’une narration audio peut être beaucoup plus attrayant pour un enfant, pour qui lire un pavé peut être un sérieux frein.

Yes je viens de rajouter un button pour skip

Oui, mais du coup je vois pas de solution pour savoir où s’arrete une boucle / une condition. Je pourrais faire a truc à la Python où c’est l’identation qui compte… Mais pas sûr que ce soit mieux

Comme tu contrôles complètement le layout, tu pourrais organiser ça visuellement. Ajouter un if fait apparaître un bloc qui contient le corps du if, visuellement détaché du reste du programme.

Effectivement ça serait le mieux mais aussi le plus dur à implementer….

Salut! v0.3.0 de Blokoding dispo!

Nouvelles fonctionnalités:

• Vous pouvez maintenant ignorer le défilement du texte avec un bouton dédié
• Pour supprimer une carte, vous pouvez maintenant la faire glisser et la déposer dans une corbeille
• Vous pouvez déplacer des cartes que vous avez déjà glissées et déposées
• Vous pouvez annuler un programme en cours d’exécution avec le bouton d’annulation. (principalement utile pour ne pas être bloqué si vous faites "While True End" par exemple)

Autre:

• Nouvelle image dans l’écran titre !
• Nouvelles transitions entre les menus.
• Bugs corrigés
• Le jeu est disponible pour macOS et Linux en plus de Windows

Coucou, j’ai finit ton jeu, le fonctionnement est intuitif et le jeu fait découvrir la programmation d’un point de vue plus "algorithmique" que Scratch.

Cependant, je trouve qu’il manque quelques fonctionnalités en plus de celle proposées par Romantik et Adri1:

• Un bouton Help ou ?, qui permettrait de savoir quelle est l’utilité de chaque bloc
• Différentes catégories pour les blocs (Action, condition, contrôles.. ect) si tu rajoute plus d’instructions
• Des sons de GUI, comme un petit "pop" quand on dépose le bloc, ou un bruit de couvercle de poubelle métallique après avoir jeter à la corbeille une instruction
• Des contraintes : Pas de If dans un While, 3 bloc de mouvement max, par exemple, pour finir les 5 niveaux, il suffit de faire à chaque fois

While True : 
    If Trou Devant : 
        Sauter
    Avancer

Et c’est un gros problème ; à quoi bon trouver de nouvelles solutions quand on peut juste utiliser ce code ?

Apparemment c’est un point qui vous dérange

mais pour moi, s’il a écrit ça dès le début, c’est qu’il a très bien compris l’algorithmie et c’est une bonne chose !

Je suis pas fan des contraintes, toujours dans l’idée qu’on ne programme pas pour la beauté de programmer, on programme pour résoudre des problèmes, se mettre des freins artificiels à sa résolution n’a aucun sens.

Effectivement, je n’avais pas penser de ce point de vue. Pour autant est-ce une bonne chose (dans un but pédagogique) qu’une fois la solution trouvée, la réutiliser à chaque fois ?

L’objectif est aussi de trouver de nouvelle solutions à chaque fois, pour trouver de nouvelles façon de raisonner. Pourquoi pas faire qu’on ne peut pas utiliser deux fois la même solutions ? ça éviterait de copier-coller le code. Ou un système d’étoiles ; +1 Si le niveau est réussi, +1 Si la solution est unique et +1 Si moins de X blocs ont était utilisés, ça n’empêcherais pas de réutiliser du code, mais si le joueur veux obtenir toutes les étoiles, il devra être inventif

J’aime bien l’idée des challenges facultatifs.
Pour le coup de la solution unique ça peut être problématique, si tu te crame ta solution parfaite au début peut être que tu ne pourra pas réussir l’objectif des niveaux suivant car la solution qui demande moins de X blocs était la solution que t’as cramé.
Mais cette idée de forcer le changement vient du fait que tout les niveaux se résolvent avec la même solution actuellement mais je pense que le but est quand même de varier les levels et la solution ne sera de toute façon plus applicable.
Aussi je pense que ce changement pourra être induit de la progression qu’évoquait Adri1

J’ai peut être pas été clair, mais pour moi le problème n’est pas forcément qu’un même niveau puisse être résolu par des solutions plus ou moins générale, ni qu’une même solution puisse résoudre plusieurs exercices. Le problème est surtout le manque complet de progression. Si le but est d’apprendre à programmer en s’amusant, il y a deux composants :

• la première implique que le joueur cible ne connait pas (ou peu) d’éléments de programmation, ce qui implique de faire découvrir les éléments les uns après les autres ;
• la deuxième implique un peu de variété, il n’y a rien d’amusant à utiliser 5 fois le même programme.

En fait, en l’état, les cinq premiers niveaux sont déjà relativement progressifs et assez bien adaptés pour apprendre à manipuler les quelques tuiles implémentées :

• niveaux 1 et 2 pour apprendre les deux déplacements de base ;
• niveau 3 pour apprendre if ;
• niveau 4 pour apprendre while ;
• niveau 5 pour tout combiner dans la solution déjà mentionnée.

Par contre, il y a deux problèmes :

• comme déjà mentionné, débloquer progressivement les blocs rendrait la chose à la fois plus pédagogique, et plus variée ;
• les niveaux ne forcent pas vraiment à utiliser le concept correspondant.

Par exemple, pour le niveau 3 il suffit d’écrire un programme Move, Move, Jump et le lancer jusqu’à ce que le trou soit en troisième position pour passer le niveau (d’ailleurs chez moi, le trou est toujours en troisième position, jamais en quatrième). Ce problème pourrait être réglé en ayant deux pistes en même temps, l’une avec un trou, l’autre avec des piques. Les deux pistes exécutent le même programme et doivent être complétées pour passer le niveau. Même chose avec la question 4, deux pistes de longueur différentes qui doivent être résolues avec le même programme forcent l’utilisation de while, et en même temps montrent l’intérêt des control flow statements au joueur. Avec elles, un même programme peut résoudre tout un ensemble de problèmes similaires au lieu d’une seule instance.

Coucou, j’ai finit ton jeu, le fonctionnement est intuitif et le jeu fait découvrir la programmation d’un point de vue plus "algorithmique" que Scratch.

Cependant, je trouve qu’il manque quelques fonctionnalités en plus de celle proposées par Romantik et Adri1:

• Un bouton Help ou ?, qui permettrait de savoir quelle est l’utilité de chaque bloc

Je pense que je vais ajouter un texte dans une tooltip (infobulle) qui expliquer ce que chaque carte fait.

• Des sons de GUI, comme un petit "pop" quand on dépose le bloc, ou un bruit de couvercle de poubelle métallique après avoir jeter à la corbeille une instruction

Oui !

Le mieux je pense c’est de débloquer les cartes petit à petit.

Edit : Merci beaucoup à l’équipe de zestedesavoir d’avoir mis ce sujet à la une du site !

Hello, la version 0.4.0 de Blokoding est dispo !

Au menu:

• Nouveau niveau utilisant de nouvelles cartes (Grab, Key) et de nouvelles mécaniques.
• Les cartes doivent désormais être débloquées (en complétant les niveaux) pour être utilisées
• Ajout d’une info-bulle sur chaque carte pour aider l’utilisateur
• Ajout d’un meilleur indicateur d’erreur de compilation: la carte erronée est désormais mise en évidence.
• Ajout de quelques fleurs sur les cartes pour améliorer le jeu.

Telechargement (Windows, Mac os, linux) : https://github.com/gaziduc/blokoding/releases

Salut,

Cool que tu continues à travailler dessus

Pour tester l’erreur de compilation j’ai essayé quelques trucs. Cependant, une chose qui devait déjà pas marcher avant : j’ai fait un while in front of hole jump else walk end et ça compile. Le else est simplement ignoré donc rien de grave, mais ce n’est pas syntaxiquement juste.
Pour les petits soucis comme ça, désires-tu utiliser le système d’issue github ?

Je ne suis toujours pas fan que l’on ne vois pas le level avant de programmer, pendant l’énoncé. Je l’ai déjà dit, alors pour éviter d’insister je ne le répèterai plus, mais je le répète juste une fois pour vérifier que ce n’est pas juste de l’incompréhension.

Salut,

Cool que tu continues à travailler dessus

Pour tester l’erreur de compilation j’ai essayé quelques trucs. Cependant, une chose qui devait déjà pas marcher avant : j’ai fait un while in front of hole jump else walk end et ça compile. Le else est simplement ignoré donc rien de grave, mais ce n’est pas syntaxiquement juste.
Pour les petits soucis comme ça, désires-tu utiliser le système d’issue github ?

En effet, je t’avoue que j’avais vu ce bug, mais que j’ai pas vraiment eu le temps de le corriger. Et oui je suis favorable a l’utilisation des issues sur github.

En effet, voir le niveau avant serait une bonne idée (je n’avais pas compris que c’etait ca que tu voulais, ou alors j’avais juste mal lu… je suis fainéant)

Hi, j’ai testé la dernière version de ton jeu pour voir les fonctionalités que tu as annoncer, je les vois toutes, sauf la bulle-info sur chaque carte, est-ce un oublie ou un bug ?

Hello, moi j’ai bien l’infobulle quand je laisse la souris sur une carte :

Tu es sous quel OS ?

En faite il n’y avait pas de bug, c’est juste que je m’attendais qu’il y ait un petit "bouton" en haut à droite de chaque action, et je n’ai pas penser à rester longtemps sur une carte ^^'

Hello,

Je n’ai pas trop eu le temps de travailler sur le projet ces derniers temps, neanmoins je viens de faire une nouvelle release avec quelques nouvelles fonctionnalites:

• Ajout d’une fonctionnalité de sauvegarde : vous pouvez désormais sauvegarder le dernier programme que vous avez créé. Il sera automatiquement restauré lorsque vous redémarrerez le jeu.
• Possibilité d’effacer le programme en un seul clic sur le bouton Effacer.
• Le réglage du volume principal est disponible

lien : https://github.com/gaziduc/blokoding/releases