Infoforall

Javascript 07 : LES FONCTIONS - LES BASES

Nous allons voir un aspect fondamental de la programmation : la possibilité d'insérer des mini-programmes dans les programmes de façon à créer de nouvelles actions. Vous avez déjà utilisé de nombreuses fois les fonctions. Lesquelles ? alert est une fonction, prompt est une fonction, parseInt, parseFloat ... Mais nous allons voir aujourd'hui comment créer vos propres fonctions si l'action que vous voulez effectuer n'est pas gérée par l'une des innombrables fonctions ou méthodes de Javascript. Nous verrons également la différence entre une fonction 'pure' et une 'méthode'.

Commençons par vous montrer ce qu'on peut faire de très basique avec les fonctions et une image SVG (voir les activités HTML/CSS si vous voulez en savoir plus).

Utiliser Go ! pour démarrer l'animation et cliquer plusieurs fois pour l'accélerer.

Pour construire cette animation, nous avons dû utiliser les fonctions. En réalité, vous avez déjà beaucoup utilisé les fonctions : à chaque fois que vous avez donné un nom derrière onclick=", vous avez en réalité donné le nom d'une fonction que vous avez défini dans votre script js. Voyons cela de plus près maintenant.

1 - Premieres fonctions créées : les procédures

Une fonction est un ensemble d'instructions qui seront effectuées lorsqu'on va appeler la fonction. Rien avant. Un petit exemple pour la forme (sans animation pour l'instant) :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Les fonctions avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>;

        <header>

            <h1>Les fonctions dans Javascipt</h1>

        </header>

        <section>


            <svg class="anim" width="500" height="100">

                <circle id="cercle" cx="50" cy="50" r="20" stroke="orange" stroke-width="6" fill="yellow" />

            </svg>


            <div class="boiteanim">

                <p class="largfixe">

                    <input type="button" onclick="go_droite()" value="Droite !">

                </p>

            </div>


        </section>

        <script src="js_fonctions.js"></script>

    </body>

</html>

Le fichier CSS style_1.css est le suivant :

.anim {

    display : block;

    border : solid black 1px;

    margin : auto;

}


.boiteanim {

    margin : auto;

    width : 500px;

}


.largfixe {

    text-align : center;

}

Et pour le script js js_fonctions.js (attention, la fonction droite ne sera pas expliquée en détail ici) :

function go_droite(){

    droite();

}


function droite() {

    var vitesse = 5;

    var dessin = document.getElementById("cercle");

    coord_x = parseInt(dessin.getAttribute('cx'));

    if (coord_x < 500) {

        dessin.setAttribute('cx',(coord_x+vitesse));

    }

}

CLIQUEZ POUR VOIR L'ANIMATION :

vitesse :

dessin :

coord_x :

01° Tester le code. Comme vous pouvez le constater, la fonction go_droite ne sert qu'à lancer l'appel à droite.

02° Comment se nomme la variable js qui contient la référence du cercle SVG ? Comment se nomme la variable qui contient la coordonnée x du centre du cercle ? Pourquoi avoir utiliser un parseInt ?

...CORRECTION...

La variable dessin contient l'adresse interne de l'objet circle défini dans le dessin SVG. On l'obtient avec la méthode getElementById et avec l'Id html du circle, à savoir "cercle".


La variable coord_x contient la coordonnée x du centre. On l'obtient en appliquant la méthode getAttribute sur la référence-balise dessin en cherchant l'attribut cx fourni sous forme de string.


La réponse est obtenue sous forme de string. On utilise parseInt pour transformer ceci en nombre entier.

03° Quel est le nom de la méthode qui permet ici de modifier la coordonnée x du centre du cercle ? Avec quelle structure parvient-on à empêcher le cercle de sortir du cadre de 500 pixels de large ?

...CORRECTION...

On utilise l'inverse de getAttribute, à savoir setAttribute.

Cette méthode s'applique sur la référence-balise dessin et on fournit, sous forme de string, le nom de l'attribut html à modifier, à savoir cx.

Par contre, on vérifie avec un IF que x soit bien inférieur à 500 avant d'appliquer la méthode.

Même si vous ne comprenez pas le code de la fonction droite vous savez maintenant comment déplacer le cercle vers la droite : il s'agit d'utiliser cette fonction. C'est tout l'intêret des fonctions : quelqu'un l'a créée, ensuite il suffit de taper son nom. Ainsi, ici on active via le bouton une fonction go_droite qui lance droite.

La déclaration des fonctions commence toujours par la ligne go_droite() { où tous les éléments sont importants :

  1. function go_droite() { : On commence par le mot-clé function qui indique qu'on va donner le nom d'une fonction.
  2. function go_droite() { : On place un espace entre function et le nom.
  3. function go_droite() { : On donne le nom de la fonction, go_droite ici, suivi de parenthèses ().
  4. function go_droite() { : On finit la déclaration du nom par l'accolade { pour signaler que la suite va être composée des actions à effectuer (c'est le même principe qu'avec le if, le while, le for...)
  5. On tabule pour indiquer aux codeurs que l'instruction est incluse dans la fonction.
  6. La fin des instructions est indiquée par une accolade de fermeture }.
  7. function go_droite() {

        ...

        ...

        ...

    } // A partir d'ici, l'interpréteur comprend qu'il ne s'agit plus de go_droite()

Point important : lorsque vous voulez utiliser la fonction, il ne faut pas juste donner son nom : il faut rajouter les parenthèses après son nom. Il faut donc utiliser go_droite().

On peut donc utiliser de telles fonctions-procédures pour effectuer des tâches répétitives (et exactement identiques) qu'on devrait taper sinon à plusieurs endroits dans le code. On notera que si on devait les faire à la suite directe les unes des autres, les boucles FOR ou WHILE conviennent également.

Un autre intêret est de créer une fonction code qui sera ensuite réutilisable sur une autre page simplement en déclarant le scipt js dans la balise adéquate.

Vous devriez obtenir ceci :

04° Rajouter un bouton qui permettra d'aller à gauche dans votre HTML. Créer ensuite la fonction go_gauche qui appelle la fonction gauche (inspirez vous des fonctions pour la droite).

Et si on veut faire des choses un peu différentes ? On peut aussi ?

Oui, on peut transmettre des données aux fonctions de façon à ce qu'elles utilisent des contenus venant de l'extérieur. Lors de la déclaration de la fonction, il suffit de placer entre les parenthèses les paramètres attendus.

Nous allons maintenant réaliser une animation capable d'aller à droite ou à gauche (comme précédemment) mais en utilisant la même fonction deplacerDessin de déplacement. Vous avez du remarquer que les fonctions gauche et droite sont très similaires.

Pour cela, voici le code HTML des deux boutons (attention, j'ai rajouté un indice 3 derrière les fonctions pour limiter l'interaction avec codes précédents) :

            <div class="boiteanim">

                <p class="largfixe">

                    <input type="button" onclick="go_gauche3()" value="Gauche !">

                    <input type="button" onclick="go_droite3()" value="Droite !">

                </p>

            </div>

Et voici le code javascript (qu'il faudra compléter !): les deux fonctions attribuées aux boutons vont appel à la même fonction pour déplacer le cercle. MAIS, lors de l'appel, on peut envoyer des informations qui seront utilisées par la fonction pour savoir ce qu'elle doit faire.

Ces informations qu'on envoie se nomment des arguments.

Par contre, dans le code de la fonction, les variables recevant les arguments envoyés se nommment les paramètres.

function go_gauche3() {

    deplacerDessin3("???","???");

}


function go_droite3() {

    deplacerDessin3("???","???");

}


function deplacerDessin3(sDessin, sens) {

    // Le paramètre sDessin doit contenir un string contenant l'Id HTML de l'objet SVG à déplacer.

    // D'où le s mnémotechnique au début

    // Le paramètre sens doit contenir "G" pour gauche ou "D" pour droite

    var vitesse = 15; // contient le nbr de pixels de déplacement

    var minimum = 0; // valeur minimale de la position

    var maximum = 500; // valeur maximale de la position<

    var dp_H = 0; // Passera à +1 si vers droite, -1 si vers gauche

    var dessin = document.getElementById(sDessin); // on crée un objet contenant l'élément HTML d'id sDessin

    var coord_x = parseInt(dessin.getAttribute('cx')); // on récupère sa position en x


    if (sens == "D" || sens == "G") {

        if (sens == "D" && coord_x < maximum) {

            dp_H = 1; // on règle dp_H pour aller à droite

        } else if (sens == "G" && coord_x > minimum) {

            dp_H = -1; // on règle dp_H pour aller à gauche

        }

    }

    if (dp_H != 0) {

        dessin.setAttribute('cx',(coord_x + vitesse*dp_H));

    }

}

05° En regardant le code deplacerDessin3("???","???") lors de l'appel de la fonction, quel est le type des deux arguments à envoyer ?

...CORRECTION...

Les deux arguments transmis à la fonction sont visiblement des strings.

06° En regardant maintenant le code de la fonction function deplacerDessin3, donner le nom des variables paramètres qui vont récupérer ce qu'on envoie à la fonction.

...CORRECTION...

Le premier argument est nommé sDessin.

Le deuxième argument est nommé sens.

07° En regardant les commentaires placés dans la fonction deplacerDessin3, donner les valeurs à fournir lors de l'appel de la fonction pour faire déplacer le cercle vers la gauche ou pour faire déplacer le cercle vers la droite.

...CORRECTION...

L'analyse des commentaires montre qu'il faut utiliser deplacerDessin3("cercle","G") pour aller à gauche.

08° Modifier le code pour que les boutons gauche et droite soient fonctionnels.

...CORRECTION...

function go_gauche3() {

    deplacerDessin3("cercle","G");

}


function go_droite3() {

    deplacerDessin3("cercle","D");

}

De façon générale, les paramètres ne sont pas nécessairement des strings. Vous pouvez créer des fonctions utilisant n'importe quel type de variables : integer, string ... Même des objets.

Pour l'instant, la vitesse de déplacement est fixée dans la fonction elle-même.

09° Modifier le code de deplacerDessin3 de façon à ce qu'elle recoive un troisième paramètre : un integer qui contiendra la vitesse de déplacement voulue. Modifiez ensuite les deux appels à la fonction de façon à ce que le bouton droite crée un mouvement plus rapide que le bouton gauche par exemple.

Paramètres et arguments

Pour ceux qui aiment bien les termes précis, sachez que paramètre est le nom donné à ce qu'on place entre parenthèses lors de la définition de la fonction. Ce sont des "conteneurs" qui ne contiennent rien avant qu'on utilise concrétement la fonction lors d'un appel. On nomme les données fournies lors de l'appel les arguments :

function go_droite3() {

    // Ci-dessous "cercle" et "G" sont les arguments (envoyés vers la fonction)

    deplacerDessin3("cercle","G");

}


// Ci-dessous, sDessin et sens sont les paramètres de la fonction, les variables dans lesquels on stockera ce qu'elle recoit initialement

function deplacerDessin3(sDessin, sens) {

    . . .

}

Il ne s'agit que de vocabulaire, mais il permet de comprendre les documentations techniques. Ca donne parameter et argument en anglais.

Pour illustrer l'intêret des fonctions, nous allons utiliser une nouvelle page HTML dans laquelle nous allons dessiner sur un Canvas de 400 pixels sur 400 pixels.

Il faut mettre votre navigateur à jour. Le canvas n'est pas utilisable.

10° Modifier votre page html en remplaçant le contenu de votre balise section par ceci :

        <section>

            <div class="boiteanim">

                <canvas id="zone_dessin" width="400" height="400">

                Il faut mettre votre navigateur à jour. Le canvas n'est pas utilisable.

                </canvas>

                <p class="largfixe">

                    <input type="button" onclick="dessin_1()" value="Dessin 1">

                    <input type="button" onclick="dessin_2()" value="Dessin 2">

                </p>

            </div>

        </section>

11° Rajouter les lignes suivantes dans votre fichier css puis javascript. La fonction dessineTrait n'est pas à comprendre réellement. Il suffit de lire sa description en commentaires de façon à voir comment s'en servir.

#zone_dessin {

    background-color : black;

}

function dessineTrait(x,y,x2,y2,taille,couleur) {

    // Cette fonction permet de dessiner un dessin dans le canvas "zone_dessin"

    // x et y sont des integers qui correspondent aux pixels de début du tracé

    // x2 et y2 sont des integers qui correspondent aux pixels de fin du tracé

    // taille est un integer qui correspond à la taille du trait en pixels

    // couleur est un string qui contient le code couleur HTML du trait. Exemple "#FF0000" pour un trait rouge

    var ctx = document.getElementById("zone_dessin").getContext('2d');

    ctx.beginPath();

    ctx.moveTo(x,y);

    ctx.lineTo(x2,y2);

    ctx.lineWidth = taille;

    ctx.strokeStyle = couleur;

    ctx.stroke();

    ctx.closePath();

}


function effaceTout() {

    // Cette fonction permet d'effacer tout ce qui a été tracé sur le canvas

    var ctx = document.getElementById("zone_dessin").getContext('2d');

    ctx.clearRect(0,0,400,400);

}


function dessin_1() {

    effaceTout();

    dessineTrait(0,0,200,100,4,"#FF0000");

    dessineTrait(200,100,50,50,4,"#0000FF");

}


function dessin_2() {

    effaceTout();

    dessineTrait(0,0,100,200,4,"#FFFF00");

    dessineTrait(200,100,50,50,4,"#00FFFF");

}

12° Tester les boutons puis modifier les fonctions dessin_1 et dessin_2 en réalisant le dessin de votre choix, par exemple :

dessin3

dessin4

Ces dessins nécessitent bien entendu l'utilisation de boucles.

Pas mal avec quelques lignes de codes, non ? Comme c'est votre premier vrai contact avec la création de fonction, voilà un corrigé possible :

Les codes permettant d'obtenir les deux images précédentes sont :

...CORRECTION...

function dessin_3() {

    effaceTout();

    for (var coord = 0;coord<400;coord=coord+20) {

        dessineTrait(0,0,coord,400,4,"#00FF00");

        dessineTrait(0,400,400-coord,0,4,"#88FF88");

    }

}


function dessin_4() {

    effaceTout();

    var x = 0;

    var y = 0;

    for (var etape = 0;etape<20;etape=etape+1) {

        dessineTrait(x,y,x+20,y,6,"#00FF00");

        dessineTrait(x+20,y,x+20,y+20,6,"#88FF88");

        x = x+20;

        y = y+20;

    }

}

Comme vous le voyez, on peut utiliser une fonction dans une autre fonction.

D'ailleurs, l'une des forces des fonctions, c'est qu'on peut les utiliser sans savoir exactement comment elles fonctionnent : lorsqu'on les utilise, on doit simplement connaitre les arguments à transmettre et avoir une idée du but de la fonction. Vous n'avez aucunement besoin de connaitre les rouages internes d'une fonction ou d'une méthode pour l'utiliser. Elle peut contenir un code simple ou compliqué sans que vous ayez à vous en soucier. Sauf si c'est vous que l'avez conçue bien entendu.

Fonctions, procédures et méthodes

Voilà la limite des "fonctions basiques" : on ne peut pas utiliser leurs codes pour faire autre chose. Comment faire pour récupérer un résultat et le renvoyer vers le programme principal ? Et bien, il faut rajouter une ligne de code qui va renvoyer quelque chose vers le programme d'appel.

procédure

Comme la fonction ne renvoie pas ni information ni valeur vers le programme principal, on pourrait la nommmer PROCEDURE.

fonction

Si on parvient à faire communiquer la fonction, on la nommera effectivement FONCTION.

Dans certains langages, fonctions et procédures ne se déclarent pas de la même manière. Ce n'est pas le cas de Python. C'est donc la dernière fois que nous noterons ici le mot procédure.

Et les méthodes ? Il s'agit tout simplement du nom qu'on donne à une fonction appartenant à une classe d'objets et pouvant donc agir sur un objet. La plupart du temps, elles sont utilisées sous la forme objet.methode(argument). Vous vous souvenez ?

Nous avons donc vu les fonctions sans retour : les procédures.

Il nous reste à voir les fonctions renvoyant une information vers le programme qui en ont fait l'appel.

2 - Fonctions avec retour d'information

Pour renvoyer une valeur y dans la partie de code qui a fait appel à la fonction, il suffit d'utiliser le code suivant return (y) si y=a*x+b. Mais on pourrait faire plus court encore avec return(a*x+b).

Dans cette partie, nous nous limiterons aux interactions utilisant alert pour afficher et prompt pour faire des demandes.

13° Utiliser les codes suivants. La fonction permettra de calculer le résultat d'une fonction affine f(x) = a.x+b.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Les fonctions avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>;

        <header>

            <h1>Les fonctions dans Javascipt</h1>

        </header>

        <section>


            <p>Rien de particulier à afficher : <input type="button" onclick="go()" value="Go !"></p>


        </section>

        <script src="js_fonctions.js"></script>

    </body>

</html>

function affine(x) {

    var a = 5;

    var b = 100;

    return (a*x+b);

    alert("Alors, ça s'affiche ou pas ?");

}


function go() {

    var y = affine(3);

    alert(y);

}

Description des actions lorsqu'on appuie sur le go ! :

Comme vous le voyez, on stocke le résultat de la fonction (qu'elle renvoie avec le return) dans une variable y pour garder le résultat en mémoire.

ATTENTION : lorsque la fonction rencontre return, elle calcule le résultat et sort ensuite du codage de la fonction : c'est comme un break : le reste du code ne sera pas analysé. Ainsi alert("Alors, ça s'affiche ou pas ?") après le return ne sera jamais exécuté.

14° Et ce code, que va-t-il afficher ? Réflechir puis lancer le code pour vérifier si votre raisonnement est le bon.

function go() {

    var y = affine(3.5);

    y = affine(y);

    alert(y);

}

On constate également qu'on peut donner une variable comme argument : vous n'êtes pas obligé de donner une valeur en "dur" ce qui est très pratique.

3 - Mini-projet : des fonctions pour Simon

Nous allons maintenant travailler sur une interface graphique type Simon : 4 cubes qui changent de couleur lorsqu'on clique dessus.

Attention : nous n'utiliserons pas ici les automatismes existants pour gérer les différents cubes. La solution proposée ici n'est clairement pas la plus propre sur un projet de ce type. La solution proposée ici est simplement la plus adaptée à votre niveau actuel.

Vous allez d'abord devoir créer les trois fichiers HTML, CSS et JS du prototype avant de rajouter du code :

Voici le code HTML :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Mini-projet</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="miniprojet.css" />

    </head>


    <body>


        <header>

            <h1>Mini-projet Simon</h1>

        </header>


        <section>


            <div id="conteneur">

                <div id="bleu" onclick="gestionCubeBleu()"></div>

                <div id="orange" onclick="gestionCubeOrange()"></div>

                <div id="vert" onclick="gestionCubeVert()"></div>

                <div id="rouge" onclick="gestionCubeRouge()"></div>

            </div>


        </section>


        <script src="miniprojet.js"></script>

    </body>

</html>

Voici le CSS nommé miniprojet.css".

#conteneur{

    margin: 0px;

    padding: 0px;

    border: 1px solid #660000;

    width: 450px;

    height: 450px;

    position: relative;

}


#conteneur div {

    display: inline-block;

    margin: 0px;

    padding: 0px;

    width: 150px;

    height: 150px;

    border: 1px solid #777777;

}

#bleu{

    background-color: blue;

    position: absolute;

    top: 50px;

    left: 50px;

}

#rouge{

    background-color: red;

    position: absolute;

    top: 50px;

    right: 50px;

}

#vert{

    background-color: green;

    position: absolute;

    bottom: 50px;

    left: 50px;

}

#orange{

    background-color: orange;

    position: absolute;

    bottom: 50px;

    right: 50px;

}

