Images dansantes 4: mouvement de la tortue

2/5 (2 avis)

Vue 7 536 fois - Téléchargée 768 fois

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 / Exemple :


<!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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
dploux Messages postés 2 Date d'inscription mercredi 4 février 2009 Statut Membre Dernière intervention 15 mai 2010
17 juin 2011 à 17:50
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
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
8 juin 2011 à 11:58
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.