Articles & Actualités

Les Tours de Hanoï constituent l’un des problèmes classiques de l’algorithmique.

Elles permettent d’illustrer de manière simple mais puissante :

• la récursivité,
• la décomposition modulaire,
• la gestion d’états successifs,
• et ici, la génération d’une animation image par image.

Le programme ci-dessous, écrit en EduCode, propose une version entièrement animée du célèbre puzzle, avec 5 disques et 31 mouvements.
Chaque étape est capturée dans une toile, puis assemblée en une animation fluide.

Structure générale du programme

Le programme repose sur trois éléments clés :

• Les tours, représentées par trois tableaux : tourA, tourB, tourC.
• Les frames, stockées dans mesFrames, qui contiennent chaque état visuel du puzzle.
• L’algorithme récursif de Hanoï, qui déplace les disques selon les règles du jeu.

Dès le début, la tour A est initialisée avec les disques de taille 5 à 1 :

pour k de numDisques à 1 pas - 1
    tourA ajoute k
fin pour

Chaque disque est identifié par un nombre, qui détermine sa largeur et sa couleur.

Dessiner un piquet : une procédure modulaire

La procédure dessinerPiquet est un excellent exemple de programmation modulaire.
Elle reçoit :

• une toile,
• une tour (tableau),
• la position horizontale du piquet.

Elle calcule ensuite :

• la largeur du disque (proportionnelle à sa valeur),
• sa position verticale (empilée du bas vers le haut),
• sa couleur (déterminée par un modulo sur la taille).

Chaque disque est dessiné par un simple rectangle coloré :

rectangle(uneToile, posX, posY, largeurDisque, 16, coul)

ette modularité permet de redessiner facilement les trois piquets à chaque état.

Génération d’un état visuel

La procédure dessinerEtat crée une nouvelle toile de 600×300 pixels, dessine :

• le socle,
• les trois piquets,
• les labels “Tour A”, “Tour B”, “Tour C”,
• puis les disques via dessinerPiquet.

Chaque toile est ensuite ajoutée au tableau mesFrames.

Cette approche transforme le programme en une machine à produire des images successives, parfaites pour une animation.

Déplacement d’un disque : la procédure bouger

La procédure bouger(pSource, pDest) :

• identifie le disque au sommet de la tour source,
• le retire,
• l’ajoute à la tour destination,
• génère un nouvel état visuel.

Chaque mouvement produit donc une nouvelle image, ce qui rend l’animation fidèle et fluide.

L’algorithme récursif des Tours de Hanoï

La procédure hanoi(n, dep, arr, aux) implémente l’algorithme classique :

• si n = 1, on déplace directement le disque,

sinon :

• on déplace les n-1 disques vers la tour auxiliaire,
• on déplace le disque principal,
• on déplace les n-1 disques vers la tour d’arrivée.

Cette structure récursive est élégante et parfaitement adaptée à EduCode.

Animation finale

Après avoir capturé l’état initial, le programme appelle :

appelle hanoi(numDisques, 1, 3, 2)

Puis assemble les 31 images générées en une animation :

animation(mesFrames, 400, 0)

400 ms entre chaque frame : un rythme idéal pour visualiser clairement chaque mouvement.

Conclusion : un programme complet, visuel et pédagogique

Ce programme EduCode est un excellent exemple de :

• récursivité appliquée,
• gestion d’états successifs,
• modularité,
• animation image par image,
• visualisation algorithmique.

Il permet de comprendre les Tours de Hanoï non seulement en théorie, mais aussi en les observant se résoudre pas à pas, ce qui renforce l’apprentissage.

Programme :

@ Programme des Tours de Hanoï animé en EduCode (5 disques)

// Déclarations des variables globales
numDisques est un nombre
numDisques vaut 5

mesFrames est un tableau

tourA est un tableau
tourB est un tableau
tourC est un tableau

// Initialisation de la tour source avec 5 disques
pour k de numDisques à 1 pas - 1
    tourA ajoute k
fin pour

// Procédure modulaire pour dessiner les disques d'un piquet
procédure dessinerPiquet(uneToile, laTour, centreX)
    nbDisques est un nombre
    nbDisques vaut longueur(laTour)

    si nbDisques > 0 alors
        pour idx de 0 à nbDisques - 1
            tailleDisque est un nombre
            tailleDisque vaut laTour[idx]

            // Calcul de la largeur proportionnelle
            largeurDisque est un nombre
            largeurDisque vaut (tailleDisque * 22) + 20

            posX est un nombre
            posX vaut centreX - (largeurDisque / 2)

            posY est un nombre
            posY vaut 250 - ((idx + 1) * 18)

            // Couleur dynamique selon le disque
            coul est un texte
            si tailleDisque mod 5 = 1 alors
                coul vaut rgb(231, 76, 60) // Rouge
            sinon si tailleDisque mod 5 = 2 alors
                coul vaut rgb(52, 152, 219) // Bleu
            sinon si tailleDisque mod 5 = 3 alors
                coul vaut rgb(46, 204, 113) // Vert
            sinon si tailleDisque mod 5 = 4 alors
                coul vaut rgb(241, 196, 15) // Jaune
            sinon
                coul vaut rgb(155, 89, 182) // Violet
            fin si

            rectangle(uneToile, posX, posY, largeurDisque, 16, coul)
        fin pour
    fin si
fin procédure

