carte du monde defilante

**neoxen** · 05/02/2009, 09h32

bonjour a tous.

Voila je suis avec un ami l'auteur d'un site web de type ogame et tribal wars.
Dans le cadre de ce site web j'ai du créer un script Javascript qui me permet d'afficher une carte des villages des joueurs présent sur le site.

L'exemple se trouve ici http://dimention.eu/test_map.php

Le problème est que je je doit recharger la carte si le joueur defile trop loin. Mais comme vous pouvez le constater il faut attendre un certain temps avant que l'image ne s'affiche. Donc je me demander si il serait possible de précharger l'image avant pour que l'affichage se fasse instantanément

Voici ma fonction qui gérer le défilement et le rechargement de l'image(celle ci est géré grace a la librairie GD 2 de php)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
function defil_map()
{
	//si on a activer le defilement de la carte
	if(auto_defil==1)
	{
		//on rapelle une fois la fonction
		setTimeout("defil_map()",10);
		//l'image est mise dans un overflow de  440px sur b 440px et l'image complete fait 440*3 px
		coord_X_img=document.getElementById("map").style.marginLeft;
		coord_Y_img=document.getElementById("map").style.marginTop;
		//on regarde dans quel sens tourner
		switch (sens_defil)
		{
			default:
				//si notre marginLeft est inferieur a  -40 px
				// qui represente les limite de notre defilement
				if(parseInt(coord_X_img)>=-40)
				{
					//on regarde a partire de quel coorodner recharger l'image php
					coord_X_taper-=15
					//puis on recharge l'image
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					//et on la recentre
					document.getElementById("map").style.marginLeft=-440;
					break;
				}
				document.getElementById("map").style.marginLeft=parseInt(coord_X_img)+2;
			break;
			case "droite":
				if(parseInt(coord_X_img)<=-840)
				{
					coord_X_taper+=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginLeft=-440;
					break;
				}
				document.getElementById("map").style.marginLeft=parseInt(coord_X_img)-2;
			break;
			case "haut":
				if(parseInt(coord_Y_img)>=-40)
				{
					coord_Y_taper-=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginTop=-440;
					break;
				}
				document.getElementById("map").style.marginTop=parseInt(coord_Y_img)+2;
			break;
			case "bas":
				if(parseInt(coord_Y_img)<=-840)
				{
					coord_Y_taper+=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginTop=-440;
					break;
				}
				document.getElementById("map").style.marginTop=parseInt(coord_Y_img)-2;
			break;
		}
	}
}

Je remercie d'avance toutes les personnes qui m'aiderons

Cordialement Neoxen

**franculo_caoulene** · 05/02/2009, 10h52

Salut,

Tu as une grande image cachée par un masque on va dire. L'idée est là, seulement au lieu d'avoir une grande image, tu devrais avoir une matrice d'images et (dé)charger celles-ci dans "map" le cas échéant.

Suis-je clair?

**neoxen** · 05/02/2009, 20h34

je voit a peu pret l'idee mais je ne voit pas vraiment comment mettre cela en oeuvre

**franculo_caoulene** · 09/02/2009, 13h36

