Jackpot- changement d image-settimeout???

12 août 2018 à 5:17:25

Bonjour les ami(e)s de Openclassroom :-)

Je suis entrain de faire le début d'un jeu de slot machine pour le fun en JavaScript pure.

Pour le moment, J'arrive a affiché les 3 roulettes et faire changer les images grâce a 2 boucle FOR imbriqué.

Première boucle pour avoir accès au 3 roulettes et deuxièmes boucle pour avoir accès au données dans mes tableaux.

Ce que je veux faire et que j'arrives pas a fairec'est ==> je veux qu'a chaque changement d'images, une après l'autres, il y aille un délai par exemple de 1 secondes. Je veux que l<on voie les changement visuelle des changement d images, une certaine fluidité.

J'ai fait mes recherches et je sais que la fonction: setTimeout existe mais je n'arrives pas a appliqué cela au bon endroit dans mon code. Si je le mets dans mon for cela appelle la fonction a chaque fois et cela fonctionne pas

Es ce que vous pouvez m'aider de trouver la meilleur méthode pour résoudre ce petit problème de débutant pour que je puisses apprendre de cela.

Vous pouvez aussi me donne des changement dans mon code pour la solution mais s.v.p pas de Jquery pour le moment . merci :-)

Excellente journée a tous.

<!DOCTYPE html>
<html>
  <head>
       <meta charset ="utf-8" >
             <link href="css/bootstrap.css" rel="stylesheet">
	          <link href="style.css" rel="stylesheet">
               <script src="js/jquery-3.2.1.min.js"> </script>
      <script src="script.js"></script>


  </head>


  <body>


  <div >

      <img src="images/slot1.png" alt="roulette" id="roul0"  />


  </div>


  <div>

      <img  src="images/slot1.png" id="roul1"  />


  </div>

  <div>

      <img src="images/slot1.png" alt="roulette" id="roul2" />


  </div>


  <img src="images/start.jpg" alt="" onclick= "changer()"/>







  </body>


var Roulettes = [
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
                ];




var DELAI = 1000; // delai de 1 segonde
var NombreDeroulette= (Roulettes.length); // reponse 3
var NombreImageParRoulette =(Roulettes [1].length); // 30




function changer()

{


    for (var i=0; i<NombreDeroulette; i++)
    {



        var NombreAleatoireRoulette = Math.floor((Math.random() * 30) + 1);

        for (var j=0; j<NombreAleatoireRoulette;j++)

        {


            document.getElementById("roul"+i).src = "images/"+Roulettes[i][j];



        }


    }

}

DevMercenaire

12 août 2018 à 10:13:06

Avec une closure

    function changer() {
        for (var i = 0; i < NombreDeroulette; i++) {
            var NombreAleatoireRoulette = Math.floor((Math.random() * 30) + 1);

            for (var j = 0; j < NombreAleatoireRoulette; j++) {
                (function (i, j) {
                    setTimeout(function () {
                        document.getElementById("roul" + i).src = "images/" + Roulettes[i][j];
                    }, 350 * i);
                })(i, j)
            }
        }
    }

romain-valin

12 août 2018 à 11:10:25

J'aurais plutôt dit en faisant du récursif :

function changer() {
    for (var roulette = 0; roulette < NombreDeroulette; roulette++) {
        var NombreAleatoireRoulette = Math.floor((Math.random() * 30) + 1);
        changerImg(roulette, 0, NombreAleatoireRoulette);
    }
}

function changerImg(roulette, index, indexMax) {
    setTimeout(function () {
        document.getElementById("roul" + roulette).src = "images/" + Roulettes[roulette][index];

        if (index < indexMax) {
            changerImg(roulette, ++index, indexMax);
        }
    }, DELAI);
}

Au passage il pourrait être intéressant de rajouter ce code quelque part dans ton code et d'executer la fonction au chargement de la page.

Il permet de charger les images avant de les afficher dans la page, comme ça la transition sera automatique.

En locale le passage d'une image à une autre peut sembler immédiat mais sur un serveur ça ne serait pas le cas (sauf si l'image à déjà été chargée).

function chargerImagesRoulettes() {
    Roulettes.forEach(function(images) {
        images.forEach(function(src) {
            var img = new Image();  
            img.src = src;
        });
    });
}

Pour finir, je te déconseille de commencer le nom de tes variables par une majuscule.

En effet, les conventions dans la majorités des langages veulent qu'on commence toujours les noms de variables / classes par une minuscule. Les majuscules étant en général réservées au définition de classe ou au constante (les constantes étant généralement entièrement en majuscule).

Développeur PHP / Symfony en Freelance

leprogrammeur83

12 août 2018 à 15:46:52

Merci beaucoup DevMercenaire,

Je me rend compte que je dois voir la theorie et la pratque sur les closures.

Je vois que cela a pas l air facile a comprendre a premiere vue , mais avec du courage je vais y arrivé.

Par contre dans ton code, le delai de 350 c est le delai entre la reponse de chaque roulette. ( la varibale i)

Moi ce que je recherches c est d appliqué le delai surchaque changement d images. (la variable j)

Comment on fait ?

si cela est pas trop te demandé pourrais tu me dire pourquoi on fait : 350 * i ?

Cela signifie un delai sur de 350 sur la variable i?

si c est le cas, je penses que je devrais mettre j pour que cela s applique sur les changement d image?

Merci d avance a toi et aussi a romain valin pour les fonction recursives



var Roulettes = [
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
    ["slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png","slot1.png","slot2.png","slot3.png","slot4.png","slot5.png","slot6.png"],
                ];





var NombreDeroulette= (Roulettes.length); // reponse 3
var NombreImageParRoulette =(Roulettes [1].length); // 30





function changer() {
    for (var i = 0; i < NombreDeroulette; i++) {
        var NombreAleatoireRoulette = Math.floor((Math.random() * 30) + 1);

        for (var j = 0; j < NombreAleatoireRoulette; j++) {
            (function (i, j) {
                setTimeout(function () {
                    document.getElementById("roul" + i).src = "images/" + Roulettes[i][j];
                }, 350 * i);
            })(i, j)
        }
    }
}

-
Edité par leprogrammeur83 12 août 2018 à 16:08:43

DevMercenaire

12 août 2018 à 16:25:44

Effectivement 350 est le délai avant de lancer la fonction, tu peux la remplacer par ta variable.

Lors d'un tour de boucle, la fonction (function (i, j) { .. prendra la valeur de i et de j et ne sera plus dépendante de 'i' et de 'j'

Et lorsque la fonction setTimeout s’exécutera, elle contiendra toujours les valeurs qui lui ont été transmise et n'aura pas été modifie.

Pour faire simple, lors du premier tour de boucle, tu auras 350 * 0 et au second 350 * 1 et pour finir 350 * 2

Pourquoi 350 * i ? Comme tu peux le voir au dessus, c'est pour augmenter le délai entre les différente exécution.

Si tu remplaces i par j, vu que j est une valeur aléatoire, tu auras un comportement comme au casino, les images vont défiler et elles s’arrêteront une par une.