Sujet Précédent Sujet Suivant

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

Résolu/Fermé
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 - Modifié le 1 mai 2020 à 00:12
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 1 mai 2020 à 18:01
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

Réponse 1 / 4
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
1 mai 2020 à 00:22
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
Réponse 2 / 4
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 6
1 mai 2020 à 11:49
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
1 mai 2020 à 13:04
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
Réponse 3 / 4
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 6
1 mai 2020 à 14:04
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
1 mai 2020 à 14:45
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
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 6 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
1 mai 2020 à 16:50
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022
1 mai 2020 à 17:58 
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
Réponse 4 / 4
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 6
1 mai 2020 à 17:59
wow merci beaucoup c'est exactement ce que je voulais !!!
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
1 mai 2020 à 18:00
pense à mettre le sujet en résolu.
Bonne journée.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
1 mai 2020 à 18:01
Ps : tu peux retirer les console.log .. c'était pour débuguer.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses