begin process at 2012 05 28 10:35:44
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS

IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS


 Description

Toutes les images doivent avoir la même dimension [wIma,hIma],
et initialement, elles ne doivent ni se superposer, ni dépasser la zone jaune
   <div id='cnt' ...> </div>
dont la dimension est ajustable avec  width:???px  et  height:???px .

La vitesse dépend des variables 'pas' et 'tim'.

En adaptant la fonction Clk(i), il est possible d'attribuer
au click sur une images une action individualisée.

La fonction Ini() est un peu délicate:
elle écrit le code HTML des images dans la zone jaune.

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  • <head>
  • <title>Images dansantes: mouvement aléatoire sans superpositions</title>
  • <script type="text/javascript">
  • //<![CDATA[
  • var iZon=0,nZon=0,tim=5; // timer en milisecondes
  • var pas=8,pas2=2*pas+1; // pas maximal du déplacement à chaque Nxt()
  • var wIma=120,hIma=160; // dimensions des photos en pixels
  • var xInf,yInf,xSup,ySup; // valeurs limites
  • var zon=[ // initialement, aucune image ne doit dépasser les bords
  • new Zon(000,000,"Photo-A"), // x,y relatifs au conteneur
  • new Zon(225,000,"Photo-B"), // les images ne doivent pas se superposer
  • new Zon(450,000,"Photo-C"),
  • new Zon(225,300,"Photo-D"),
  • new Zon(000,600,"Photo-E"),
  • new Zon(225,600,"Photo-F"),
  • new Zon(450,600,"Photo-G")
  • ];
  • function Zon(x,y,nom) { // Définition de l'objet et comptage
  • this.x=x; this.y=y; this.nom=nom; nZon++;
  • }
  • function Clk(i) { // Action du click le i-eme image
  • alert(i+": "+zon[i].nom+" --> Remplacez Clk(i) par votre propre 'action'");
  • }
  • function Ini() { // initialise
  • var s="",c=document.getElementById('cnt');
  • xInf=c.offsetLeft; xSup=xInf+c.offsetWidth-wIma;
  • yInf=c.offsetTop; ySup=yInf+c.offsetHeight-hIma;
  • for (var i=0;i<nZon;i++) { // Inscrit les zones dans le conteneur
  • var z=zon[i];
  • s+="<img id='i"+i+"' src='Img/"+z.nom+".jpg' title='"+z.nom
  • +"' onclick='Clk("+i+")' style='position:absolute; left:"
  • +(z.x+=xInf)+"px; top:"+(z.y+=yInf)+"px'/>";
  • }
  • c.innerHTML=s;
  • }
  • function Nxt() {
  • var im=document.getElementById('i'+iZon),z=zon[iZon];
  • var x=z.x+Math.floor(Math.random()*pas2)-pas;
  • var y=z.y+Math.floor(Math.random()*pas2)-pas;
  • if ((x>=xInf)&&(y>=yInf)&&(x<=xSup)&&(y<=ySup)) {
  • var b=true,i=0;
  • do if (i!=iZon) {
  • var e=zon[i];
  • if ((e.x<=x+wIma)&&(e.x+wIma>=x)&&(e.y<=y+hIma)&&(e.y+hIma>=y)) b=false;
  • } while (b&&(++i<nZon));
  • if (b) {im.style.left=(z.x=x)+'px'; im.style.top=(z.y=y)+'px';}
  • }
  • iZon=(iZon+1)%nZon;
  • }
  • //]]>
  • </script>
  • </head>
  • <body onload="Ini(); setInterval('Nxt()',tim);">
  • <h2>Images dansantes: mouvement aléatoire sans superpositions.</h2>
  • <div id='cnt' style="margin-left:10px; width:600px; height:800px; background:yellow">
  • <!-- conteneur des images dansantes. Adaptez-en la dimension width et height -->
  • </div>
  • <!-- le reste du code de body n'est pas indispensable -->
  • <p style='font-size:12px;'>
  • Cliquez sur une image: vous êtes invités à écrire votre propre 'Clk(i)'.<br />
  • Toutes les images ont la même dimension [wIma,hIma].<br />
  • Initialement, les images ne doivent ni dépasser les bords du conteneur jaune,
  • ni se superposer.<br />
  • La vitesse dépend des variables 'pas' et 'tim',
  • mais aussi du navigateur et de votre ordinateur.<br />
  • </p>
  • <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
  • 'Internet Explorer 8 et 9', 'Firefox 4.0.1', 'Navigator 9.0.0.6',
  • 'Google Chrome 11.0.696.71', 'Opera 11.11', 'Safari 5'.<br />
  • (En execution locale, j'ai rencontré des difficultés de positionnement
  • avec Internet Explorer 8, sous Windows 7 - 64 bits)
  • </p>
  • <p style='font-size:12px; color:green;'>
  • Essayez d'autes algorithmes d'images dansantes: &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/1-Aleatoire-libre'>
  • 1-Aleatoire-libre
  • </a> &nbsp;
  • <a href=
  • 'http://www.william-voirol.ch/TP/Images dansantes/2-Aleatoire-sans superpositions'>
  • 2-Aleatoire-sans superpositions
  • </a> &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/3-Aleatoire-oriente'>
  • 3-Aleatoire-orienté</a> &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/4-Tortue'>
  • 4-Tortue</a><br />
  • Téléchargez le zip complet (avec sources et images): &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes.zip'>
  • Images dansantes.zip</a><br />
  • Les images de temples de l'Inde proviennent de mon site: &nbsp;
  • <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  • </p></body>
  • </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Images dansantes: mouvement aléatoire sans superpositions</title>
  <script type="text/javascript">
  //<![CDATA[
    var iZon=0,nZon=0,tim=5; // timer en milisecondes
    var pas=8,pas2=2*pas+1;  // pas maximal du déplacement à chaque Nxt()
    var wIma=120,hIma=160;    // dimensions des photos en pixels
    var xInf,yInf,xSup,ySup; // valeurs limites
    var zon=[ // initialement, aucune image ne doit dépasser les bords
      new Zon(000,000,"Photo-A"), // x,y relatifs au conteneur
      new Zon(225,000,"Photo-B"), // les images ne doivent pas se superposer
      new Zon(450,000,"Photo-C"),
      new Zon(225,300,"Photo-D"),
      new Zon(000,600,"Photo-E"),
      new Zon(225,600,"Photo-F"),
      new Zon(450,600,"Photo-G")
    ];
    function Zon(x,y,nom) { // Définition de l'objet et comptage
      this.x=x; this.y=y; this.nom=nom; nZon++;
    }
    function Clk(i) { // Action du click le i-eme image
      alert(i+": "+zon[i].nom+" --> Remplacez Clk(i) par votre propre 'action'");
    }
    function Ini() { // initialise
      var s="",c=document.getElementById('cnt');
      xInf=c.offsetLeft; xSup=xInf+c.offsetWidth-wIma;
      yInf=c.offsetTop; ySup=yInf+c.offsetHeight-hIma;
      for (var i=0;i<nZon;i++) { // Inscrit les zones dans le conteneur
        var z=zon[i];
        s+="<img id='i"+i+"' src='Img/"+z.nom+".jpg' title='"+z.nom
          +"' onclick='Clk("+i+")' style='position:absolute; left:"
          +(z.x+=xInf)+"px; top:"+(z.y+=yInf)+"px'/>";
      }
      c.innerHTML=s;
    }
    function Nxt() {
      var im=document.getElementById('i'+iZon),z=zon[iZon];
      var x=z.x+Math.floor(Math.random()*pas2)-pas;
      var y=z.y+Math.floor(Math.random()*pas2)-pas;
      if ((x>=xInf)&&(y>=yInf)&&(x<=xSup)&&(y<=ySup)) {
        var b=true,i=0;
        do if (i!=iZon) {
          var e=zon[i];
          if ((e.x<=x+wIma)&&(e.x+wIma>=x)&&(e.y<=y+hIma)&&(e.y+hIma>=y)) b=false;
        } while (b&&(++i<nZon));
        if (b) {im.style.left=(z.x=x)+'px'; im.style.top=(z.y=y)+'px';}
      }
      iZon=(iZon+1)%nZon;
    }
  //]]>
  </script> 