14° Créer les deux fichiers et vérifier que l'affichage est correct.

Il nous reste maintenant à créer la gestion des clics sur les cubes.

La solution utilise la fonction native setTimeout qui permet de lancer l'appel d'une fonction avec un certain décalage dans le temps : setTimeout(go,500) va lancer la fonction go après une attente de 500 ms (soit 0,5 s).

Voici le début du script js nommé miniprojet.js :

function gestionCubeBleu() {

    gestionCube("bleu");

}


function gestionCubeOrange() {

    gestionCube("bleu");

}


function gestionCubeRouge() {

    gestionCube("bleu");

}


function gestionCubeVert() {

    gestionCube("bleu");

}


function gestionCube(sCubeId) {

    // Le parametre sCubeId doit être un string contenant l'id du cube

    // Dans setTimeout, le 150 correspond à 150 ms soit 0,15 s

    // avant de lancer la fonction configurationBasique

    var refCube = document.getElementById(sCubeId);

    if (refCube.getAttribute('id') == "bleu") {

        refCube.style.backgroundColor = 'lightblue';

        setTimeout(configurationBasique, 300);

    }

}


function configurationBasique() {

    // Cette fonction remplace les cubes dans la couleur initiale

    var refCube = document.getElementById("bleu");

    refCube.style.backgroundColor = 'blue';

    refCube = document.getElementById("rouge");

    refCube.style.backgroundColor = 'red';

    refCube = document.getElementById("vert");

    refCube.style.backgroundColor = 'green';

    refCube = document.getElementById("orange");

    refCube.style.backgroundColor = 'orange';

}