// Procédure pour générer chaque image de l'animation
procédure dessinerEtat()
    uneToile est une toile
    dimension(uneToile, 600, 300)
    remplir(uneToile, #F0F4F8)

    // Socle et piquets
    rectangle(uneToile, 20, 250, 560, 15, #333333)
    rectangle(uneToile, 95, 70, 10, 180, #777777)
    rectangle(uneToile, 295, 70, 10, 180, #777777)
    rectangle(uneToile, 495, 70, 10, 180, #777777)

    // Libellés
    label(uneToile, 80, 285, "Tour A", #000000,14)
    label(uneToile, 280, 285, "Tour B", #000000,14)
    label(uneToile, 480, 285, "Tour C", #000000,14)

    // Dessin des 3 piquets
    appelle dessinerPiquet(uneToile, tourA, 100)
    appelle dessinerPiquet(uneToile, tourB, 300)
    appelle dessinerPiquet(uneToile, tourC, 500)

    mesFrames ajoute uneToile
fin procédure

// Procédure de déplacement d'un disque
procédure bouger(pSource, pDest)
    disqueBouge est un nombre
    disqueBouge vaut 0
    dernierIdx est un nombre

    si pSource = 1 alors
        dernierIdx vaut longueur(tourA) - 1
        disqueBouge vaut tourA[dernierIdx]
        tourA supprime dernierIdx
    sinon si pSource = 2 alors
        dernierIdx vaut longueur(tourB) - 1
        disqueBouge vaut tourB[dernierIdx]
        tourB supprime dernierIdx
    sinon
        dernierIdx vaut longueur(tourC) - 1
        disqueBouge vaut tourC[dernierIdx]
        tourC supprime dernierIdx
    fin si

    si pDest = 1 alors
        tourA ajoute disqueBouge
    sinon si pDest = 2 alors
        tourB ajoute disqueBouge
    sinon
        tourC ajoute disqueBouge
    fin si

    appelle dessinerEtat()
fin procédure

// Algorithme récursif
procédure hanoi(n, dep, arr, aux)
    si n = 1 alors
        appelle bouger(dep, arr)
    sinon
        appelle hanoi(n - 1, dep, aux, arr)
        appelle bouger(dep, arr)
        appelle hanoi(n - 1, aux, arr, dep)
    fin si
fin procédure

// Capture de l'état initial
appelle dessinerEtat()

// Résolution pour 5 disques
appelle hanoi(numDisques, 1, 3, 2)

// Animation avec un intervalle de 400 ms (31 mouvements)
animation(mesFrames, 400, 0)

La logique numérique est souvent perçue comme abstraite. Pourtant, lorsqu’on la rend visuelle, animée et intuitive, elle devient un formidable outil de compréhension.
Voici une représentation dynamique d’un circuit combinatoire basé sur l’expression :

S = (A ET B) OU (NON C)

L’objectif : montrer comment les signaux se propagent dans un circuit, étape par étape, jusqu’à la sortie finale.

Une mise en scène graphique pensée pour la pédagogie

La construction repose sur une palette harmonisée et un style technique :

• dégradé de fond pour la profondeur visuelle
• grille discrète pour rappeler les schémas électroniques
• pastilles colorées pour les bits (1 / 0)
• fils dont la couleur change selon la propagation du signal
• portes logiques stylisées (ET, OU, NON)

Chaque élément visuel contribue à rendre la logique lisible et attractive.

Des composants dessinés avec précision

Chaque porte logique possède sa propre procédure de dessin :

• ET : rectangle arrondi
• OU : forme plus organique
• NON : triangle + bulle de négation

Les pastilles affichent la valeur des entrées et de la sortie, tandis que les fils s’illuminent progressivement selon les phases de propagation.

Une animation en plusieurs phases

Pour les 8 combinaisons possibles de A, B et C :

• Extraction des bits
• Calcul des signaux intermédiaires (g1, g2)
• Propagation animée en 4 étapes
• Stabilisation du résultat final avec pause visuelle

Cette progression permet d’observer le circuit comme s’il "réfléchissait", en montrant clairement comment chaque entrée influence la sortie.

Un film complet du fonctionnement du circuit

Chaque image générée est ajoutée à une séquence, formant une animation fluide.

Ce type de visualisation est idéal pour :

• l’enseignement de la logique numérique
• des démonstrations techniques
• des présentations en entreprise ou en formation
• des supports pédagogiques interactifs

Une autre manière d’apprendre

En rendant la logique numérique vivante, on facilite :

• la compréhension des mécanismes internes
• la mémorisation des concepts
• l’envie d’explorer plus loin

Une approche qui montre que même les circuits les plus simples peuvent devenir clairs, esthétiques et engageants lorsqu’ils sont présentés autrement.

Programme :

@ Configuration initiale et palette
film est un tableau

largeurToile est un nombre
largeurToile vaut 560
hauteurToile est un nombre
hauteurToile vaut 360

fond1 est un texte
fond1 vaut #0d1b2a
fond2 est un texte
fond2 vaut #1b263b
cFilOff est un texte
cFilOff vaut #37485e
cFilOn est un texte
cFilOn vaut #ffd60a
cPorte est un texte
cPorte vaut #4cc9f0
cTexte est un texte
cTexte vaut #e0e1dd
cUn est un texte
cUn vaut #06d6a0
cZero est un texte
cZero vaut #ef476f

@ Coordonnées des éléments
// Entrées A, B, C
ax est un nombre
ax vaut 60
ay est un nombre
ay vaut 80
bx est un nombre
bx vaut 60
by est un nombre
by vaut 140
cx est un nombre
cx vaut 60
cy est un nombre
cy vaut 250

// Portes
etX est un nombre
etX vaut 230
etY est un nombre
etY vaut 110
nonX est un nombre
nonX vaut 230
nonY est un nombre
nonY vaut 250
ouX est un nombre
ouX vaut 400
ouY est un nombre
ouY vaut 180

// Sortie
sx est un nombre
sx vaut 510
sy est un nombre
sy vaut 180

@ Procédures de dessin utilitaires
fonction couleurFil(valeur)
    si valeur = 1 alors
        retourne cFilOn
    sinon
        retourne cFilOff
    fin si
fin fonction

procédure pastille(img, px, py, valeur)
    teinteP est un texte
    si valeur = 1 alors
        teinteP vaut cUn
    sinon
        teinteP vaut cZero
    fin si
    cercle(img, px, py, 13, teinteP)
    label(img, px - 4, py + 5, convertir_texte(valeur), #0d1b2a, 14)
fin procédure

@ Procédures de dessin des portes logiques
procédure dessinePorteET(img, px, py)
    rectangle_arrondi(img, px - 35, py - 30, 60, 60, 8, cPorte)
    label(img, px - 14, py + 6, "ET", #0d1b2a, 16)
fin procédure

procédure dessinePorteOU(img, px, py)
    rectangle_arrondi(img, px - 35, py - 30, 60, 60, 20, cPorte)
    label(img, px - 15, py + 6, "OU", #0d1b2a, 16)
fin procédure

procédure dessinePorteNON(img, px, py)
    // Utilisation d'un polygone plein pour le triangle
    polygone(img, px - 25, py - 25, px - 25, py + 25, px + 25, py, cPorte)
    cercle(img, px + 32, py, 6, cPorte)
    label(img, px - 18, py + 4, "NON", #0d1b2a, 10)
fin procédure

@ Boucle principale d'animation
combo est un nombre
pour combo de 0 à 7
    // Extraction des bits
    entreeA est un nombre
    entreeA vaut arrondi_inferieur(combo / 4) mod 2
    entreeB est un nombre
    entreeB vaut arrondi_inferieur(combo / 2) mod 2
    entreeC est un nombre
    entreeC vaut combo mod 2

    // Calcul de la logique
    g1 est un nombre
    si entreeA = 1 et entreeB = 1 alors
        g1 vaut 1
    sinon
        g1 vaut 0
    fin si

    g2 est un nombre
    si entreeC = 1 alors
        g2 vaut 0
    sinon
        g2 vaut 1
    fin si

    S est un nombre
    si g1 = 1 ou g2 = 1 alors
        S vaut 1
    sinon
        S vaut 0
    fin si

    // Animation de propagation
    phase est un nombre
    pour phase de 0 à 4
        img est une toile
        dimension(img, largeurToile, hauteurToile)
        dégradé(img, [fond1, fond2])

        // Grille de fond pour le style technique
        grille(img, 20, #1c2e4a)

        label(img, 130, 30, "Circuit : S = (A ET B) OU (NON C)", cTexte, 18)

        // ---- DESSIN DES FILS ----
        valFilA est un nombre
        valFilA vaut 0
        si phase >= 1 alors
            valFilA vaut entreeA
        fin si
        ligne(img, ax + 15, ay, etX - 40, ay, couleurFil(valFilA), 4)
        ligne(img, etX - 40, ay, etX - 40, etY - 15, couleurFil(valFilA), 4)

        valFilB est un nombre
        valFilB vaut 0
        si phase >= 1 alors
            valFilB vaut entreeB
        fin si
        ligne(img, bx + 15, by, etX - 40, by, couleurFil(valFilB), 4)
        ligne(img, etX - 40, by, etX - 40, etY + 15, couleurFil(valFilB), 4)

        valFilC est un nombre
        valFilC vaut 0
        si phase >= 1 alors
            valFilC vaut entreeC
        fin si
        ligne(img, cx + 15, cy, nonX - 30, cy, couleurFil(valFilC), 4)

        valG1 est un nombre
        valG1 vaut 0
        si phase >= 2 alors
            valG1 vaut g1
        fin si
        ligne(img, etX + 45, etY, ouX - 40, etY, couleurFil(valG1), 4)
        ligne(img, ouX - 40, etY, ouX - 40, ouY - 15, couleurFil(valG1), 4)

        valG2 est un nombre
        valG2 vaut 0
        si phase >= 2 alors
            valG2 vaut g2
        fin si
        ligne(img, nonX + 45, nonY, ouX - 40, nonY, couleurFil(valG2), 4)
        ligne(img, ouX - 40, nonY, ouX - 40, ouY + 15, couleurFil(valG2), 4)

        valS est un nombre
        valS vaut 0
        si phase >= 3 alors
            valS vaut S
        fin si
        ligne(img, ouX + 45, ouY, sx - 15, ouY, couleurFil(valS), 4)

        // ---- DESSIN DES PORTES ----
        appelle dessinePorteET(img, etX, etY)
        appelle dessinePorteNON(img, nonX, nonY)
        appelle dessinePorteOU(img, ouX, ouY)

        // ---- DESSIN DES PASTILLES ----
        label(img, ax - 30, ay + 5, "A", cTexte, 16)
        appelle pastille(img, ax, ay, entreeA)

        label(img, bx - 30, by + 5, "B", cTexte, 16)
        appelle pastille(img, bx, by, entreeB)

        label(img, cx - 30, cy + 5, "C", cTexte, 16)
        appelle pastille(img, cx, cy, entreeC)

        label(img, sx + 20, sy + 5, "S", cTexte, 18)
        si phase >= 3 alors
            appelle pastille(img, sx, sy, S)
        sinon
            cercle(img, sx, sy, 13, #37485e)
        fin si

        // Panneau explicatif
        texteExpl est un texte
        texteExpl vaut "A=" + convertir_texte(entreeA) + "  B=" + convertir_texte(entreeB) + "  C=" + convertir_texte(entreeC) + "   =>   S=" + convertir_texte(S)
        label(img, 130, 335, texteExpl, cTexte, 16)

        film ajoute img
    fin pour

    // Pause sur le résultat complet
    pauseC est un nombre
    pour pauseC de 0 à 5
        film ajoute film[longueur(film) - 1]
    fin pour
fin pour

@ Lancement de l'animation
animation(film, 200, 0)

Le Jeu de l’Oie est un classique intemporel. Pourtant, derrière sa simplicité apparente se cache un terrain fertile pour l’apprentissage de la logique, de la programmation et de la gestion d’événements. Le programme présenté ici propose une version numérique modernisée, jouable sur une toile graphique, avec animations, emojis, cases spéciales et une véritable boucle de jeu interactive.

Un plateau isométrique soigneusement construit

Dès l’initialisation, le programme prépare une toile qui servira de plateau. Celui-ci est dessiné en perspective isométrique, donnant un effet 3D élégant.
Chaque case est représentée par un losange, positionné selon un calcul précis mêlant lignes, colonnes et décalages visuels.

Les couleurs et les emojis permettent d’identifier immédiatement les cases importantes :

• Case 0 : départ
• Case 63 : arrivée
• Case 6 : pont
• Case 31 : puits
• Case 42 : labyrinthe
• Case 52 : prison
• Case 58 : mort
• Cases d’oie : une série de cases qui déclenchent un bonus de déplacement

Les positions du joueur et de l’ordinateur sont affichées directement sur le plateau.

Une mécanique de jeu fidèle mais enrichie

Le cœur du programme repose sur une boucle de jeu qui s’exécute tant que la partie n’est pas terminée.
Chaque tour commence par un clic du joueur sur la toile, déclenchant le lancer des deux dés.

Lancer de dés et déplacement

Le programme génère deux valeurs aléatoires entre 1 et 6, puis calcule la somme.
Le déplacement suit les règles traditionnelles :

• Avancer du total des dés
• Si l’on dépasse la case 63, on recule du surplus
• Si l’on tombe sur une case d’oie, on rejoue immédiatement et avance à nouveau du même total

Chaque action est accompagnée d’un message affiché sur le plateau, créant une narration dynamique.

Les cases spéciales : obstacles et rebondissements Le programme gère plusieurs événements emblématiques du Jeu de l’Oie :

- Pont (case 6)
Le joueur saute directement à la case 12.

- Puits (case 31)
Le joueur est bloqué pendant deux tours.

- Labyrinthe (case 42)
Retour forcé à la case 30.

- Prison (case 52)
Encore un blocage de deux tours.

- Mort (case 58)
Retour au départ, un coup dur qui peut renverser la partie.

Ces événements sont traités dans une fonction dédiée, garantissant une structure claire et réutilisable.

Un adversaire automatisé mais équitable

L’ordinateur joue selon les mêmes règles que le joueur :

• Lancer de dés
• Gestion des cases spéciales
• Blocages
• Déplacements et rebonds

Le duel est équilibré, et la progression des deux participants est visible en temps réel sur le plateau.

Fin de partie et déclaration du vainqueur

La partie s’arrête lorsque l’un des joueurs atteint exactement la case 63.
Un panneau final s’affiche alors :

• Vainqueur : Toi ou Ordi

Si la partie dépasse 200 tours, elle est automatiquement interrompue pour éviter les boucles infinies.

Un programme pédagogique et ludique

Ce Jeu de l’Oie numérique est bien plus qu’une simple reproduction du jeu traditionnel.
Il illustre :

• La gestion d’une interface graphique
• Le dessin isométrique
• Les événements aléatoires
• Les structures conditionnelles
• Les boucles de jeu
• La modularité via des fonctions
• L’interactivité par clic utilisateur

C’est un excellent exemple de projet mêlant logique, créativité, et plaisir de jeu.

Programme :

@ Initialisation
plateau est une toile

posJoueur, posOrdi est un nombre
posJoueur vaut 0
posOrdi vaut 0

bloqueJoueur, bloqueOrdi est un nombre
bloqueJoueur vaut 0
bloqueOrdi vaut 0

de1, de2 est un nombre
de1 vaut 1
de2 vaut 1

clicX, clicY est un nombre
clicX vaut 0
clicY vaut 0

fini est un booléen
fini vaut faux

gagnant est un texte
gagnant vaut ""

messages est un tableau
messages ajoute "Bienvenue dans le Jeu de l'Oie !"
messages ajoute "Atteins la case 63 exactement."
messages ajoute "Clique sur la toile pour lancer les 2 dés."

@ Affichage du Plateau
procédure afficherPlateau()
    // Efface tout le contenu de la toile avant de redessiner
    effacer(plateau)

    dimension(plateau, 600, 450)
    remplir(plateau, #F5F5DC)

    contour(plateau, #FFFFFF, 2)

    TILE_W, TILE_H est un nombre
    TILE_W vaut 64
    TILE_H vaut 32

    OFFSET_X, OFFSET_Y est un nombre
    OFFSET_X vaut 300
    // Décalage vers le bas (OFFSET_Y augmenté à 110)
    OFFSET_Y vaut 110

    rangee est un nombre
    pour rangee de 0 à 7
        colonne est un nombre
        pour colonne de 0 à 7
            i est un nombre
            si rangee mod 2 = 0 alors
                i vaut rangee * 8 + colonne
            sinon
                i vaut rangee * 8 + (7 - colonne)
            fin si

            isoX, isoY est un nombre
            isoX vaut OFFSET_X + (colonne - rangee) * (TILE_W / 2)
            isoY vaut OFFSET_Y + (colonne + rangee) * (TILE_H / 2)

            coul est un texte
            coul vaut #E8E4D0
            si i = 0 alors
                coul vaut #22C55E
            sinon si i = 63 alors
                coul vaut #FACC15
            sinon si i = 6 alors
                coul vaut #38BDF8
            sinon si i = 31 alors
                coul vaut #3B82F6
            sinon si i = 42 alors
                coul vaut #A855F7
            sinon si i = 52 alors
                coul vaut #6B7280
            sinon si i = 58 alors
                coul vaut #1F2937
            sinon si contient([5, 9, 14, 18, 23, 27, 32, 36, 41, 45, 50, 54, 59], i) alors
                coul vaut #FB923C
            fin si

            polygone(plateau, isoX, isoY - (TILE_H / 2), isoX + (TILE_W / 2), isoY, isoX, isoY + (TILE_H / 2), isoX - (TILE_W / 2), isoY, coul)

            label(plateau, isoX - 6, isoY - 3, convertir_texte(i), #334155, 10)

            emoji est un texte
            emoji vaut ""
            si i = 0 alors
                emoji vaut "🏁"
            sinon si i = 63 alors
                emoji vaut "🏆"
            sinon si i = 6 alors
                emoji vaut "🌉"
            sinon si i = 31 alors
                emoji vaut "💧"
            sinon si i = 42 alors
                emoji vaut "🌀"
            sinon si i = 52 alors
                emoji vaut "🔒"
            sinon si i = 58 alors
                emoji vaut "💀"
            sinon si contient([5, 9, 14, 18, 23, 27, 32, 36, 41, 45, 50, 54, 59], i) alors
                emoji vaut "🦢"
            fin si

            si emoji <> "" alors
                label(plateau, isoX - 8, isoY + 8, emoji, #000000, 13)
            fin si

            si i = posJoueur et i = posOrdi alors
                label(plateau, isoX - 14, isoY - 16, "😎🤖", #000000, 14)
            sinon si i = posJoueur alors
                label(plateau, isoX - 8, isoY - 16, "😎", #000000, 14)
            sinon si i = posOrdi alors
                label(plateau, isoX - 8, isoY - 16, "🤖", #000000, 14)
            fin si
        fin pour
    fin pour

    contour(plateau, #0)

    // Panneau de notifications
    nbMsg est un nombre
    nbMsg vaut longueur(messages)
    pour k de 0 à nbMsg - 1
        label(plateau, 10, 20 + k * 18, messages[k], #1E293B, 12)
    fin pour

    // Bouton d'interaction replacé en bas
    si fini = faux alors
        rectangle_arrondi(plateau, 170, 390, 140, 40, 8, #2563EB)
        label(plateau, 185, 415, "🎲 Lancer les dés", #FFFFFF, 13)
    fin si

    // Dessin des 2 dés replacés en bas
    contour(plateau, #334155, 2)
    rectangle_arrondi(plateau, 330, 390, 38, 38, 6, #FFFFFF)
    label(plateau, 343, 415, convertir_texte(de1), #000000, 18)

    rectangle_arrondi(plateau, 375, 390, 38, 38, 6, #FFFFFF)
    label(plateau, 388, 415, convertir_texte(de2), #000000, 18)
    contour(plateau, #0)

    affiche plateau
fin procédure

@ Fonctions
fonction caseSpeciale(p)
    si p = 6 alors
        messages ajoute " 🌉 PONT ! Saut à la case 12."
        retourne 12
    fin si
    si p = 31 alors
        messages ajoute " 💧 PUITS ! Bloqué."
        retourne 31
    fin si
    si p = 42 alors
        messages ajoute " 🌀 LABYRINTHE ! Retour à 30."
        retourne 30
    fin si
    si p = 52 alors
        messages ajoute " 🔒 PRISON ! Bloqué."
        retourne 52
    fin si
    si p = 58 alors
        messages ajoute " 💀 MORT ! Retour au départ."
        retourne 0
    fin si
    retourne p
fin fonction

fonction jouerTour(nom, pos)
    de1 vaut hasard(1, 6)
    de2 vaut hasard(1, 6)
    desTotal est un nombre
    desTotal vaut de1 + de2

    messages ajoute nom + " lance 2 dés : 🎲 " + convertir_texte(de1) + " + 🎲 " + convertir_texte(de2) + " = " + convertir_texte(desTotal)

    nouvellePos est un nombre
    nouvellePos vaut pos + desTotal

    si nouvellePos > 63 alors
        surplus est un nombre
        surplus vaut nouvellePos - 63
        nouvellePos vaut 63 - surplus
        messages ajoute " ↩️ Dépassement ! Recule à " + convertir_texte(nouvellePos)
    fin si

    si contient([5, 9, 14, 18, 23, 27, 32, 36, 41, 45, 50, 54, 59], nouvellePos) alors
        messages ajoute " 🦢 OIE ! Rejoue et avance de " + convertir_texte(desTotal)
        nouvellePos vaut nouvellePos + desTotal
        si nouvellePos > 63 alors
            surplus2 est un nombre
            surplus2 vaut nouvellePos - 63
            nouvellePos vaut 63 - surplus2
        fin si
    fin si

    nouvellePos vaut caseSpeciale(nouvellePos)
    messages ajoute " -> " + nom + " est sur la case " + convertir_texte(nouvellePos)
    retourne nouvellePos
fin fonction

@ Boucle de jeu
tour est un nombre
tour vaut 0

appelle afficherPlateau()

tant que fini = faux
    cliquer plateau dans clicX, clicY

    tour vaut tour + 1

    vide messages
    messages ajoute "--- Tour " + convertir_texte(tour) + " ---"

    si bloqueJoueur > 0 alors
        messages ajoute "😎 Tu es bloqué, tu passes."
        bloqueJoueur vaut bloqueJoueur - 1
    sinon
        posJoueur vaut jouerTour("😎 Toi", posJoueur)
        si posJoueur = 31 alors
            bloqueJoueur vaut 2
        fin si
        si posJoueur = 52 alors
            bloqueJoueur vaut 2
        fin si
        si posJoueur = 63 alors
            gagnant vaut "😎 Toi"
            fini vaut vrai
        fin si
    fin si

    si fini = faux alors
        si bloqueOrdi > 0 alors
            messages ajoute "🤖 L'ordinateur est bloqué, il passe."
            bloqueOrdi vaut bloqueOrdi - 1
        sinon
            posOrdi vaut jouerTour("🤖 Ordi", posOrdi)
            si posOrdi = 31 alors
                bloqueOrdi vaut 2
            fin si
            si posOrdi = 52 alors
                bloqueOrdi vaut 2
            fin si
            si posOrdi = 63 alors
                gagnant vaut "🤖 Ordi"
                fini vaut vrai
            fin si
        fin si
    fin si

    appelle afficherPlateau()

    si tour > 200 alors
        fini vaut vrai
    fin si
fin tant que

vide messages
messages ajoute "🏁 === FIN DE LA PARTIE === 🏁"
si gagnant = "" alors
    messages ajoute "Partie interrompue."
sinon
    messages ajoute "🎉 Vainqueur : " + gagnant + " ! 🎉"
fin si

appelle afficherPlateau()

Ce projet illustre comment un moteur de jeu peut être construit sans assets pré-fabriqués, uniquement grâce à des calculs mathématiques, des règles procédurales et un rendu 2.5D.
Le résultat : une expérience d’exploration dynamique, cohérente et entièrement générée à la volée.

Une carte infinie, générée par formules

Le monde du jeu repose sur une logique simple mais puissante : aucune carte n’est stockée, tout est calculé à partir des coordonnées du joueur.

Grâce à quelques opérations modulaires, chaque case peut devenir :

• herbe (zone traversable)
• terre (frontière naturelle)
• eau (obstacle)

Et selon des règles de hash :

• arbre
• rocher
• orbe d’énergie
• coffre d’or

Cette approche permet un monde infini, cohérent et sans répétition visible.

Une sortie générée aléatoirement… mais toujours atteignable

Le jeu place une porte de sortie sur une case valide, en vérifiant qu’elle n’est ni eau, ni arbre, ni rocher.
Le joueur doit l’atteindre avec au moins 50 pièces d’or, ce qui crée un objectif clair et motivant.

« Trouve la porte aux coordonnées (X, Y) avec 50 or ! »

Gestion d’énergie et interactions

Chaque déplacement consomme de l’énergie.

Le joueur doit donc :

• éviter les obstacles,
• ramasser des orbes pour recharger,
• ouvrir des coffres pour accumuler de l’or,
• surveiller son HUD pour ne pas tomber à zéro.

L’énergie devient une ressource stratégique, transformant l’exploration en véritable gestion de survie.

Un rendu pseudo-3D basé sur la perspective

Le moteur utilise une projection simple mais efficace :

• 15 couches de profondeur,
• un élargissement ou rétrécissement des polygones selon la distance,
• un décor qui se dessine en temps réel autour du joueur.

Chaque élément (arbre, rocher, coffre, orbe, porte) possède sa propre forme 2.5D, calculée à partir de la distance et de la taille projetée.

Le résultat : une impression de relief et de profondeur, sans recourir à un vrai moteur 3D.

Un personnage animé par la logique

Le personnage n’est pas statique :

• ses jambes bougent selon la somme des coordonnées, créant une animation de marche minimaliste mais expressive.
• Son ombre, son torse, ses bras et sa tête sont dessinés à partir de formes simples, mais l’ensemble donne une vraie présence visuelle.

Un HUD complet pour guider le joueur

Le jeu affiche :

• la position du joueur,
• la position de la sortie,
• la direction optimale,
• l’énergie restante,
• l’or collecté,
• un message dynamique selon les interactions.

« CAP SORTIE : NORD (Z) et EST (D) »

Ce guidage transforme l’exploration en quête structurée, tout en laissant la liberté de se déplacer.

Une boucle de gameplay simple, mais efficace

Le joueur avance, explore, collecte, évite, recharge…
Jusqu’à atteindre la porte avec suffisamment d’or.

Lorsqu’il y parvient :

• « Porte déverrouillée ! Victoire ! »

Une boucle courte, mais parfaitement cohérente et gratifiante.

Un projet qui démontre la puissance du procédural

Ce moteur RPG minimaliste prouve qu’avec :

• des règles mathématiques,
• un rendu 2.5D intelligent,
• une gestion d’état claire,
• et une logique d’interaction bien pensée,
• on peut créer une expérience de jeu immersive, dynamique et entièrement générée en temps réel.

Un excellent exemple de ce que l’on peut accomplir en combinant créativité, algorithmique et design.

Programme :

@ Initialisation
toile1 est une toile
dimension(toile1, 550, 400)

jX est un nombre
jY est un nombre
jX vaut 0
jY vaut 0

// Génération de la porte sur une case libre (ni eau, ni arbre, ni rocher)
exitX est un nombre
exitY est un nombre
porteValide est un booléen
porteValide vaut faux

tant que porteValide = faux
    exitX vaut hasard(40, 200)
    exitY vaut hasard(40, 200)

    eNX est un nombre
    eNY est un nombre
    eNX vaut exitX + 50000
    eNY vaut exitY + 50000

    eSol est un nombre
    eSol vaut 0
    si eNX mod 14 = 0 ou eNY mod 14 = 0 alors
        eSol vaut 1
    sinon si (eNX * 3 + eNY * 2) mod 31 < 2 alors
        eSol vaut 2
    fin si

    eDecor est un nombre
    eDecor vaut 0
    si eSol = 0 alors
        eHash est un nombre
        eHash vaut (eNX * 17 + eNY * 37) mod 100
        si eHash < 12 alors eDecor vaut 1
        sinon si eHash < 20 alors eDecor vaut 2
        fin si
    fin si

    // On valide seulement si ce n'est pas de l'eau, un arbre ou un rocher
    si eSol <> 2 et eDecor <> 1 et eDecor <> 2 alors
        porteValide vaut vrai
    fin si
fin tant que

orRequis est un nombre
orRequis vaut 50

action est un nombre
derniereAction est un nombre
derniereAction vaut 1

@ Inventaire et Énergie
orJoueur est un nombre
orJoueur vaut 0

objetsDetruits est un dictionnaire
objetsDetruits vaut [:]

energie est un nombre
energie vaut 100

victoire est un booléen
victoire vaut faux

messageHUD est un texte
messageHUD vaut "Trouve la porte aux coordonnées (" + convertir_texte(exitX) + ", " + convertir_texte(exitY) + ") avec 50 or !"

@ Boucle principale
tant que vrai
    effacer(toile1)
    remplir(toile1, #0f172a)

    // 1. Ciel et Soleil
    rectangle(toile1, 0, 0, 550, 120, #0f172a)
    cercle(toile1, 460, 40, 20, #f1c40f)

    // 2. Rendu du terrain 3D
    iY est un nombre
    pour iY de 0 à 15
        rY est un nombre
        rY vaut 15 - iY

        rX est un nombre
        pour rX de - 8 à 8
            gx est un nombre
            gy est un nombre
            gx vaut jX + rX
            gy vaut jY + rY

            nx est un nombre
            ny est un nombre
            nx vaut gx + 50000
            ny vaut gy + 50000

            dLoin est un nombre
            dPres est un nombre
            dLoin vaut rY + 0.5 + 2.0
            dPres vaut rY - 0.5 + 2.0

            sLoin est un nombre
            sPres est un nombre
            sLoin vaut 180 / dLoin
            sPres vaut 180 / dPres

            xHautG est un nombre
            yHautG est un nombre
            xHautD est un nombre
            yHautD est un nombre
            xBasD est un nombre
            yBasD est un nombre
            xBasG est un nombre
            yBasG est un nombre

            xHautG vaut 275 + (rX - 0.5) * sLoin * 1.3
            yHautG vaut 120 + sLoin * 2.5
            xHautD vaut 275 + (rX + 0.5) * sLoin * 1.3
            yHautD vaut 120 + sLoin * 2.5

            xBasD vaut 275 + (rX + 0.5) * sPres * 1.3
            yBasD vaut 120 + sPres * 2.5
            xBasG vaut 275 + (rX - 0.5) * sPres * 1.3
            yBasG vaut 120 + sPres * 2.5

            dCentre est un nombre
            dCentre vaut rY + 2.0
            sCentre est un nombre
            sCentre vaut 180 / dCentre

            cx est un nombre
            cy est un nombre
            cx vaut 275 + rX * sCentre * 1.3
            cy vaut 120 + sCentre * 2.5

            typeSol est un nombre
            typeSol vaut 0

            si nx mod 14 = 0 ou ny mod 14 = 0 alors
                typeSol vaut 1
            sinon si (nx * 3 + ny * 2) mod 31 < 2 alors
                typeSol vaut 2
            fin si

            ptsSol est un tableau
            ptsSol ajoute xHautG
            ptsSol ajoute yHautG
            ptsSol ajoute xHautD
            ptsSol ajoute yHautD
            ptsSol ajoute xBasD
            ptsSol ajoute yBasD
            ptsSol ajoute xBasG
            ptsSol ajoute yBasG

            si typeSol = 0 alors
                polygone(toile1, ptsSol, #27ae60)
            sinon si typeSol = 1 alors
                polygone(toile1, ptsSol, #d35400)
            sinon
                polygone(toile1, ptsSol, #2980b9)
            fin si

            contour(toile1, #1a252f, 1)

            // Génération des éléments sur la carte
            typeDecor est un nombre
            typeDecor vaut 0

            si gx = exitX et gy = exitY alors
                typeDecor vaut 5
            sinon si typeSol = 0 alors
                hash est un nombre
                hash vaut (nx * 17 + ny * 37) mod 100
                si hash < 12 alors typeDecor vaut 1        // Arbre
                sinon si hash < 20 alors typeDecor vaut 2   // Rocher
                sinon si hash < 26 alors typeDecor vaut 3   // Orbe d'Énergie
                sinon si hash < 31 alors typeDecor vaut 4   // Coffre d me d'Or
                fin si
            fin si

            cleCase est un texte
            cleCase vaut convertir_texte(nx) + "," + convertir_texte(ny)
            si contient(objetsDetruits, cleCase) et typeDecor <> 5 alors
                typeDecor vaut 0
            fin si

            hTaille est un nombre
            hTaille vaut sCentre * 0.85

            si typeDecor = 1 alors
                // Arbre (Obstacle)
                ellipse(toile1, cx, cy, hTaille * 0.3, hTaille * 0.1, #0e171e)
                rectangle(toile1, cx - hTaille * 0.08, cy - hTaille * 0.6, hTaille * 0.16, hTaille * 0.6, #5d4037)
                cercle(toile1, cx, cy - hTaille * 0.85, hTaille * 0.35, #1e8449)
            sinon si typeDecor = 2 alors
                // Rocher (Obstacle)
                ellipse(toile1, cx, cy, hTaille * 0.25, hTaille * 0.1, #0e171e)
                cercle(toile1, cx, cy - hTaille * 0.15, hTaille * 0.2, #7f8c8d)
            sinon si typeDecor = 3 alors
                // Orbe d'Énergie
                cercle(toile1, cx, cy - hTaille * 0.2, hTaille * 0.22, rgba(56, 189, 248, 0.4))
                cercle(toile1, cx, cy - hTaille * 0.2, hTaille * 0.14, #00d2ff)
                cercle(toile1, cx, cy - hTaille * 0.2, hTaille * 0.06, #ffffff)
            sinon si typeDecor = 4 alors
                // Coffre d'Or
                rectangle(toile1, cx - hTaille * 0.2, cy - hTaille * 0.3, hTaille * 0.4, hTaille * 0.3, #d35400)
                rectangle(toile1, cx - hTaille * 0.2, cy - hTaille * 0.3, hTaille * 0.4, hTaille * 0.08, #f1c40f)
                cercle(toile1, cx, cy - hTaille * 0.15, hTaille * 0.05, #f1c40f)
            sinon si typeDecor = 5 alors
                // Porte de Sortie
                rectangle(toile1, cx - hTaille * 0.25, cy - hTaille * 0.7, hTaille * 0.5, hTaille * 0.7, #f1c40f)
                rectangle(toile1, cx - hTaille * 0.18, cy - hTaille * 0.63, hTaille * 0.36, hTaille * 0.6, #0f172a)
                cercle(toile1, cx, cy - hTaille * 0.35, hTaille * 0.08, #f1c40f)
            fin si

        fin pour
    fin pour

    // 3. Personnage principal
    pX est un nombre
    pY est un nombre
    pX vaut 275
    pY vaut 340

    etapeMarche est un nombre
    etapeMarche vaut absolue(jX + jY) mod 4

    rebond est un nombre
    rebond vaut 0
    si etapeMarche = 1 ou etapeMarche = 3 alors rebond vaut -2 fin si

    ellipse(toile1, pX, pY + 16, 22, 6, rgba(0, 0, 0, 0.4))

    jambeG_Y est un nombre
    jambeD_Y est un nombre
    jambeG_Y vaut pY + 4
    jambeD_Y vaut pY + 4

    si etapeMarche = 1 alors jambeG_Y vaut pY
    sinon si etapeMarche = 3 alors jambeD_Y vaut pY
    fin si

    rectangle_arrondi(toile1, pX - 7, jambeG_Y, 6, 12, 2, #34495e)
    rectangle_arrondi(toile1, pX - 8, jambeG_Y + 10, 8, 5, 2, #111111)

    rectangle_arrondi(toile1, pX + 1, jambeD_Y, 6, 12, 2, #34495e)
    rectangle_arrondi(toile1, pX + 0, jambeD_Y + 10, 8, 5, 2, #111111)

    cY est un nombre
    cY vaut pY - 12 + rebond

    rectangle_arrondi(toile1, pX - 12, cY - 2, 6, 14, 3, #2980b9)
    cercle(toile1, pX - 9, cY + 12, 3, #f1c27d)

    rectangle_arrondi(toile1, pX + 6, cY - 2, 6, 14, 3, #2980b9)
    cercle(toile1, pX + 9, cY + 12, 3, #f1c27d)

    rectangle_arrondi(toile1, pX - 8, cY - 5, 16, 18, 4, #3498db)

    si derniereAction = 2 alors
        rectangle(toile1, pX - 8, cY + 9, 16, 4, #2c3e50)
        rectangle(toile1, pX - 2, cY + 8, 4, 6, #f1c40f)

        tY est un nombre
        tY vaut cY - 12
        cercle(toile1, pX, tY, 9, #f1c27d)
        arc(toile1, pX, tY + 2, 9, 180, 360, #6e2c00)
        cercle(toile1, pX - 3, tY - 1, 1, #000000)
        cercle(toile1, pX + 3, tY - 1, 1, #000000)
    sinon
        rectangle_arrondi(toile1, pX - 6, cY - 2, 12, 14, 3, #d35400)
        rectangle(toile1, pX - 6, cY + 3, 12, 2, #873600)

        tY est un nombre
        tY vaut cY - 12
        cercle(toile1, pX, tY, 9, #f1c27d)
        cercle(toile1, pX, tY - 2, 8, #6e2c00)
    fin si

    // 4. Interface HUD & Guidage
    rectangle(toile1, 0, 0, 550, 90, rgba(15, 23, 42, 0.95))
    contour(toile1, #334155, 1)

    label(toile1, 10, 15, "Or: " + convertir_texte(orJoueur) + " / " + convertir_texte(orRequis), #f1c40f, 12)

    rectangle(toile1, 140, 7, 120, 10, #334155)
    si energie > 0 alors
        colNRG est un texte
        colNRG vaut #38bdf8
        si energie < 30 alors colNRG vaut #ef4444 fin si
        rectangle(toile1, 140, 7, (energie / 100) * 120, 10, colNRG)
    fin si
    label(toile1, 270, 15, "Énergie: " + convertir_texte(energie) + "%", #38bdf8, 10)

    distX est un nombre
    distY est un nombre
    distX vaut exitX - jX
    distY vaut exitY - jY

    distTotale est un nombre
    distTotale vaut absolue(distX) + absolue(distY)

    txtPos est un texte
    txtPos vaut "Position: (" + convertir_texte(jX) + ", " + convertir_texte(jY) + ")  |  Sortie: (" + convertir_texte(exitX) + ", " + convertir_texte(exitY) + ")"
    label(toile1, 10, 36, txtPos, #94a3b8, 10)

    dirConseil est un texte
    dirConseil vaut "CAP SORTIE : "

    si distY > 0 et distX > 0 alors dirConseil vaut dirConseil + "NORD (Z) et EST (D)"
    sinon si distY > 0 et distX < 0 alors dirConseil vaut dirConseil + "NORD (Z) et OUEST (Q)"
    sinon si distY < 0 et distX > 0 alors dirConseil vaut dirConseil + "SUD (S) et EST (D)"
    sinon si distY < 0 et distX < 0 alors dirConseil vaut dirConseil + "SUD (S) et OUEST (Q)"
    sinon si distY > 0 alors dirConseil vaut dirConseil + "NORD (Touche Z)"
    sinon si distY < 0 alors dirConseil vaut dirConseil + "SUD (Touche S)"
    sinon si distX > 0 alors dirConseil vaut dirConseil + "EST (Touche D)"
    sinon si distX < 0 alors dirConseil vaut dirConseil + "OUEST (Touche Q)"
    sinon dirConseil vaut "SUR LA PORTE !"
    fin si

    label(toile1, 10, 56, dirConseil + " (" + convertir_texte(distTotale) + " pas)", #f59e0b, 11)
    label(toile1, 10, 78, ">> " + messageHUD, #22c55e, 11)

    si victoire alors
        rectangle(toile1, 75, 130, 400, 110, rgba(15, 23, 42, 0.95))
        rectangle(toile1, 75, 130, 400, 4, #f1c40f)
        label(toile1, 155, 175, "VICTOIRE !", #f1c40f, 20)
        label(toile1, 105, 210, "Porte atteinte aux coordonnées (" + convertir_texte(exitX) + ", " + convertir_texte(exitY) + ") !", #ffffff, 12)
    fin si

    affiche toile1

    // 5. Mouvements et Interactions
    appuyer ["z", "s", "q", "d"] dans action

    si action > 0 et victoire = faux alors
        derniereAction vaut action

        nouvX est un nombre
        nouvY est un nombre
        nouvX vaut jX
        nouvY vaut jY

        si action = 1 alors nouvY vaut jY + 1 fin si
        si action = 2 alors nouvY vaut jY - 1 fin si
        si action = 3 alors nouvX vaut jX - 1 fin si
        si action = 4 alors nouvX vaut jX + 1 fin si

        chkX est un nombre
        chkY est un nombre
        chkX vaut nouvX + 50000
        chkY vaut nouvY + 50000

        solFutur est un nombre
        solFutur vaut 0
        si chkX mod 14 = 0 ou chkY mod 14 = 0 alors
            solFutur vaut 1
        sinon si (chkX * 3 + chkY * 2) mod 31 < 2 alors
            solFutur vaut 2
        fin si

        decorFutur est un nombre
        decorFutur vaut 0

        si nouvX = exitX et nouvY = exitY alors
            decorFutur vaut 5
        sinon si solFutur = 0 alors
            hFutur est un nombre
            hFutur vaut (chkX * 17 + chkY * 37) mod 100
            si hFutur < 12 alors decorFutur vaut 1
            sinon si hFutur < 20 alors decorFutur vaut 2
            sinon si hFutur < 26 alors decorFutur vaut 3
            sinon si hFutur < 31 alors decorFutur vaut 4
            fin si
        fin si

        cleDest est un texte
        cleDest vaut convertir_texte(chkX) + "," + convertir_texte(chkY)
        si contient(objetsDetruits, cleDest) et decorFutur <> 5 alors
            decorFutur vaut 0
        fin si

        si solFutur = 2 alors
            messageHUD vaut "L'eau bloque le passage !"

        sinon si decorFutur = 1 alors
            messageHUD vaut "Un arbre bloque le passage !"

        sinon si decorFutur = 2 alors
            messageHUD vaut "Un rocher bloque le passage !"

        sinon si decorFutur = 5 alors
            si orJoueur >= orRequis alors
                victoire vaut vrai
                jX vaut nouvX
                jY vaut nouvY
                messageHUD vaut "Porte déverrouillée ! Victoire !"
            sinon
                messageHUD vaut "Il te faut " + convertir_texte(orRequis) + " pièces d'or ! (Tu en as " + convertir_texte(orJoueur) + ")"
            fin si

        sinon si decorFutur = 3 alors
            objetsDetruits[cleDest] vaut vrai
            energie vaut energie + 35
            si energie > 100 alors energie vaut 100 fin si
            jX vaut nouvX
            jY vaut nouvY
            messageHUD vaut "Orbe d'Énergie ramassé ! +35% Énergie !"

        sinon si decorFutur = 4 alors
            orJoueur vaut orJoueur + 10
            objetsDetruits[cleDest] vaut vrai
            jX vaut nouvX
            jY vaut nouvY
            messageHUD vaut "Coffre ouvert ! +10 Or récolté !"

        sinon
            jX vaut nouvX
            jY vaut nouvY
            energie vaut energie - 1

            si energie <= 0 alors
                energie vaut 0
                messageHUD vaut "Énergie épuisée ! Trouve un orbe bleu !"
            sinon
                messageHUD vaut "En route..."
            fin si
        fin si

    fin si
fin tant que

Ce programme propose une expérience ludique et pédagogique : reproduire un smiley en pixel art à partir d’un modèle binaire. Il combine interface graphique, interactions utilisateur et vérification automatique du résultat, offrant une manière intuitive d’aborder la logique informatique.

Initialisation du jeu

Le programme commence par définir les éléments essentiels :

• Une grille de jeu affichée sur une toile graphique.
• Une matrice 8×8, soit 64 cases, représentant les pixels du dessin.

Un modèle binaire composé de 8 chaînes de 8 caractères (0 ou 1) formant un smiley stylisé.

Chaque chiffre correspond à un pixel :

• 0 : pixel blanc
• 1 : pixel violet

La grille du joueur est initialisée avec 64 zéros, prête à être remplie.

Des paramètres d’affichage (taille des cases, position, couleurs) structurent l’interface et garantissent une présentation claire.

Panneau de gauche : le modèle à reproduire

On y trouve :

• Les 8 lignes du code binaire
• Une légende expliquant la signification des chiffres
• Une présentation propre et arrondie pour faciliter la lecture

Grille de dessin

À droite, la grille 8×8 affiche :

• La numérotation des lignes et colonnes
• Des cases blanches par défaut
• Des cases violettes lorsqu’on clique dessus

Chaque clic inverse la valeur : 0 : 1 ou 1 : 0.

Score en temps réel

Le programme compare en continu la grille du joueur au modèle :

• Chaque pixel correct ajoute un point
• Le score est affiché sur le bouton "Vérifier"

Boutons d’action

Deux boutons permettent :

Vérifier la grille (score final sur 64)

Effacer pour recommencer

Un message d’état accompagne le joueur tout au long de la partie.

La boucle de jeu : interaction et logique

La boucle tant que fini = faux gère les interactions :

Le programme attend un clic.

Il détecte si ce clic concerne :

• une case de la grille
• le bouton "Vérifier"
• le bouton "Effacer"

Il met à jour la grille ou le message d’état.
Il redessine l’interface pour refléter les changements.

Validation du dessin

Lorsqu’on clique sur "Vérifier", le programme calcule un score final :

64/64 : message de réussite :

• 🎉 Bravo ! Tu as parfaitement décodé l'image binaire !
• Sinon : message indiquant le nombre de pixels corrects.

Un outil idéal pour apprendre le binaire autrement

Ce programme est un excellent support pour :

• comprendre la représentation des images en binaire
• manipuler des tableaux et des boucles
• découvrir la logique des interfaces interactives
• expérimenter le pixel art numérique

Il transforme un concept abstrait, le codage binaire, en une activité visuelle, intuitive et amusante.

Programme :

@ Initialisation
grilleJeu est une toile

colonnes, lignes est un nombre
colonnes vaut 8
lignes vaut 8

t est un nombre
t vaut 36

offsetX, offsetY est un nombre
offsetX vaut 340
offsetY vaut 80

teinte est un texte
teinte vaut #8B5CF6

// Modèle binaire (smiley)
modele est un tableau
modele ajoute "00111100"
modele ajoute "01000010"
modele ajoute "10100101"
modele ajoute "10000001"
modele ajoute "10100101"
modele ajoute "10011001"
modele ajoute "01000010"
modele ajoute "00111100"

// Grille du joueur (64 cases initialisées à 0)
grilleJoueur est un tableau
pour i de 0 à 63
    grilleJoueur ajoute 0
fin pour

clicX, clicY est un nombre
clicX vaut 0
clicY vaut 0

fini est un booléen
fini vaut faux

messageStatut est un texte
messageStatut vaut "Clique sur les cases de la grille pour dessiner le code !"

@ Affichage de l'interface
procédure dessinerJeu()
    effacer(grilleJeu)
    dimension(grilleJeu, 680, 430)
    remplir(grilleJeu, #F8FAFC)

    // En-tête
    rectangle(grilleJeu, 0, 0, 680, 50, #1E293B)
    label(grilleJeu, 20, 32, "🎨 Pixel Art Binaire — Décodage", #FFFFFF, 16)

    // Panneau de gauche : Modèle Binaire
    contour(grilleJeu, #CBD5E1, 1)
    rectangle_arrondi(grilleJeu, 20, 65, 280, 315, 8, #FFFFFF)
    contour(grilleJeu, #0)

    label(grilleJeu, 35, 90, "Code Binaire à reproduire :", #0F172A, 14)

    pour l de 0 à lignes - 1
        texteLigne est un texte
        texteLigne vaut "Ligne " + convertir_texte(l) + " :  " + modele[l]
        label(grilleJeu, 35, 120 + l * 26, texteLigne, #334155, 13)
    fin pour

    label(grilleJeu, 35, 360, "0 = Case blanche  |  1 = Pixel violet", #64748B, 11)

    // Numérotation des colonnes et lignes de la grille
    pour c de 0 à colonnes - 1
        label(grilleJeu, offsetX + c * t + 12, offsetY - 10, convertir_texte(c), #64748B, 12)
    fin pour

    pour l de 0 à lignes - 1
        label(grilleJeu, offsetX - 20, offsetY + l * t + 22, convertir_texte(l), #64748B, 12)
    fin pour

    // Dessin des cases de la grille
    contour(grilleJeu, #94A3B8, 1)
    pour l de 0 à lignes - 1
        pour c de 0 à colonnes - 1
            px, py, idx est un nombre
            px vaut offsetX + c * t
            py vaut offsetY + l * t
            idx vaut l * colonnes + c

            si grilleJoueur[idx] = 1 alors
                rectangle(grilleJeu, px, py, t, t, teinte)
            sinon
                rectangle(grilleJeu, px, py, t, t, #FFFFFF)
            fin si
        fin pour
    fin pour
    contour(grilleJeu, #0)

    // Calcul en temps réel du score
    scoreActuel est un nombre
    scoreActuel vaut 0
    pour l de 0 à lignes - 1
        chaineLigne est un texte
        chaineLigne vaut modele[l]
        pour c de 0 à colonnes - 1
            idx vaut l * colonnes + c
            attendu est un texte
            attendu vaut chaineLigne[c + 1]
            valeurJoueur est un texte
            valeurJoueur vaut convertir_texte(grilleJoueur[idx])

            si valeurJoueur = attendu alors
                scoreActuel vaut scoreActuel + 1
            fin si
        fin pour
    fin pour

    // Boutons d'action
    contour(grilleJeu, #2563EB, 1)
    rectangle_arrondi(grilleJeu, 340, 380, 150, 35, 6, #2563EB)
    label(grilleJeu, 355, 402, "Vérifier (" + convertir_texte(scoreActuel) + " / 64)", #FFFFFF, 12)

    contour(grilleJeu, #EF4444, 1)
    rectangle_arrondi(grilleJeu, 505, 380, 120, 35, 6, #EF4444)
    label(grilleJeu, 530, 402, "Effacer", #FFFFFF, 12)
    contour(grilleJeu, #0)

    // Message d'information
    label(grilleJeu, 20, 410, messageStatut, #1E293B, 12)

    affiche grilleJeu
fin procédure

@ Boucle de jeu
appelle dessinerJeu()

tant que fini = faux
    cliquer grilleJeu dans clicX, clicY

    // Clic sur une case de la grille
    pour l de 0 à lignes - 1
        pour c de 0 à colonnes - 1
            px, py est un nombre
            px vaut offsetX + c * t
            py vaut offsetY + l * t

            si clique(clicX, clicY, px, py, t, t) alors
                idx est un nombre
                idx vaut l * colonnes + c

                si grilleJoueur[idx] = 0 alors
                    grilleJoueur[idx] vaut 1
                sinon
                    grilleJoueur[idx] vaut 0
                fin si
            fin si
        fin pour
    fin pour

    // Clic sur le bouton "Vérifier"
    si clique(clicX, clicY, 340, 380, 150, 35) alors
        scoreTotal est un nombre
        scoreTotal vaut 0

        pour l de 0 à lignes - 1
            chaineLigne est un texte
            chaineLigne vaut modele[l]
            pour c de 0 à colonnes - 1
                idx vaut l * colonnes + c
                attendu est un texte
                attendu vaut chaineLigne[c + 1]
                valeurJoueur est un texte
                valeurJoueur vaut convertir_texte(grilleJoueur[idx])

                si valeurJoueur = attendu alors
                    scoreTotal vaut scoreTotal + 1
                fin si
            fin pour
        fin pour

        si scoreTotal = 64 alors
            messageStatut vaut "🎉 Bravo ! Tu as parfaitement décodé l'image binaire !"
            fini vaut vrai
        sinon
            messageStatut vaut "Encore des erreurs (" + convertir_texte(scoreTotal) + " / 64 pixels corrects)."
        fin si
    fin si

    // Clic sur le bouton "Effacer"
    si clique(clicX, clicY, 505, 380, 120, 35) alors
        pour i de 0 à 63
            grilleJoueur[i] vaut 0
        fin pour
        messageStatut vaut "Grille réinitialisée."
    fin si

    appelle dessinerJeu()
fin tant que

Dans le monde de la programmation, il existe plusieurs façons de stocker et de retrouver des informations. Deux structures de données très courantes sont :

• le tableau (array)
• le dictionnaire (map, hash table)

À première vue, elles semblent similaires : on y range des données, puis on les consulte. Pourtant, lorsqu’il s’agit de retrouver une valeur à partir d’une clé, leurs performances sont radicalement différentes.

La recherche dans un tableau : un parcours obligatoire

Dans la première partie du programme, on stocke :

• les noms dans un tableau noms
• les numéros dans un tableau numeros

Pour retrouver le numéro associé à un nom, la fonction :

fonction chercheDansTableau(noms, numeros, cible)
    pour i de 0 à longueur(noms) - 1
        si noms[i] = cible alors
            retourne numeros[i]
        fin si
    fin pour
    retourne "introuvable"
fin fonction

Cette méthode impose un parcours élément par élément.
Si la cible se trouve :

• au début : rapide
• au milieu : moyen
• à la fin : très lent

Dans ton test, tu ajoutes volontairement "Zoé" à la toute fin, ce qui force le tableau à parcourir 5001 entrées avant de trouver la bonne.

• Complexité : O(n)

Plus il y a d’éléments, plus la recherche devient lente.

Le dictionnaire : l’accès direct par clé

Ensuite, tu construis un dictionnaire :

annuaire[noms[k]] vaut numeros[k]

Ici, chaque nom devient une clé, et chaque numéro une valeur.
Pour retrouver le numéro de Zoé, il suffit de faire :

annuaire["Zoé"]

Aucun parcours, aucune boucle : le dictionnaire utilise une fonction de hachage qui calcule directement l’emplacement de la clé.

• Complexité : O(1)

Ce que démontre ce programme

Ce petit test met en lumière une vérité fondamentale en algorithmique :

Les tableaux sont parfaits pour stocker des listes ordonnées
Mais pas optimisés pour rechercher une valeur à partir d’une clé.

Les dictionnaires sont conçus pour la recherche rapide
Ils sont idéaux pour :

• des annuaires
• des index
• des correspondances clé : valeur
• des bases de données en mémoire

Le temps d’accès est constant, quelle que soit la taille de l’annuaire.

Pourquoi c’est important ?

Dans un programme réel, la différence entre O(n) et O(1) peut devenir énorme :

• 5 000 entrées : quelques millisecondes
• 5 millions : plusieurs secondes
• 50 millions : des minutes

Les dictionnaires permettent de garder des performances stables, même avec des volumes massifs.

Programme :

@ Dictionnaire vs tableau : la recherche

// On cherche une valeur associée à une clé, de deux façons.

// --- MÉTHODE TABLEAU : parcours élément par élément (O(n)) ---
// On stocke les noms dans un tableau et les numéros dans un autre.
fonction chercheDansTableau(noms, numeros, cible)
    pour i de 0 à longueur(noms) - 1
        si noms[i] = cible alors
            retourne numeros[i]
        fin si
    fin pour
    retourne "introuvable"
fin fonction

// --- Remplissage des données de test ---
noms est un tableau
numeros est un tableau
pour k de 1 à 5000
    noms ajoute "Personne" + convertir_texte(k)
    numeros ajoute "06-00-00-" + convertir_texte(k)
fin pour

// On ajoute la cible tout à la fin : le PIRE cas pour le tableau
noms ajoute "Zoé"
numeros ajoute "06-99-99-99"

// --- Le même annuaire, version DICTIONNAIRE (accès par clé, O(1)) ---
annuaire est un dictionnaire
pour k de 0 à longueur(noms) - 1
    annuaire[noms[k]] vaut numeros[k]
fin pour

affiche "Recherche du numéro de Zoé..."
affiche ""

// --- Test 1 : le TABLEAU (doit tout parcourir) ---
debut est un nombre
debut vaut chrono()
resultatA est un texte
resultatA vaut chercheDansTableau(noms, numeros, "Zoé")
finA est un nombre
finA vaut chrono()

affiche "?? Tableau     -> " + resultatA
affiche "   Temps : " + convertir_texte(finA - debut) + " ms (a parcouru jusqu'à 5001 fiches)"
affiche ""

// --- Test 2 : le DICTIONNAIRE (accès direct par clé) ---
depart est un nombre
depart vaut chrono()
resultatB est un texte
resultatB vaut annuaire["Zoé"]
finB est un nombre
finB vaut chrono()

affiche "? Dictionnaire -> " + resultatB
affiche "   Temps : " + convertir_texte(finB - depart) + " ms (accès direct, aucun parcours)"
affiche ""
affiche "?? Même résultat, mais le dictionnaire va droit au but !"
affiche "   Tableau = O(n) | Dictionnaire = O(1)"