Articles & Actualités

Un moteur de puzzle qui conçoit, teste et optimise ses propres niveaux

Aujourd’hui, je partage un projet qui m’a passionné : un générateur de niveaux entièrement autonome pour un puzzle de voitures, inspiré du célèbre Rush Hour.

Ce programme ne se contente pas d’afficher un jeu, il pense, analyse et sélectionne les meilleurs défis avant même que le joueur ne commence à jouer.

Un puzzle simple… mais une mécanique complexe derrière

Le principe : une grille 6×6, une voiture rouge à sortir par la droite, et des véhicules qui bloquent le passage.
Mais derrière cette apparente simplicité, le programme :

• place les voitures aléatoirement,
• vérifie que la configuration est jouable,
• calcule le nombre minimal de coups pour résoudre le niveau,
• retient uniquement les configurations les plus intéressantes.

Chaque niveau est donc unique, équilibré, et surtout résolu par l’algorithme avant d’être proposé au joueur.

Un générateur basé sur la recherche en largeur (BFS)

Pour évaluer la difficulté d’un niveau, chaque configuration est encodée sous forme d’un nombre en base 6.
Ensuite, le programme explore toutes les possibilités via une recherche en largeur (Breadth‑First Search) :

• file d’états,
• dictionnaire des configurations déjà vues,
• génération des déplacements possibles,
• calcul du nombre minimal de coups.

Ce système permet de déterminer précisément la difficulté d’un niveau et d’assurer une progression cohérente.

Une interface entièrement dessinée par le programme

Le moteur graphique gère :

• le parking,
• les voitures (formes arrondies, ombres, vitrage),
• les boutons interactifs,
• les messages contextuels,
• l’écran de victoire.

Chaque élément visuel est généré via des procédures dédiées, pour un rendu propre et dynamique.

Un niveau n’est retenu que s’il représente un vrai défi

Le programme teste jusqu’à 12 configurations différentes et retient celle qui demande le plus de coups pour être résolue.
Il classe ensuite la difficulté : Facile, Moyen, Difficile, Expert.

Le joueur bénéficie ainsi d’une expérience progressive, sans niveaux trop simples ou impossibles.

Une expérience fluide et intuitive

Le joueur peut :

• sélectionner une voiture,
• choisir une destination,
• recommencer le niveau,
• générer un nouveau défi,
• passer automatiquement au niveau suivant après une victoire.

Le tout géré par une boucle principale qui orchestre l’affichage, les interactions et la logique du jeu.

En résumé

Embouteillage est un moteur de puzzle complet, capable de :

• générer des niveaux cohérents,
• analyser leur difficulté,
• sélectionner les meilleurs,
• les afficher avec une interface claire,
• gérer toutes les interactions du joueur.

Une belle démonstration de ce que l’on peut accomplir en combinant algorithmique, génération procédurale, graphisme, et game design.

Programme : Embouteillage

Dans ce projet, l’heure n’est plus simplement affichée : elle est reconstruite, stylisée et animée sous forme de pixel‑art. Chaque chiffre, chaque deux‑points, chaque changement de seconde devient un petit événement graphique.

Le résultat est une horloge numérique rétro‑moderne, colorée, vivante et entièrement générée par code.

Une police bitmap 5×7 conçue pour le temps

Au cœur du système se trouve une police bitmap 5×7, spécialement définie pour les chiffres de 0 à 9 et le symbole « : ».
Chaque caractère est décrit comme un motif de 35 bits, représentant des pixels allumés ou éteints. Cette approche minimaliste rappelle les écrans LED des années 80, tout en offrant une grande liberté de stylisation.

Cette police n’est pas importée : elle est codée à la main, ligne par ligne, pixel par pixel. Une manière de maîtriser totalement le rendu visuel.

Une palette de couleurs vibrante

Pour donner du rythme à l’affichage, chaque position de l’heure adopte une couleur différente.
La palette utilisée mélange :

• rose vif
• orange brûlant
• jaune lumineux
• violet profond
• bleu électrique
• vert turquoise
• rose framboise

Ces couleurs alternent à chaque caractère, créant une horloge dynamique, presque musicale dans sa composition visuelle.