</head>

<body onload="Ini(); setInterval('Nxt()',tim);">
  <h2>Images dansantes: mouvement aléatoire sans superpositions.</h2>
  <div id='cnt' style="margin-left:10px; width:600px; height:800px; background:yellow">
    <!-- conteneur des images dansantes. Adaptez-en la dimension width et height -->
  </div>
  
  <!-- le reste du code de body n'est pas indispensable -->
  <p style='font-size:12px;'>
    Cliquez sur une image: vous êtes invités à écrire votre propre 'Clk(i)'.<br />
    Toutes les images ont la même dimension [wIma,hIma].<br />
    Initialement, les images ne doivent ni dépasser les bords du conteneur jaune,
      ni se superposer.<br />
    La vitesse dépend des variables 'pas' et 'tim',
      mais aussi du navigateur et de votre ordinateur.<br />
  </p>
  <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
    'Internet Explorer 8 et 9', 'Firefox 4.0.1', 'Navigator 9.0.0.6',
    'Google Chrome 11.0.696.71', 'Opera 11.11', 'Safari 5'.<br />
    (En execution locale, j'ai rencontré des difficultés de positionnement
      avec Internet Explorer 8, sous Windows 7 - 64 bits)
  </p>
  <p style='font-size:12px; color:green;'>
    Essayez d'autes algorithmes d'images dansantes: &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/1-Aleatoire-libre'>
      1-Aleatoire-libre
    </a> &nbsp;
    <a href=
      'http://www.william-voirol.ch/TP/Images dansantes/2-Aleatoire-sans superpositions'>
      2-Aleatoire-sans superpositions
    </a> &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/3-Aleatoire-oriente'>
      3-Aleatoire-orienté</a> &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/4-Tortue'>
      4-Tortue</a><br />
    Téléchargez le zip complet (avec sources et images): &nbsp;
      <a href='http://www.william-voirol.ch/TP/Images dansantes.zip'>
        Images dansantes.zip</a><br />
    Les images de temples de l'Inde proviennent de mon site: &nbsp;
      <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  </p></body>
</html>

 Conclusion

Le programme proposé est assez simple pour bien mettre en évidence les notions
utilisées, et il devrait fonctionner avec tous les navigateurs courants.

Examinez-le directement:
    http://www.william-voirol.ch/TP/Images dansantes/2-Aleatoire-sans superpositions/

Le fichier zip contient le code source avec quelques images.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,451 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)