15° Rajouter le script et tester.

16° Modifier et compléter le script de façon à faire réagir correctement les 4 carrés. Pour les couleurs claires, vous pouvez utiliser les valeurs numériques avec # ou utiliser lightgreen, yellow et tomato.

...CORRECTION...

function gestionCubeBleu() {

    gestionCube("bleu");

}


function gestionCubeOrange() {

    gestionCube("orange");

}


function gestionCubeRouge() {

    gestionCube("rouge");

}


function gestionCubeVert() {

    gestionCube("vert");

}


function gestionCube(sCubeId) {

    // Le parametre sCubeId doit être un string contenant l'id du cube

    // Dans setTimeout, le 150 correspond à 150 ms soit 0,15 s

    // avant de lancer la fonction configurationBasique

    var refCube = document.getElementById(sCubeId);

    if (refCube.getAttribute('id') == "bleu") {

        refCube.style.backgroundColor = 'lightblue';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "rouge") {

        refCube.style.backgroundColor = 'tomato';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "vert") {

        refCube.style.backgroundColor = 'lightgreen';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "orange") {

        refCube.style.backgroundColor = 'yellow';

        setTimeout(configurationBasique, 300);

    }

}


function configurationBasique() {

    // Cette fonction remplace les cubes dans la couleur initiale

    var refCube = document.getElementById("bleu");

    refCube.style.backgroundColor = 'blue';

    refCube = document.getElementById("rouge");

    refCube.style.backgroundColor = 'red';

    refCube = document.getElementById("vert");

    refCube.style.backgroundColor = 'green';

    refCube = document.getElementById("orange");

    refCube.style.backgroundColor = 'orange';

}

