Déplacement aléatoire de plusieurs images

Signaler
Messages postés
104
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
5 octobre 2009
-
Messages postés
311
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
26 juin 2015
-
Bonjour,
Je cherche un script qui me permette d'avoir un déplacement aléatoire de plusieurs images et chaque fois que les images changent de direction , qu'elles se retournent.
Merci

8 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,
tu n'as pas déjà posée ce genre de question ?
ici et ça renvoyait déjà à une question précédante...
je ne pense pas que tu trouves un tel truc "tout fait"
il va falloir que tu fasses/recherches point par point
1° déplacement éléatoire
2° retournement
...
et que tu regroupes.
<hr />                Cordialement            Bul        
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 octobre 2020
104
Messages postés
104
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
5 octobre 2009

Bonjour,
Bultez j'ai réussi mon histoire de flip 1 image sur 2.

En fait là, je cherche à ce que mes images de poissons se déplacent de façon aléatoire et indépendante.
Le fait qu'elles se retourne c'est pour éviter une image de poisson qui recule.

Kazma, j'ai vu celui là, mais cela ne me convient.

Merci
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, j'ai vu celui là, mais cela ne me
convient</td>
</td></tr></tbody></table>peu de
chance d'en trouver un tout fait...ou alors coup de chance lors d'une
recherche...
Le principe reste relativement simple à mettre en oeuvre et est
en gros le suivant...

Création des OBJETs avec un minimum de propriétés

  IncX // vitesse de déplacement horizontale

  IncY // vitesse de déplacement verticale

  Image // L'image représentative du sens

Lancement de la fonction de déplacement, un setInterval ou setTimeout avec un délai cohérent...
POUR
chaque OBJET FAIRE
  //-- Incrementation
position
  Pos.left + = IncX;
  Pos.top += IncY;
   //-- Test si bords atteint
   SI
Bord_Gauche atteint ALORS
    IncX = -IncX; //
investion sens
    Pos.left = 0; //
replace en bord
    Image = "image_vers_la_droite.gif" // changement image
   SI Bord_Droit
atteint ALORS
    IncX = -IncX; // investion
sens
    Pos.left = Pos_Droite -Largeur; // replace en bord
    Image =
"image_vers_la_gauche.gif"; // changement image

   SI Bord_Haut atteint ALORS
    IncY = -IncY;
// investion sens
    Pos.top = 0; // replace en bord
   SI Bord_Bas atteint
ALORS
    IncY = -IncY; // investion sens

    Pos.top = Pos_Basse -Hauteur; //
replace en bord

voila pour le principe de base...sauf erreur
ou omission
pour le détail inspire toi de ce que tu as déjà vu...
;O)
Messages postés
104
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
5 octobre 2009

Salut Petole Team.

Merci pour cette aide.

En php je saurais le faire mais en js....


Honnêtement je comprend le script, mais pas les "Inc C", peut-être propre au js.


Franchement j'essaie d'apprendre le js, mais c'est plus dur que le php.
Messages postés
104
Date d'inscription
jeudi 27 septembre 2007
Statut
Membre
Dernière intervention
5 octobre 2009

Un peu d'aide s'il vous plait
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Franchement j'essaie d'apprendre le js, mais
c'est plus dur que le
php</td>
</td></tr></tbody></table>Perso je pense
l'inverse...

<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Un peu d'aide s'il vous
plait</td>
</td></tr></tbody></table>Je ne vois
nul part une amorce de début de code...

Néanmoins je te livre un code
fait à l'arrache...
<html>
<head>
<style type="text/css">
body
{
  font-family : verdana;
}
#D_MAIN {
  position : absolute;

  left : 100px;
  top : 100px;
  width : 530px;
  height :
330px;
  text-align: left;
  border : 1px solid #8080f0;

  background-color : #c0c0f0;
}
.sprite {
  position : absolute;

  left : -1000px;
  width : 30px;
  height : 30px;
  border :
1px solid blue;
  z-index : 10;
  font-weight : bold;
  color :
blue;
}
</style>
<script type="text/javascript">
var
Tab_Sprite = new Array();
var Borne = new Object( {left : 100, right : 600,
bottom : 400, top : 100});
//-------------------

function Sprite( id_){
  this.IncX = 1
+Math.round(Math.random()*5);
  this.IncY = 1 +Math.round(Math.random()*5);

  this.PosX = Borne.left;
  this.PosY = Borne.top;
  this.Obj =
document.getElementById( id_);
  this.Obj.innerHTML =">";
}
//--------------------
function Init_Sprite(){

  var i = 0;
  do {
    var Obj = document.getElementById( 'D_' +
i);
    if( Obj){
      Tab_Sprite[i] = new Sprite( 'D_' + i);
    }

    i++;
  }while (Obj);
  
  iTimer = setTimeout(
"Move_Sprite()", 100);
}
//--------------------

function Move_Sprite(){
  for( var i=0; i<
Tab_Sprite.length; i++){
    with( Tab_Sprite[i]){
      PosX += IncX;

      PosY += IncY;
      if( PosX > Borne.right){
        PosX =
Borne.right;
        IncX *= -1;
        Obj.innerHTML ="<";

      }
      if( PosX < Borne.left){
        PosX = Borne.left;

        IncX *= -1;
        Obj.innerHTML =">";
      }

      if( PosY > Borne.bottom){
        PosY = Borne.bottom;

        IncY *= -1;
      }
      if( PosY < Borne.top){

        PosY = Borne.top;
        IncY *= -1;
      }

      Obj.style.left = PosX +"px";
      Obj.style.top = PosY +"px";

    }
  }
  iTimer = setTimeout( "Move_Sprite()", 100);
}

window.onload = Init_Sprite;
</script>
</head>














</html>
C'est le reflet de ce que j'ai
écris plus haut, pas beaucoup de commentaires, même aucun à la relecture, mais tu devrais tout
comprendre...
;O)
Messages postés
311
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
26 juin 2015

Yo !
Sympa cette chose en code...
Vu mon niveau proche de zéro moins en code, je ne vois pas comment les sprites peuvent devenir des images.

Si quelqu'un a la patience... Merci.

MvR