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

Code

 > 

Trucs Amusants

 > IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE

IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE


 Description

Une page en JavaScript suffit pour introduire dans votre site web
une zone d'images dansantes, basée sur le mouvement de la tortue
(aléatoire orienté sans possibilité de superposition).

Le mouvement aléatoire pur n'est pas très spectaculaire, car la vitesse
change d'une manière désordonnée.
Pour rendre les déplacements plus "naturels", je ne change plus directement
la vitesse, mais la 'variation' de la vitesse.

Toutes les images doivent avoir la même dimension [wIma,hIma],
et initialement, elles ne doivent pas 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', 'vit' et 'tim'.
Choisissez 'pas' tel que  1 <= pas <= vit.
Avec 'pas' près de 'vit', on s'approche du mouvement aléatoire pur.

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 de la tortue</title>
  • <script type="text/javascript">
  • //<![CDATA[
  • var iZon=0,nZon=0,tim=5; // timer en milisecondes
  • var vit=8,vit2=2*vit+1; // vitesse maximale en pixels à chaque Nxt()
  • var pas=2,pas2=2*pas+1; // différence maximal de la vitesse à chaque Nxt()
  • var wIma=160,hIma=120; // 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(320,000,"Photo-B"), // les images ne doivent pas se superposer
  • new Zon(640,000,"Photo-C"),
  • new Zon(320,240,"Photo-D"),
  • new Zon(000,480,"Photo-E"),
  • new Zon(320,400,"Photo-F"),
  • new Zon(640,480,"Photo-G")
  • ];
  • function Zon(x,y,nom) { // Définition de l'objet et comptage
  • this.x=x; this.y=y; this.nom=nom; this.u=0; this.v=0; nZon++;
  • }
  • function Clk(i) { // Action du click sur la 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 u=z.u+Math.floor(Math.random()*pas2)-pas;
  • var v=z.v+Math.floor(Math.random()*pas2)-pas;
  • if (u<-vit) u=-vit; else if (u>vit) u=vit;
  • if (v<-vit) v=-vit; else if (v>vit) v=vit;
  • var x=z.x+u,y=z.y+v;
  • if ((x<xInf)||(x>xSup)) z.u=-u; else if ((y<yInf)||(y>ySup)) z.v=-v;
  • else {
  • 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=x+'px'; im.style.top=y+'px';
  • z.x=x; z.y=y; z.u=u; z.v=v;
  • } else {z.u=0; z.v=0;}
  • }
  • iZon=(iZon+1)%nZon;
  • }
  • //]]>
  • </script>
  • </head>
  • <body onload="Ini(); setInterval('Nxt()',tim);">
  • <h2>Images dansantes: mouvement de la tortue.</h2>
  • <div id='cnt' style="margin-left:10px; width:800px; height:600px; 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 pas dépasser les bords du conteneur jaune,
  • ni se superposer.<br />
  • La vitesse dépend des variables 'pas', 'vit' 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 de la tortue</title>
  <script type="text/javascript">
  //<![CDATA[
    var iZon=0,nZon=0,tim=5; // timer en milisecondes
    var vit=8,vit2=2*vit+1;  // vitesse maximale en pixels à chaque Nxt()
    var pas=2,pas2=2*pas+1;  // différence maximal de la vitesse à chaque Nxt()
    var wIma=160,hIma=120;   // 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(320,000,"Photo-B"), // les images ne doivent pas se superposer
      new Zon(640,000,"Photo-C"),
      new Zon(320,240,"Photo-D"),
      new Zon(000,480,"Photo-E"),
      new Zon(320,400,"Photo-F"),
      new Zon(640,480,"Photo-G")
    ];
    function Zon(x,y,nom) { // Définition de l'objet et comptage
      this.x=x; this.y=y; this.nom=nom; this.u=0; this.v=0; nZon++;
    }
    function Clk(i) { // Action du click sur la 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 u=z.u+Math.floor(Math.random()*pas2)-pas;
      var v=z.v+Math.floor(Math.random()*pas2)-pas;
      if (u<-vit) u=-vit; else if (u>vit) u=vit;
      if (v<-vit) v=-vit; else if (v>vit) v=vit;
      var x=z.x+u,y=z.y+v;
      if ((x<xInf)||(x>xSup)) z.u=-u; else if ((y<yInf)||(y>ySup)) z.v=-v;
      else {
        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=x+'px'; im.style.top=y+'px';
          z.x=x; z.y=y; z.u=u; z.v=v;
        } else {z.u=0; z.v=0;}
      }
      iZon=(iZon+1)%nZon;
    }
  //]]>
  </script> 
</head>

<body onload="Ini(); setInterval('Nxt()',tim);">
  <h2>Images dansantes: mouvement de la tortue.</h2>
  <div id='cnt' style="margin-left:10px; width:800px; height:600px; 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 pas dépasser les bords du conteneur jaune,
      ni se superposer.<br />
    La vitesse dépend des variables 'pas', 'vit' 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/4-Tortue/

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 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS 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 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol

Commentaires et avis

Commentaire de kazma le 08/06/2011 11:58:28 administrateur CS

boujour

la source est interessante les image qui ne se superposes pas c'est pas mal mais mais mais je trouve que le code n'est pas du tout fait pour etre comprehensible je pense que celui qui aime comprendre l'optimisation d'un code se dira que c'est pas mal mais par contre pour celui qui cherche a comprendre le fonctionnement de l'ensemble risque d'etre deçu un des exemples ce sont les variable s c e j'aurais préféré des noms qui aident a la compréhension ou encore while (b&&(++i<nZon)); dans un sens je trouve ca pas mal mais sa reste dur dur.

au vu de la syntaxe je pense que tu a du deja programmé dans d'autres langage genre c# et si c'est le cas  je trouve interessant ce passage vers le javascript ca apporte une certaine facon de programmer

bonne continuation

Commentaire de dploux le 17/06/2011 17:50:57 7/10

J'ai testé ce code : il fonctionne bien mais selon les hebergeurs (Hosteur) l'affichage des images ne se fait pas: raison il ne supporte pas les fichiers avec les noms trop long ni les tirets (image-01) et avantage: cela fait travailler les neurons.
Amicalement

 Ajouter un commentaire

Nos sponsors


Sondage...

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 : 0,905 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)