Bon je ne sais pas si tu repasseras par là et je ne sais pas si ça te servira. Mais j'ai eu un peu de temps pour m'amuser.
Le script crée/supprime des div selon leur emplacement dans un espace donné. Je n'ai pas fait d'animation, juste une modification de position au clique sur un lien.
Fonctionne Sous FF3, Safari3, Opera9 et curieusement lentement sous IE7!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!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="fr">
<head>
   <title></title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   * {margin:0;padding:0;color:#ddd;}
   body {padding:100px; background:#000;}
   #divExterne {width:60px;height:60px;position:relative;overflow:hidden;background:#333;}
   .divInterne {width:56px;height:56px;position:absolute;float:left;border:2px solid #999;background:#666;}
   #navigation li:hover {cursor:pointer;}
   </style>
</head>
<body>
   <div id="divExterne">
   </div>
   <ul id="navigation">
      <li id="haut">haut</li>
      <li id="bas">bas</li>
      <li id="gauche">gauche</li>
      <li id="droite">droite</li>
   </ul>
   <script type="text/javascript">
   var Utils = {
   Chaine: {
      supprimerUnite: function(s) {
         if (s=="") return 0;
         else return parseInt(s.substring(0, s.length-2));
      }
   },
   Animation: {
      glisser: function(element, pas, direction) {
         switch (direction) {
            case "haut":
               element.style.top = Utils.Chaine.supprimerUnite(element.style.top) + pas + "px";
               break;
            case "bas":
               element.style.top = Utils.Chaine.supprimerUnite(element.style.top) - pas + "px";
               break;
            case "gauche":
               element.style.left = Utils.Chaine.supprimerUnite(element.style.left) - pas + "px";
               break;
            case "droite":
               element.style.left = Utils.Chaine.supprimerUnite(element.style.left) + pas + "px";
               break;
            default:
               return false;
         }
         return true;
      }
   },
   DOM: {
      getElementsByClassName: function(classe, noeud, balise) {
         var elements = [];
         if (document.getElementsByClassName) elements = document.getElementsByClassName(classe);
         else {
            if (noeud === undefined || noeud === null) { noeud = document; }
            if (balise === undefined || balise === null) { balise = "*"; }
            var elementsAParcourir = noeud.getElementsByTagName(balise);
            var rgx = new RegExp("(^|\\s)" + classe + "(\\s|$)");
            for (var i=0, imax=elementsAParcourir.length; i<imax; i++) {
               if (rgx.test(elementsAParcourir[i].className)) elements.push(elementsAParcourir[i]);
            }
         }
         return elements;
      }
   },
   Evenement: {
      ajouter: function(elm, evt, fn) {
         if (document.addEventListener) {
           if (elm.nodeType===1 || elm.nodeType===9) {
               elm.addEventListener(evt, function(e) {
                  if (!fn(e)) e.preventDefault();
               }, false);
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  elm[i].addEventListener(evt, function(e) {
                     if (!fn(e)) e.preventDefault();
                  }, false);
               }
            }
         } else if (document.attachEvent) {
            if (elm.nodeType===1 || elm.nodeType===9) {
               var r = elm.attachEvent("on" + evt, fn);
               return r;
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  var r = elm[i].attachEvent("on" + evt, fn);
                  return r;
               }
            }
         }
      }
   }
   };
 
   var Page = {
      Init: function() {
         var x, y;
         y = -120;
         for (var i=0; i<9; i++) {
            if (i%3==0) {
               x = -60;
               y += 60;
            } else {
               x += 60;
            }
            Page.creerDiv(i, x, y);
         }
      },
      creerDiv: function(s, x, y) {
         var texte = document.createTextNode(s);
         var div = document.createElement("div");
         div.id = "d"+ s;
         div.className = "divInterne";
         div.style.top = (typeof y=="number")?y +"px":y;
         div.style.left = (typeof x=="number")?x +"px":x;
         div.appendChild(texte);
         document.getElementById("divExterne").appendChild(div);
      },
      supprimerDiv: function(elm) {
         document.getElementById("divExterne").removeChild(elm);
      }
   }
 
   Page.Init();
   var j = 8;
 
   Utils.Evenement.ajouter(document.getElementById("navigation"), "mousedown", function(e) {
      var elm = e.target || event.srcElement;
      var elms = Utils.DOM.getElementsByClassName("divInterne");
      var offset = 60;
      var pas = 20;
      var x, y;
 
      for (var imin=0, i=elms.length-1; imin<=i; i--) {
         switch (elm.id) {
            case "haut":
               Utils.Animation.glisser(elms[i], pas, "haut");
               if (Utils.Chaine.supprimerUnite(elms[i].style.top)>(-offset/2)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.top)<(0)) {
                  j++;
                  x = elms[i].style.left;
                  y = Utils.Chaine.supprimerUnite(elms[i].style.top) - offset;
                  Page.creerDiv(j, x, y);
               }
               if (Utils.Chaine.supprimerUnite(elms[i].style.top)>(3*offset/2)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.top)<(2*offset)) {
                  Page.supprimerDiv(elms[i]);
               }
               break;
            case "bas":
               Utils.Animation.glisser(elms[i], pas, "bas");
               if (Utils.Chaine.supprimerUnite(elms[i].style.top)>(0)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.top)<(offset/2)) {
                  j++;
                  x = elms[i].style.left;
                  y = Utils.Chaine.supprimerUnite(elms[i].style.top) + offset;
                  Page.creerDiv(j, x, y);
               }
               if (Utils.Chaine.supprimerUnite(elms[i].style.top)>(-2*offset)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.top)<(-3*offset/2)) {
                  Page.supprimerDiv(elms[i]);
               }
               break;
            case "gauche":
               Utils.Animation.glisser(elms[i], pas, "gauche");
               if (Utils.Chaine.supprimerUnite(elms[i].style.left)>(0)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.left)<(offset/2)) {
                  j++;
                  x = Utils.Chaine.supprimerUnite(elms[i].style.left) + offset;
                  y = elms[i].style.top;
                  Page.creerDiv(j, x, y);
               }
               if (Utils.Chaine.supprimerUnite(elms[i].style.left)>(-2*offset)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.left)<(-3*offset/2)) {
                  Page.supprimerDiv(elms[i]);
               }
               break;
            case "droite":
               Utils.Animation.glisser(elms[i], pas, "droite");
               if (Utils.Chaine.supprimerUnite(elms[i].style.left)>(-offset/2)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.left)<(0)) {
                  j++;
                  x = Utils.Chaine.supprimerUnite(elms[i].style.left) - offset;
                  y = elms[i].style.top;
                  Page.creerDiv(j, x, y);
               }
               if (Utils.Chaine.supprimerUnite(elms[i].style.left)>(3*offset/2)
                  &&Utils.Chaine.supprimerUnite(elms[i].style.left)<(2*offset)) {
                  Page.supprimerDiv(elms[i]);
               }
               break;
         }
      }
   });
   </script>
</body>
</html>

On peut séparer le code en trois partie:
1) pseudo framework ou classe
2) initialisation de la page
3) gestions des div au clique sur la direction

carte du monde defilante

JavaScript

Discussions similaires

Partager

Partager