Défilement d'une image de la gauche vers la droite et inversement auto [Résolu]

Signaler
Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020
-
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
-
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

Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613
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);
    }

Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020
3
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);
}


})

Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613
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.
Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020
3
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)
    }

Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613
Faudrait peut-être virer
alien = {
        posX: 400
    }

Que j'avais placé là dans mon exemple n'ayant pas ton objet lors de mes tests....
Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020
3 >
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020

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
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613 >
Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020

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);
    }
  

  });
    
Messages postés
55
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
6 juillet 2020
3
wow merci beaucoup c'est exactement ce que je voulais !!!
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613
pense à mettre le sujet en résolu.
Bonne journée.
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020
2 613 >
Messages postés
28946
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juillet 2020

Ps : tu peux retirer les console.log .. c'était pour débuguer.