Une toile pensée pour HH:MM:SS

L’horloge affiche huit caractères : deux chiffres pour les heures, deux pour les minutes, deux pour les secondes, séparés par deux « : ».
La toile est dimensionnée pour accueillir ces huit blocs pixelisés, avec des marges harmonieuses et un fond sombre (#161B26) qui met en valeur les couleurs éclatantes.

Un rafraîchissement en temps réel

Le programme fonctionne en boucle continue :

• Il récupère l’heure courante.
• Il formate les valeurs pour garantir l’affichage sur deux chiffres.
• Il efface la toile.
• Il redessine chaque caractère pixel par pixel.
• Il affiche la bannière.
• Il attend un court instant avant de recommencer.

Ce cycle rapide donne l’impression d’une horloge animée, fluide, qui vit au rythme des secondes.

Un dessin pixel par pixel

Pour chaque caractère :

• le programme lit son motif bitmap,
• parcourt les 7 lignes et 5 colonnes,
• dessine un petit rectangle coloré pour chaque pixel actif,
• avance le curseur pour placer le caractère suivant.

Cette construction minutieuse donne un rendu propre, net, parfaitement lisible, tout en conservant le charme du pixel‑art.

Une horloge rétro‑moderne, expressive et entièrement générée par code Ce projet combine :

• une police bitmap artisanale,
• une palette contemporaine,
• un rafraîchissement en temps réel,
• un rendu pixelisé élégant.

Le résultat est une horloge unique, à la fois technique et artistique, qui transforme le temps en une expérience visuelle.

Programme :

@ Police bitmap 5x7 (chiffres 0 à 9 et deux - points)
police est un tableau
// Index 0 à 9 : chiffres '0' à '9', Index 10 : ':' (35 caractères chacun)
police ajoute '01110100111010110101101011100101110' // 0 (index 0)
police ajoute '00100011000010000100001000010001110' // 1 (index 1)
police ajoute '01110100010000100110010001000011111' // 2 (index 2)
police ajoute '11111000100010000010000011000101110' // 3 (index 3)
police ajoute '00010001100101010010111110001000010' // 4 (index 4)
police ajoute '11111100001111000001000011000101110' // 5 (index 5)
police ajoute '00110010001000011110100011000101110' // 6 (index 6)
police ajoute '11111000010001000100010000100001000' // 7 (index 7)
police ajoute '01110100011000101110100011000101110' // 8 (index 8)
police ajoute '01110100011000101111000010001001100' // 9 (index 9)
police ajoute '00000001100011000000001100011000000' // : (index 10)

@ Réglages et Palette
taille_case, marge_x, marge_y, espacement est un nombre
taille_case vaut 12
marge_x vaut 20
marge_y vaut 25
espacement vaut 1

couleurs est un tableau
couleurs vaut [#FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF, #06D6A0, #EF476F]

@ toile dimensionnée pour le format HH:MM:SS (8 caractères)
nb, larg, haut est un nombre
nb vaut 8
larg vaut marge_x * 2 + nb * (5 + espacement) * taille_case
haut vaut marge_y * 2 + 7 * taille_case
larg vaut limiter(larg, 1, 1000)

Banniere est une toile
dimension(Banniere, larg, haut)

@ processus de rafraîchissement temps réel
processus Horloge()
  tant que vrai
    // Récupération de l'heure courante via maintenant()
    maint est une heure
    maint vaut maintenant()

    h_num, m_num, s_num est un nombre
    h_num vaut heure_de(maint)
    m_num vaut minute_de(maint)
    s_num vaut seconde_de(maint)

    // Formate en 2 chiffres (01, 02, etc.)
    str_h, str_m, str_s est un texte
    si h_num < 10 alors
      str_h vaut "0" + convertir_texte(h_num)
    sinon
      str_h vaut convertir_texte(h_num)
    fin si

    si m_num < 10 alors
      str_m vaut "0" + convertir_texte(m_num)
    sinon
      str_m vaut convertir_texte(m_num)
    fin si

    si s_num < 10 alors
      str_s vaut "0" + convertir_texte(s_num)
    sinon
      str_s vaut convertir_texte(s_num)
    fin si

    texte_heure est un texte
    texte_heure vaut str_h + ":" + str_m + ":" + str_s

    // Effacement et redessin
    effacer(Banniere)
    remplir(Banniere, #161B26)

    curseur_x est un nombre
    curseur_x vaut marge_x

    pour n de 1 à nb
      lettre est un texte
      lettre vaut copier(texte_heure, n, 1)

      // Indexation directe sans alphabet
      idx est un nombre
      si lettre = ":" alors
        idx vaut 10
      sinon
        idx vaut convertir_nombre(lettre)
      fin si

      g est un texte
      g vaut police[idx]

      ic, pos, px, py est un nombre
      bit, coul est un texte

      ic vaut (n - 1) mod longueur(couleurs)
      coul vaut couleurs[ic]

      pour li de 0 à 6
        pour co de 0 à 4
          pos vaut li * 5 + co + 1
          bit vaut copier(g, pos, 1)
          si bit = '1' alors
            px vaut curseur_x + co * taille_case
            py vaut marge_y + li * taille_case
            rectangle(Banniere, px, py, taille_case - 2, taille_case - 2, coul)
          fin si
        fin pour
      fin pour

      curseur_x ajoute (5 + espacement) * taille_case
    fin pour

    affiche Banniere
    pause 250
  fin tant que
fin processus

@ Démarrage de l'horloge
Horloge()

Ce projet propose une idée aussi simple qu’élégante : demander à l’utilisateur un mot, puis le transformer en une bannière graphique composée de lettres pixelisées.

Chaque caractère est dessiné à partir d’une police bitmap artisanale, et mis en couleur grâce à une palette vive et moderne. Le résultat est une image au style rétro, rappelant les premiers écrans numériques.

Une police bitmap faite à la main

Le cœur du programme repose sur une police 5×7 entièrement codée manuellement.
Chaque lettre, chaque chiffre et même l’espace sont décrits sous forme de motifs composés de 0 et de 1. Ces motifs représentent des pixels : les 1 sont dessinés, les 0 restent vides. Cette approche donne un rendu minimaliste, très proche du pixel‑art classique.

Une palette de couleurs vibrante

Pour éviter la monotonie, le programme utilise une série de couleurs éclatantes. Chaque lettre reçoit une couleur différente, créant un rythme visuel dynamique. Les teintes choisies — rose vif, orange brûlant, jaune lumineux, violet profond, bleu électrique, vert turquoise, rose framboise — apportent une énergie moderne à l’esthétique rétro du pixel‑art.

Une bannière construite lettre par lettre

Une fois le mot saisi par l’utilisateur, le programme parcourt chaque caractère :

• il identifie son motif dans la police bitmap,
• il choisit une couleur dans la palette,
• il dessine les pixels un par un sous forme de petits rectangles,
• puis il avance pour placer la lettre suivante.

Cette construction progressive donne l’impression que la bannière se tisse sous les yeux, comme un textile numérique.

Un fond sombre pour un contraste parfait

La bannière est posée sur un fond bleu‑noir profond. Ce choix renforce le contraste avec les couleurs vives des lettres et met en valeur le style pixelisé. Le résultat est une image nette, lisible et visuellement percutante.

Un projet simple, créatif et rétro‑moderne

Ce programme est un bel exemple de création graphique générée par code.
Il combine :

• une police bitmap artisanale,
• une palette contemporaine,
• une logique de dessin pixel par pixel,
• et une mise en forme élégante.

Le tout permet de transformer n’importe quel mot en une bannière unique, colorée et pleine de caractère.

Programme :

@ Demander le mot
saisie, mot est un texte
demande 'Quel mot veux-tu afficher ?' dans saisie
mot vaut majuscules(normaliser(saisie))

@ Alphabet et Police bitmap 5x7
alpha est un texte
alpha vaut 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 '

police est un tableau
// A à Z, 0 à 9, espace (chaque entrée = 35 caractères)
police ajoute '01110100011000111111100011000110001' // A
police ajoute '11110100011000111110100011000111110' // B
police ajoute '01111100001000010000100001000001111' // C
police ajoute '11110100011000110001100011000111110' // D
police ajoute '11111100001000011110100001000011111' // E
police ajoute '11111100001000011110100001000010000' // F
police ajoute '01111100001000010111100011000101111' // G
police ajoute '10001100011000111111100011000110001' // H
police ajoute '11111001000010000100001000010011111' // I
police ajoute '00111000100001000010100101001001100' // J
police ajoute '10001100101010011000101001001010001' // K
police ajoute '10000100001000010000100001000011111' // L
police ajoute '10001110111010110101100011000110001' // M
police ajoute '10001110011010110011100011000110001' // N
police ajoute '01110100011000110001100011000101110' // O
police ajoute '11110100011000111110100001000010000' // P
police ajoute '01110100011000110001101011001001101' // Q
police ajoute '11110100011000111110101001001010001' // R
police ajoute '01111100001000001110000010000111110' // S
police ajoute '11111001000010000100001000010000100' // T
police ajoute '10001100011000110001100011000101110' // U
police ajoute '10001100011000110001100010101000100' // V
police ajoute '10001100011000110101101011101110001' // W
police ajoute '10001100010101000100010101000110001' // X
police ajoute '10001100010101000100001000010000100' // Y
police ajoute '11111000010001000100010001000011111' // Z
police ajoute '01110100111010110101101011100101110' // 0
police ajoute '00100011000010000100001000010001110' // 1
police ajoute '01110100010000100110010001000011111' // 2
police ajoute '11111000100010000010000011000101110' // 3
police ajoute '00010001100101010010111110001000010' // 4
police ajoute '11111100001111000001000011000101110' // 5
police ajoute '00110010001000011110100011000101110' // 6
police ajoute '11111000010001000100010000100001000' // 7
police ajoute '01110100011000101110100011000101110' // 8
police ajoute '01110100011000101111000010001001100' // 9
police ajoute '00000000000000000000000000000000000' // espace

@ Réglages et Palette
taille_case, marge_x, marge_y, espacement est un nombre
taille_case vaut 12
marge_x vaut 20
marge_y vaut 25
espacement vaut 1

couleurs est un tableau
// Couleurs en hexadécimal sans guillemets
couleurs vaut [#FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF, #06D6A0, #EF476F]

@ Toile dimensionnée selon la longueur du mot
nb, larg, haut est un nombre
nb vaut longueur(mot)
larg vaut marge_x * 2 + nb * (5 + espacement) * taille_case
haut vaut marge_y * 2 + 7 * taille_case

// Borne la largeur de la toile entre 1 et 1000 pixels maximum
larg vaut limiter(larg, 1, 1000)

Banniere est une toile
dimension(Banniere, larg, haut)
remplir(Banniere, #161B26)

@ Dessin lettre par lettre
curseur_x est un nombre
curseur_x vaut marge_x

pour n de 1 à nb
  lettre est un texte
  lettre vaut copier(mot, n, 1)
  
  // position() renvoie 1 pour 'A', donc on retire 1 pour avoir l'index du tableau (0)
  idx est un nombre
  idx vaut position(lettre, alpha) - 1
  
  // Si la lettre est inconnue (idx < 0), on utilise l'espace (dernier élément : index 36)
  si idx < 0 alors
    idx vaut 36
  fin si
  
  g est un texte
  g vaut police[idx]
  
  ic, pos, px, py est un nombre
  bit est un texte
  coul est un texte
  
  ic vaut (n - 1) mod longueur(couleurs)
  coul vaut couleurs[ic]
  
  pour li de 0 à 6
    pour co de 0 à 4
      pos vaut li * 5 + co + 1
      bit vaut copier(g, pos, 1)
      si bit = '1' alors
        px vaut curseur_x + co * taille_case
        py vaut marge_y + li * taille_case
        rectangle(Banniere, px, py, taille_case - 2, taille_case - 2, coul)
      fin si
    fin pour
  fin pour
  
  // Utilisation de ajoute pour incrémenter le curseur
  curseur_x ajoute (5 + espacement) * taille_case
fin pour

affiche Banniere

La version 3.4 de l’interpréteur marque une avancée significative, tant sur le plan des fonctionnalités que de l’expérience utilisateur.

Cette mise à jour introduit de nouveaux mots-clés, enrichit les capacités graphiques et améliore l’interface pour offrir un environnement de développement plus fluide, plus puissant et plus moderne.

Prise en charge des couleurs hexadécimales avec transparence

L’interpréteur supporte désormais les couleurs hexadécimales au format #AARRGGBB, soit 8 chiffres, permettant de définir non seulement la couleur mais aussi son niveau de transparence (Alpha).

Exemple : #80FF0000 correspond à un rouge semi-transparent.

Cette amélioration ouvre la voie à des interfaces plus raffinées, des effets visuels avancés et une meilleure gestion des superpositions.

Nouveaux mots-clés

La version 3.4 introduit quatre mots-clés essentiels qui enrichissent la logique d’exécution et permettent de structurer des programmes plus dynamiques.

processus
Définit un bloc de code qui s’exécute en parallèle du programme principal.
Idéal pour gérer des tâches simultanées, des animations ou des opérations de fond.

pause
Suspend l’exécution pendant un nombre de millisecondes.

pause 1000 équivaut à une seconde d’attente.
Parfait pour temporiser des actions ou synchroniser des événements.

suspendre
Met un processus en pause.
Permet de contrôler finement l’exécution parallèle, notamment pour stopper temporairement une tâche.

reprendre
Relance un processus précédemment suspendu.
Complète le duo suspendre/reprendre pour une gestion précise des processus.

Nouvelle fonction intégrée

paramètre
Cette fonction permet d’enregistrer et de relire des paramètres persistants.
Elle est particulièrement utile pour :

• mémoriser des préférences utilisateur,
• conserver des états entre deux exécutions,
• gérer des configurations internes.

Interface améliorée

La version 3.4 ne se contente pas d’ajouter des fonctionnalités : elle améliore aussi l’expérience visuelle et ergonomique.

Palette de couleurs optimisée
La palette a été revue pour offrir une sélection plus intuitive, plus cohérente et plus agréable à utiliser.

Suppression du mini-menu d’Edge

Le mini-menu qui apparaissait lors d’un double-clic sur la toile a été retiré.
Résultat : une interaction plus fluide, sans éléments parasites.

Conclusion

La mise à jour 3.4 apporte des améliorations majeures, tant sur le plan technique que visuel. Avec la gestion avancée des couleurs, les nouveaux mots-clés orientés vers l’exécution parallèle, la fonction paramètre et une interface plus propre, cette version renforce la puissance et la modernité de l’interpréteur.

Créer un jeu comme Count War ne consiste pas seulement à faire avancer des personnages sur une route. C’est un mélange subtil de stratégie, rythme, anticipation, et mise en scène.

Voici comment on conçoit un Count War de A à Z, en se concentrant sur les idées, les mécaniques et la logique de conception.

Définir l’expérience de jeu

Un Count War repose sur une idée simple :
le joueur dirige une foule qui doit survivre à une série d’épreuves pour atteindre un boss final.

L’expérience doit être :

• rapide
• lisible
• addictive
• basée sur des choix instantanés

Le joueur ne contrôle pas tout : il influence la trajectoire, mais la foule avance seule.
C’est ce mélange entre automatisme et décision immédiate qui crée la tension.

Concevoir la progression du niveau

Un Count War est structuré comme un parcours d’obstacles.
Pour le construire, on imagine une succession d’éléments :

Les portails
Ils modifient la taille de la foule.
Ce sont les moments stratégiques : le joueur doit choisir le bon côté.

Les obstacles
Ils punissent les mauvais choix ou les erreurs de trajectoire.

Les ennemis
Ils déclenchent des combats automatiques qui réduisent la foule.

Le boss final
Il représente l’objectif ultime : survivre jusqu’à lui avec assez de soldats.

La clé est de rythmer le niveau :
un portail ? un obstacle ? un ennemi ? un portail ? un obstacle…
Le joueur doit sentir une montée en tension.

Ajouter de la variété grâce au hasard

Pour éviter que chaque partie soit identique, on introduit :

• des valeurs différentes sur les portails
• des positions aléatoires des obstacles
• des ennemis plus ou moins résistants
• des mini-boss occasionnels

Le hasard doit être contrôlé :
il surprend le joueur, mais ne doit jamais rendre la partie injuste.

Imaginer les mécaniques de combat

Dans un Count War, le combat est automatique.
Le joueur ne frappe pas : il observe la confrontation.

Combat contre un ennemi simple
La foule perd un certain nombre d’unités par seconde.
L’ennemi aussi.
Le combat s’arrête quand l’un des deux tombe à zéro.

Combat contre un boss
Même principe, mais avec :

• une barre de vie visible
• un rythme de combat plus lent
• une mise en scène plus forte

Le joueur doit sentir que c’est le moment décisif.

Penser les interactions avec les portails

Les portails sont le cœur du gameplay.
Ils doivent être :

• lisibles
• rapides à comprendre
• visuellement distincts

Chaque portail représente une opération :

• ajouter
• retirer
• multiplier
• diviser

Le joueur doit pouvoir anticiper l’effet en un coup d’œil.
C’est là que se joue la stratégie : choisir le bon côté pour maximiser la survie.

Créer une illusion de profondeur

Même sans code, on peut décrire le principe :

• les objets proches sont grands
• les objets éloignés sont petits
• leur position verticale dépend de leur distance
• leur largeur diminue avec la profondeur

Cette perspective donne l’impression que la foule avance dans un tunnel ou une route en 3D.

Le décor doit être simple mais dynamique :

• lignes de route
• ombres
• silhouettes
• éléments répétitifs pour donner du mouvement

Définir les contrôles du joueur

Un Count War doit rester accessible :

• un mouvement à gauche
• un mouvement à droite
• éventuellement une touche pour abandonner

Le joueur doit pouvoir réagir vite, sans réfléchir.
La simplicité des contrôles renforce la tension :
tout se joue en une fraction de seconde.

Construire une interface claire

L’interface doit afficher :

• le nombre de soldats
• la progression dans le niveau
• le niveau actuel
• le record du joueur
• les barres de vie en combat

Elle doit être lisible même en plein mouvement.

Soigner la fin de partie

Un Count War doit offrir une conclusion nette :

Victoire
Le boss est vaincu ? célébration, couleurs chaudes, message clair.

Défaite
La foule tombe à zéro ? ton sombre, message fataliste.

Abandon
Le joueur quitte volontairement ? message neutre.

On peut aussi ajouter :

• un record
• un classement
• une récompense visuelle

Conclusion : développer un Count War, c’est créer un parcours stratégique rythmé

Pour concevoir un Count War, il faut penser :

• comme un designer (rythme du niveau)
• comme un stratège (portails et choix rapides)
• comme un metteur en scène (boss, combats, perspective)

Ce type de jeu fonctionne parce qu’il combine :

• simplicité des contrôles
• profondeur des choix
• satisfaction visuelle
• progression rapide

CoddyRun accepte maintenant la notation hexadécimale à 8 chiffres : #RRGGBBAA.

Les deux derniers caractères représentent le canal alpha, exactement comme en CSS :

• 00 : totalement transparent
• FF : totalement opaque

La couleur peut provenir d’un littéral, d’une variable ou d’un calcul, sans aucune modification de syntaxe.

Pourquoi c’est utile

L’alpha permet de hiérarchiser visuellement un rendu sans multiplier les teintes.
C’est aussi un excellent moyen de manipuler concrètement la base 16 :
quatre informations encodées dans une seule chaîne, deux chiffres par canal.

Cette notation est déjà utilisée en CSS et dans la majorité des outils graphiques.
L’intégrer dans CoddyRun rend l'apprentissage plus cohérent et plus proche des standards professionnels.

Compatibilité

Cette évolution est entièrement additive :

• Les scripts en #RRGGBB fonctionnent exactement comme avant.
• #0 rétablit toujours la valeur par défaut.
• Les codes ASCII courts (#65) restent inchangés.
• Les longueurs invalides sont toujours rejetées, avec un message d’erreur unifié.

Aucun script existant n’a besoin d’être modifié.