17° Comme vous pouvez le constater la gestion des couleurs n'est pas très pratique avec les noms HTML. Voici donc un code qui utilise la version numérique. A vous de modifier les couleurs avec nom en codes hexadécimaux pour rendre le tout plus joli

function gestionCubeBleu() {

    gestionCube("bleu");

}


function gestionCubeOrange() {

    gestionCube("orange");

}


function gestionCubeRouge() {

    gestionCube("rouge");

}


function gestionCubeVert() {

    gestionCube("vert");

}


function gestionCube(sCubeId) {

    // Le parametre sCubeId doit être un string contenant l'id du cube

    // Dans setTimeout, le 150 correspond à 150 ms soit 0,15 s

    // avant de lancer la fonction configurationBasique

    var refCube = document.getElementById(sCubeId);

    if (refCube.getAttribute('id') == "bleu") {

        refCube.style.backgroundColor = 'lightblue';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "rouge") {

        refCube.style.backgroundColor = 'tomato';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "vert") {

        refCube.style.backgroundColor = 'lightgreen';

        setTimeout(configurationBasique, 300);

    } else if (refCube.getAttribute('id') == "orange") {

        refCube.style.backgroundColor = 'yellow';

        setTimeout(configurationBasique, 300);

    }

}


function configurationBasique() {

    // Cette fonction remplace les cubes dans la couleur initiale

    var refCube = document.getElementById("bleu");

    refCube.style.backgroundColor = '#0000FF';

    refCube = document.getElementById("rouge");

    refCube.style.backgroundColor = '#FF0000';

    refCube = document.getElementById("vert");

    refCube.style.backgroundColor = '#008000';

    refCube = document.getElementById("orange");

    refCube.style.backgroundColor = '#FFA500';

}

Voici le résultat attendu après modification du code :

Et voilà : nous avons l'ébauche d'un Simon. Il manque encore beaucoup de choses : la mémorisation des coups joués, le stockage des séries à trouver, les sons... Nous verrons tout cela au fur et à mesure.