DevMerge : Un jeu éducatif pour développeurs

DevMerge est un jeu éducatif conçu pour aider les développeurs à explorer et comprendre différents concepts technologiques en fusionnant des technologies pour progresser dans un arbre technologique.

Caractéristiques Clés

1. Fusion des Concepts : Les joueurs glissent et déposent des éléments pour fusionner des technologies (ex. HTML + CSS = Styling, Frontend + Backend = Fullstack).
2. Arbre Technologique : Chaque fusion débloque des concepts plus avancés, progressant vers une pile technologique complète.
3. Focus Développeur : Un environnement visuel moderne et amusant basé sur des technologies bien connues.
4. Éducation Interactive : Apprentissage des relations entre technologies grâce à des interactions engageantes.
5. Interface Accessible : Une interface claire et intuitive pour les joueurs novices et expérimentés.

Détails Techniques

• Technologie : Développé avec HTML, CSS, et JavaScript.
• Type de Jeu : Jeu éducatif interactif.
• Plateforme : Application web, jouable dans un navigateur.

Points Clés du Code

1. Données des Technologies

Un tableau définit les technologies disponibles et leur type (frontend, backend, cloud, etc.).

const words = [
    { text: "HTML", type: "frontend" },
    { text: "CSS", type: "frontend" },
    { text: "JavaScript", type: "frontend" },
    { text: "Python", type: "backend" },
    { text: "SQL", type: "database" },
    { text: "Node.js", type: "backend" },
    { text: "React", type: "frontend" },
    // ...
];

2. Mécanisme de Fusion

Une logique de fusion associe deux technologies pour en débloquer une nouvelle.

const merges = {
    "HTML+CSS": "Styling",
    "Styling+JavaScript": "Frontend",
    "Python+SQL": "Database",
    "Frontend+Backend": "Fullstack",
    "Fullstack+Cloud": "Cloud App",
};

3. Glisser-Déposer (Drag and Drop)

Le joueur glisse des éléments entre la zone de sélection et la zone de fusion.

function dragStart(e) {
    draggedElement = e.target;
}

function drop(e) {
    e.preventDefault();
    const target = e.target;

    if (target.closest(".merge-container")) {
        const clone = draggedElement.cloneNode(true);
        mergeArea.appendChild(clone);
        checkForMerge();
    }
}

4. Indicateur de Fusion

Un indicateur visuel apparaît lorsqu'une fusion valide est possible.

function showMergeIndicator(e) {
    const items = [...mergeArea.querySelectorAll(".word")];
    if (items.length > 0 && draggedElement) {
        const key = `${items[0].textContent}+${draggedElement.textContent}`;
        if (merges[key]) {
            // Affiche l'indicateur
        }
    }
}

5. Résultat de la Fusion

Les éléments fusionnés sont remplacés par un nouvel élément représentant le résultat.

function performMerge(item1, item2, result) {
    item1.remove();
    item2.remove();
    const newWord = createWordElement(result);
    mergeArea.appendChild(newWord);
}