Défilement d'une image de la gauche vers la droite et inversement auto

Résolu
BabaProg Messages postés 73 Statut Membre -  
jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour j'ai une image sur mon site et je voudrais la faire se déplacer de la gauche(elle s'arrête à une coordonnée par exemple posX = 900) puis elle repart vers la droite(elle s'arrête à une coordonnée par exemple posX = 400) et je voudrais que cela ce fasse automatiquement
Je vous présente mon code en espèrent que vous pourrez m'aider : 
/*alien viens de ma classe Alien si vous voulez le code entier dites le moi*/

    
 alien.posX = 400
let min = alien.posX,
        max = 900
    //true = vers la droite
    //false = vers la gauche
    let bool = Boolean(true)

    let i = 1

    while (i <= 4) {
        if (bool == true) {
            //bool = true
            if (alien.posX >= max) {
                console.log(bool)
                alien.posX += 5
                bool == false
                i++
            } else {
                alien.posX -= 5
                if (alien.posX <= min) {
                    bool == true
                    i++
                }
            }
        }
    }

le alien.posX c'est la position sur l'axe X de mon image

4 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
     
    Bonjour 

     var alien = { posX:400};
    var max = 600;
    var min = 400;
    var nb = 4; // nombre d'aller-retours
    
    droite(alien);
    
    function droite(obj){
      console.log("DROITE",nb);
      nb--;
      if(nb == 0 ){
        return false;
      }
      while (obj.posX <=max){
          obj.posX +=5;
          console.log(obj.posX);
      }
      gauche(obj);
    }
    
    function gauche(obj){
      console.log("GAUCHE",nb);
      nb--;
      if(nb == 0 ){
        return false;
      }
      while (obj.posX >=min){
          obj.posX -=5;
          console.log(obj.posX);
      }
      droite(obj);
    }

    0
  2. BabaProg Messages postés 73 Statut Membre 6
     
    Bonjour il y a un petit problème mon image ne bouge pas (il n'y a pas d'erreur dans la console)
    la console : 

    DROITE 4
    script.js:111 405
    script.js:111 410
    script.js:111 415
    script.js:111 420
    script.js:111 425
    script.js:111 430
    script.js:111 435
    script.js:111 440
    script.js:111 445
    script.js:111 450
    script.js:111 455
    script.js:111 460
    script.js:111 465
    script.js:111 470
    script.js:111 475
    script.js:111 480
    script.js:111 485
    script.js:111 490
    script.js:111 495
    script.js:111 500
    script.js:111 505
    script.js:111 510
    script.js:111 515
    script.js:111 520
    script.js:111 525
    script.js:111 530
    script.js:111 535
    script.js:111 540
    script.js:111 545
    script.js:111 550
    script.js:111 555
    script.js:111 560
    script.js:111 565
    script.js:111 570
    script.js:111 575
    script.js:111 580
    script.js:111 585
    script.js:111 590
    script.js:111 595
    script.js:111 600
    script.js:111 605
    script.js:117 GAUCHE 3
    script.js:124 600
    script.js:124 595
    script.js:124 590
    script.js:124 585
    script.js:124 580
    script.js:124 575
    script.js:124 570
    script.js:124 565
    script.js:124 560
    script.js:124 555
    script.js:124 550
    script.js:124 545
    script.js:124 540
    script.js:124 535
    script.js:124 530
    script.js:124 525
    script.js:124 520
    script.js:124 515
    script.js:124 510
    script.js:124 505
    script.js:124 500
    script.js:124 495
    script.js:124 490
    script.js:124 485
    script.js:124 480
    script.js:124 475
    script.js:124 470
    script.js:124 465
    script.js:124 460
    script.js:124 455
    script.js:124 450
    script.js:124 445
    script.js:124 440
    script.js:124 435
    script.js:124 430
    script.js:124 425
    script.js:124 420
    script.js:124 415
    script.js:124 410
    script.js:124 405
    script.js:124 400
    script.js:124 395
    script.js:104 DROITE 2
    script.js:111 400
    script.js:111 405
    script.js:111 410
    script.js:111 415
    script.js:111 420
    script.js:111 425
    script.js:111 430
    script.js:111 435
    script.js:111 440
    script.js:111 445
    script.js:111 450
    script.js:111 455
    script.js:111 460
    script.js:111 465
    script.js:111 470
    script.js:111 475
    script.js:111 480
    script.js:111 485
    script.js:111 490
    script.js:111 495
    script.js:111 500
    script.js:111 505
    script.js:111 510
    script.js:111 515
    script.js:111 520
    script.js:111 525
    script.js:111 530
    script.js:111 535
    script.js:111 540
    script.js:111 545
    script.js:111 550
    script.js:111 555
    script.js:111 560
    script.js:111 565
    script.js:111 570
    script.js:111 575
    script.js:111 580
    script.js:111 585
    script.js:111 590
    script.js:111 595
    script.js:111 600
    script.js:111 605
    script.js:117 GAUCHE 1


    Voici le code complet : 

    let canvas = document.getElementById('canvas')
    let scene = canvas.getContext('2d')

    let planche = new Image()
    planche.src = 'alien.png'

    let backgroundImage = new Image()
    backgroundImage.src = 'background.jpg'

    function dessinerPalteforme(x, y, dx, dy) {
        scene.beginPath()
        //scene.drawImage(img,x,y)
        scene.fillRect(x, y, dx, dy)
        scene.closePath()
    }

    //dessinerPalteforme(100, 200, 90, 30)
    //dessinerPalteforme(350, 300, 90, 30)
    //dessinerPalteforme(650, 200, 90, 30)
    //dessinerPalteforme(850, 100, 90, 30)
    //dessinerPalteforme(950, 350, 90, 30)

    class Alien {
        constructor(scene, backgroundImage, planche, nbLignePlanche, nbColPlanche, qui) {
            this.scene = scene
            this.nbLignePlanche = nbLignePlanche
            this.nbColPlanche = nbColPlanche
            this.height = planche.height / nbLignePlanche
            this.width = planche.width / nbColPlanche
            this.posX = null
            this.posY = null
            this.coef = 1.2
            this.qui = qui
            this.vitesse = 5
            this.frame = []
            this.scene.canvas.setAttribute('background-position-x', '0px')
            this.widthScene = backgroundImage.width
        }

        dessiner() {
            scene.clearRect(0, 0, scene.canvas.width, scene.canvas.height)
            scene.drawImage(planche, this.width * this.frame[0], this.height * this.frame[1], this.width, this.height, this.posX, this.posY, this.width * this.coef, this.height * this.coef)
        }
    }

    planche.addEventListener('load', function () {

        let alien = new Alien(scene, backgroundImage, planche, 1, 1, [[0, 0], 35, 22])
        alien.posX = 400
        alien.posY = 382
        alien.frame = [0, 0]
        alien.dessiner()
        
        alien = {
            posX: 400
        };
        var max = 600;
        var min = 400;
        var nb = 4; // nombre d'aller-retours

        droite(alien);

        function droite(obj) {
            console.log("DROITE", nb);
            nb--;
            if (nb == 0) {
                return false;
            }
            while (obj.posX <= max) {
                obj.posX += 5;
                console.log(obj.posX);
            }
            gauche(obj);
        }

        function gauche(obj) {
            console.log("GAUCHE", nb);
            nb--;
            if (nb == 0) {
                return false;
            }
            while (obj.posX >= min) {
                obj.posX -= 5;
                console.log(obj.posX);
            }
            droite(obj);
        }

    })

    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
       
      Pour commencer, merci d'utiliser correctement les balises de code.
      Il faut y indiquer le LANGAGE afin d'avoir la coloration syntaxique et l'indentation
      Explications disponibles ici :
      https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

      Ensuite... le code que je t'ai donné est un exemple.... qu'il te faut adapter à tes besoins.

      Typiquement.. on ne savait pas, jusqu'à maintenant, que ton "alien" était dans un canvas....
      Il faut donc, à chaque modification de ton posX le redessiner....

      Je te laisse essayer et revenir vers nous avec ton code modifié si tu rencontres encode des soucis.
      0
  3. BabaProg Messages postés 73 Statut Membre 6
     
    J'ai appellé ma fonction qui permet de dessiner mon "alien" à chaque fois que je modifie ça position en X mais dans la console il y une erreur comme quoi obj.dessiner() n'est pas une fonction. 

        alien = {
        posX: 400
    }

    let max = 600
    let min = 400
    let nb = 4 // nombre d'aller-retours


    droite(alien)

    function droite(obj) {
        console.log("DROITE", nb)
        nb--
        if (nb == 0) {
            return false
        }
        while (obj.posX <= max) {
            obj.dessiner()
            obj.posX += 5
            console.log(obj.posX)
        }
        gauche(obj)
    }

    function gauche(obj) {
        console.log("GAUCHE", nb)
        nb--
        if (nb == 0) {
            return false
        }
        while (obj.posX >= min) {
            obj.dessiner()
            obj.posX -= 5
            console.log(obj.posX)
        }
        droite(obj)
    }
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
       
      Faudrait peut-être virer 
      alien = {
        posX: 400
    }

      Que j'avais placé là dans mon exemple n'ayant pas ton objet lors de mes tests....
      0
      1. BabaProg Messages postés 73 Statut Membre 6 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        Voici ce que ça me fait quand j'enlève le morceau de code que tu m'as demandé d'enlevé

        avant de l'enlever :


        après avoir enlevé le morceau de code :


        et le personnage ce met directement en position X = 600
        0
      2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833 > BabaProg Messages postés 73 Statut Membre
          
        let canvas = document.getElementById('canvas')
    let scene = canvas.getContext('2d');


   let planche = new Image()
    planche.src = 'alien.png'

    let backgroundImage = new Image()
    backgroundImage.src = 'background.jpg'

    function dessinerPalteforme(x, y, dx, dy) {
      scene.beginPath();
      //scene.drawImage(img,x,y)
      scene.fillRect(x, y, dx, dy);
      scene.closePath();
    }

    //dessinerPalteforme(100, 200, 90, 30)
    //dessinerPalteforme(350, 300, 90, 30)
    //dessinerPalteforme(650, 200, 90, 30)
    //dessinerPalteforme(850, 100, 90, 30)
    //dessinerPalteforme(950, 350, 90, 30)

    class Alien {
      constructor(scene, backgroundImage, planche, nbLignePlanche, nbColPlanche, qui) {
      this.scene = scene;
      this.nbLignePlanche = nbLignePlanche;
      this.nbColPlanche = nbColPlanche;
      this.height = planche.height / nbLignePlanche;
      this.width = planche.width / nbColPlanche;
      this.posX = null;
      this.posY = null;
      this.coef = 1.2;
      this.qui = qui;
      this.vitesse = 5;
      this.frame = [];
      this.scene.canvas.setAttribute('background-position-x', '0px');
      this.widthScene = backgroundImage.width;
    }

    dessiner() {
        scene.clearRect(0, 0, scene.canvas.width, scene.canvas.height);
        scene.drawImage(planche, this.width * this.frame[0], this.height * this.frame[1], this.width, this.height, this.posX, this.posY, this.width * this.coef, this.height * this.coef);
    }
  }

  planche.addEventListener('load', function () {

    let alien = new Alien(scene, backgroundImage, planche, 1, 1, [[0, 0], 35, 22]);
    alien.posX = 400;
    alien.posY = 382;
    alien.frame = [0, 0];
    alien.dessiner();

    var timer = 100;
    var max = 500;
    var min = 400;
    var nb = 4; // nombre d'aller-retours

    droite();

    function droite() {
      console.log("DROITE", nb);
      nb--;
      if (nb == 0) {
          return false;
      }
      mooveD();
            
            
    }

    function gauche() {
        console.log("GAUCHE", nb);
        nb--;
        if (nb == 0) {
            return false;
        }
        mooveG();
        
    }
    
    function mooveG(){
    alien.posX -= 5;
      console.log('mooveG',alien.posX);
      alien.dessiner();
      setTimeout(function(){
        if(alien.posX >= min){
          mooveG();
        }else{
          droite();
        }
      },timer);
    }
    
    function mooveD(){        
      alien.posX += 5;
      console.log('mooveD',alien.posX);
      alien.dessiner();
      setTimeout(function(){
        if(alien.posX <= max){
            mooveD();
        }else{
          gauche();
        }
      },timer);
    }
  

  });
        0
  4. BabaProg Messages postés 73 Statut Membre 6
     
    wow merci beaucoup c'est exactement ce que je voulais !!!
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
       
      pense à mettre le sujet en résolu.
      Bonne journée.
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        Ps : tu peux retirer les console.log .. c'était pour débuguer.
        0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
Résolution d'une image 500 pixels largeur
sassou -
Amande_heart11 -

3 réponses
PIX
plart -
jordane45 -

1 réponse
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses