Partage

Script mauvais ou serveur qui rame?

création d'une carte isométrique html/php/ajax

Sujet résolu

11 janvier 2010 à 13:40:04

Bonjour a tous, cela fait quelques temps que je travaille avec un amis sur un projet de jeu php par navigateur.

Et la pour vous dire nous nous retrouvons dans une impasse...

Nous avons créer un code permettant de se déplacer sur une carte (vous pouvez tester ici)

les fonction principale de cette carte sont très simple:
- Zoomer / dézoomer
- Se déplacer (haut / bas / gauche / droite) avec des coordonnés
(les fonctions zoom et déplacement son liées car il faut garder la case en mémoire quand on zoome et vise-versa...)
- Afficher des décors par couche, jusqu'à 4 images superposés sans rien stocker dans une bdd
- Afficher une balise MAP et des area pour découper chaque image sous forme de lien contenant les coordonnées de l'image.

Tout cela fonctionne. Notre problème vient de la lenteur du code...
Nous avons donc eu recours a l'ajax pour recharger que la carte et non toutes la page quand on utilise une des fonctions.

Je ne sais pas si vous connaissez le jeu par navigateur Travian, notre carte s'inspire un peu de la leur (rassurer vous on ne copie pas leur jeu... il n'ont pas de zoom :p) seulement on souhaiterez avoir une carte plus fluide, a chaque déplacement il faut attendre un certains temps, et si on clique plusieurs fois l'affichage s'emballe un peu et ne sais pas ou il en ai...

Ma questions: est-ce que cela provient de notre serveur (free.fr) ? ou alors notre code n'est-il pas adapter ? ou bien les deux ?

Pour notre part, nous avons tester la lourdeur des images et cela ne vient pas de la...
Et en local cela tourne très bien...

je vous met le code (cela peut intéresser certaine personne cherchant a faire une carte dans le même style ^^):

la page monde.php qui appelle la carte

<script type="text/javascript" src="java.js"></script>
<div id="ici"><?php include('carte.php'); ?></div>

la page java.js avec la fonction javascript zoom et déplacement:

function ici(zone,nbcase) {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
	}
	
	xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById("ici").innerHTML=(xhr.responseText); // Données textuelles récupérées
        }
	};
	
	xhr.open("GET", "carte.php?zone="+zone+"&nbcase="+nbcase, true);
	xhr.send(null);
}

et enfin la page carte.php contenant le php et html pour afficher la carte:

<?php
$listetaille=array('p'=>9, 'm'=>15 , 'g'=>21 );

	if(isset($_COOKIE['taillecarteperso']))
	{$nbcase=$listetaille[$_COOKIE['taillecarteperso']];}

// valeur réglage horyzontal et vertical de la carte + les boutons

$horizontal=115;
$vertical=0;
		
?>
<p>

<img src="image/monde/d1.png" style=" visibility:hidden;"/>
<img src="image/monde/d2.png" style=" visibility:hidden;"/>
<img src="image/monde/d3.png" style=" visibility:hidden;"/>
<img src="image/monde/d4.png" style=" visibility:hidden;"/>
<?php
if ($_GET['zone'])$zone=$_GET['zone'];
else $zone="5@5";
if ($_GET['nbcase']) $nbcase=$_GET['nbcase'];
else $nbcase=9;

if ($nbcase<3) $nbcase=$listetaille[$_COOKIE['taillecarteperso']];

function coordonnees($zone)
{
return $coordonnees = array ('a'=>preg_replace('#(.+)@(.+)#','$1',$zone),'z'=>preg_replace('#(.+)@(.+)#','$2',$zone));
}

$coordonnees=coordonnees($zone);
$a=$coordonnees['a'];
$z=$coordonnees['z'];
$haut=($a-1).'@'.$z;
$bas=($a+1).'@'.$z;
$gauche=$a.'@'.($z-1);
$droite=$a.'@'.($z+1);

$zone=$a.'@'.$z;
$zoom=($nbcase-3);
$dezoom=($nbcase+3);
$zoom0=$nbcase;



// Deplacement rapide
$haut2=($a-$nbcase).'@'.$z;
$bas2=($a+$nbcase).'@'.$z;
$gauche2=$a.'@'.($z-$nbcase);
$droite2=$a.'@'.($z+$nbcase);

// taille carte


if ($nbcase >=18) $nbcase=18;
if ($nbcase <=3) $nbcase=3;
?>
<a href='#a' onclick="ici('<?php echo $haut; ?>','<?php echo $zoom0; ?>')" ><img style="z-index:100;border:none; position:absolute; left:<?php echo $horizontal+365; ?>px ; top:<?php echo $vertical+565; ?>px; " src="image/monde/bg.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('<?php echo $gauche; ?>','<?php echo $zoom0; ?>')" ><img style="z-index:100;border:none; position:absolute; left:<?php echo $horizontal+365; ?>px; top:<?php echo $vertical+335; ?>px; "  src="image/monde/hg.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('<?php echo $droite; ?>','<?php echo $zoom0; ?>')" ><img  style="z-index:100;border:none; position:absolute; left:<?php echo $horizontal+695; ?>px; top:<?php echo $vertical+565; ?>px;; " src="image/monde/bd.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('<?php echo $bas; ?>','<?php echo $zoom0; ?>')" ><img  style="z-index:100;border:none; position:absolute; left:<?php echo $horizontal+685; ?>px; top:<?php echo $vertical+330; ?>px;; "  src="image/monde/hd.png" alt="Deplacement" title="Deplacement" /></a><br />

<a href='#a' onclick="ici('<?php echo $haut2; ?>','<?php echo $zoom0; ?>')" ><img style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:<?php echo $horizontal+646; ?>px; top:<?php echo $vertical+650; ?>px; " src="image/monde/fg.png" alt="Deplacement de <?php echo $nbcase; ?> case" title="Deplacement de <?php echo $nbcase; ?> case" /></a> 
<a href='#a' onclick="ici('<?php echo $gauche2; ?>','<?php echo $zoom0; ?>')" ><img style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:<?php echo $horizontal+638; ?>px; top:<?php echo $vertical+620; ?>px; "  src="image/monde/fh.png" alt="Deplacement de <?php echo $nbcase; ?> case" title="Deplacement de <?php echo $nbcase; ?> case" /></a> 
<a href='#a' onclick="ici('<?php echo $droite2; ?>','<?php echo $zoom0; ?>')" ><img  style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:<?php echo $horizontal+698; ?>px; top:<?php echo $vertical+653; ?>px; " src="image/monde/fb.png" alt="Deplacement de <?php echo $nbcase; ?> case" title="Deplacement de <?php echo $nbcase; ?> case" /></a> 
<a href='#a' onclick="ici('<?php echo $bas2; ?>','<?php echo $zoom0; ?>')" ><img  style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:<?php echo $horizontal+690; ?>px; top:<?php echo $vertical+623; ?>px; "  src="image/monde/fd.png" alt="Deplacement de <?php echo $nbcase; ?> case" title="Deplacement de <?php echo $nbcase; ?> case" /></a><br />



<a href='#a' <?php if ($nbcase>3) { ?> onclick="ici('<?php echo $zone; ?>','<?php echo $zoom; ?>')" <?php } ?> ><img  style="width:40px; height:40px; z-index:100;border:none; position:absolute; left:<?php echo $horizontal+300; ?>px; top:<?php echo $vertical+330; ?>px; " src="image/monde/zoom.png" alt="Zoom" title="Zoom" /></a> 

<a href='#a' <?php if ($nbcase<18) { ?> onclick="ici('<?php echo $zone; ?>','<?php echo $dezoom; ?>')" <?php } ?> ><img  style="width:40px; height:40px; z-index:100;border:none; position:absolute;left:<?php echo $horizontal+300; ?>px; top:<?php echo $vertical+370; ?>px; "  src="image/monde/dezoom.png" alt="Dézoom" title="Dézoom" /></a><br />

<?php
//taille image carte:
$largeur=540/$nbcase;
$hauteur=floor(2*$largeur/3);

//position de la carte pour que l'affichage soit entier sur la page
$top=$nbcase/2*$hauteur-($hauteur/2)+300+$vertical;
$left=300+$horizontal;

for ($o=$a;$o<=$a+$nbcase-1;$o++)
{
?>
<span style="font-size:<?php echo 12+8*(3/$nbcase); ?>px;border:none;position:absolute; <?php echo 'left:'.($left+(80/$nbcase)-10).';'; ?> <?php echo 'top:'.($top+(80/$nbcase)-20).';'; ?>"><?php
echo $o;?> </span>
<?php
for ($i=$z;$i<=$z+$nbcase-1;$i++)
{

if ($o==$a) {
?>
<span style="font-size:<?php echo 12+8*(3/$nbcase); ?>px;border:none;position:absolute; <?php echo 'left:'.($left+(50/$nbcase)-5).';'; ?> <?php echo 'top:'.($top-(120/$nbcase)+5+$hauteur).';'; ?>"><?php
echo $i;?> </span>
<?php
}

// variable pour placer les image aléatoirement
$a1=(1350*((1.1*$i+1.23*$o)*(1.6*$i+1.3*$o)));
$a2=$i;
$a3=$o;
$a1++;
// conditions d'aparition des images en fonction des variables il peu y avoir jusqu'a 3 décor sur la même case
if     (($a1%4==4)  && ($a2&1) && ($a3&1) ) $image1="d1.png";
elseif (($a1%5==4)  && ($a2&2) && ($a3&3) ) $image1="d2.png";
elseif (($a1%5==4)  && ($a2&3) && ($a3&2) ) $image1="d3.png";
else $image1="d4.png";

if     (($a1%5==4)  && ($a2&1) && ($a3&1) ) $image2="c1.png";
elseif (($a1%6==4)  && ($a2&1) && ($a3&1) ) $image2="c2.png";
elseif (($a1%6==4)  && ($a2&3) && ($a3&2) ) $image2="c3.png";
else $image2="v.png";

if     (($a1%7==4)  && ($a2&1) && ($a3&1) ) $image3="c3.png";
elseif (($a1%8==4)  && ($a2&1) && ($a3&1) ) $image3="c4.png";
elseif (($a1%6==4)  && ($a2&5) && ($a3&1) ) $image3="c2.png";
else $image3="v.png";

if     (($a1%9==4)  && ($a2&1) && ($a3&1) ) $image4="c5.png";
elseif (($a1%10==4)  && ($a2&1) && ($a3&1)) $image4="c6.png";
elseif (($a1%12==4)  && ($a2&2) && ($a3&5)) $image4="c1.png";
else $image4="v.png";

// coordonnées de la case
$num=$i."@".$o;
// affichage des image, 1 pour le fond et 3 pour la decoration
?>
<img src="image/monde/<?php echo $image1; ?>" alt="<?php echo $num ?>" title="<?php echo $num ?>" style="border:none;position:absolute;width:<?php echo $largeur; ?>px;height:<?php echo $hauteur; ?>px;  <?php echo 'left:'.$left.';'; ?> <?php echo 'top:'.$top.';'; ?>" />
<img src="image/monde/<?php echo $image2; ?>" alt="<?php echo $num ?>" title="<?php echo $num ?>" style="border:none;position:absolute;width:<?php echo $largeur; ?>px;height:<?php echo $hauteur; ?>px;  <?php echo 'left:'.$left.';'; ?> <?php echo 'top:'.$top.';'; ?>" />
<img src="image/monde/<?php echo $image3; ?>" alt="<?php echo $num ?>" title="<?php echo $num ?>" style="border:none;position:absolute;width:<?php echo $largeur; ?>px;height:<?php echo $hauteur; ?>px;  <?php echo 'left:'.$left.';'; ?> <?php echo 'top:'.$top.';'; ?>" />
<img src="image/monde/<?php echo $image4; ?>" alt="<?php echo $num ?>" title="<?php echo $num ?>" style="border:none;position:absolute;width:<?php echo $largeur; ?>px;height:<?php echo $hauteur; ?>px;  <?php echo 'left:'.$left.';'; ?> <?php echo 'top:'.$top.';'; ?>" />
<?php
$left=$left+($largeur/2);
$top=$top+($hauteur/2);
}
$top=$top-$nbcase*($hauteur/2)-($hauteur/2);
$left=$left-$nbcase*($largeur/2)+($largeur/2);
}




// affichage de la fauille transparente portant les liens.
?>
</p>
<img  src="image/monde/carte.png" usemap="#carte" style="width:<?php echo $largeur*$nbcase; ?>px; height:<?php echo $hauteur*$nbcase+20 ?>px; border:none;position:absolute;top:<?php echo $vertical+300; ?>px;left:<?php echo $horizontal+300; ?>px;" />
<MAP name="carte">
<?php
//position de la carte pour que l'affichage soit entier sur la page pour les partie active des liens
$top=$nbcase/2*$hauteur-($hauteur/2);
$left=0;

// initialisation des variable de calcul des différents points des zones réactives.  ici on met la première case a gauche
$x1=($largeur/2)+$left;
$y1=0+$top;
$x2=$largeur+$left;
$y2=($hauteur/2)+$top;
$x3=($largeur/2)+$left;
$y3=$hauteur+$top;
$x4=0+$left;
$y4=($hauteur/2)+$top;

for ($o=$a;$o<=$a+$nbcase-1;$o++)
{
for ($i=$z;$i<=$z+$nbcase-1;$i++)
{
$num=$i."@".$o;
?>
<area shape="poly" coords="<?php echo"$x1,$y1 , $x2,$y2 ,$x3,$y3 ,$x4,$y4, $x1,$y1"; ?>" href="<?php echo $num ?>" alt="<?php echo $num ?>" title="<?php echo $num ?>" />
<?php
$x1=$x1+($largeur/2);
$y1=$y1+($hauteur/2);
$x2=$x2+($largeur/2);
$y2=$y2+($hauteur/2);
$x3=$x3+($largeur/2);
$y3=$y3+($hauteur/2);
$x4=$x4+($largeur/2);
$y4=$y4+($hauteur/2);
}
$y1=$y1-$nbcase*($hauteur/2)-($hauteur/2);
$x1=$x1-$nbcase*($largeur/2)+($largeur/2);
$y2=$y2-$nbcase*($hauteur/2)-($hauteur/2);
$x2=$x2-$nbcase*($largeur/2)+($largeur/2);
$y3=$y3-$nbcase*($hauteur/2)-($hauteur/2);
$x3=$x3-$nbcase*($largeur/2)+($largeur/2);
$y4=$y4-$nbcase*($hauteur/2)-($hauteur/2);
$x4=$x4-$nbcase*($largeur/2)+($largeur/2);
}
?>
</map>

je vous met la source en .rar ici avec les images et les pages de codes pour se qui souhaiterez tester.

Je vous remercie d'avance de vos suggestions, ou idées pour résoudre mon problèmes.
Je souhaiterez vraiment savoir si le plus gros problème est le serveur, le code... ou les deux...

bonne journée

Tillertan

11 janvier 2010 à 14:12:49

Bah c'est les deux.

Free.fr met 250ms à répondre la requete ajax chez moi, contre 50-100ms sur un serveur.

Mais ensuite, ton code est barbare. Tu récupères un énorme truc en ajax, et tu fais un innerHTML de tout ton bloc, avec je ne sais combien d'image d'éléments and co. Tu réécris à la volé toute ta page, écrasant des trucs qui aurait pu rester.

Ton système est mal construit à la base.

Par ajax tu ne devrais récupéré qu'une petite modification, genre le déplace de ta carte.

Et ta carte ne devrait pas être coupé case par case mais en un bloc, que tu déplacerais juste.

Nesk

11 janvier 2010 à 15:15:43

Tiller a parfaitement raison, la base de l'Ajax c'est de permettre la rafraîchissement d'un page avec le minimum d'informations, quitte à faire des calculs supplémentaires. Essaye de faire en sorte de revoir ce que tu peux afficher directement au chargement de la page puis ce que tu peux charger par le biais d'Ajax.

morkibut

11 janvier 2010 à 16:24:06

ok merci d'avoir prêter attention a mon code.

Par contre je ne comprend pas ce que tu appelle barbare...
Quand tu me dit

Citation

Tu récupères un énorme truc en ajax

je ne comprend pas je récupère seulement 2 variables...

Puis tu me dit

Citation

écrasant des trucs qui aurait pu rester

c'est a dire, je ne peut rien garder de toutes façon, chaque cases change... ou alors je ne voit pas comment faire...

Citation

Et ta carte ne devrait pas être coupé case par case mais en un bloc, que tu déplacerais juste.

La non plus je ne voit pas comment faire. Ce que tu veut dire c'est que je devrait faire 1 seule image de carte géante et déplacer seulement la partie que j'affiche?
Comment faire cela, pourrais tu détailler ce que tu imagines ?

Je ne connais pas trop grand chose a l'AJAX, notre jeu est programmer en php essentiellement a par quelques petite fonction en javascript (compte a rebours et autre...)

J'avoue que l'AJAX m'a l'air assez compliquer (en même temps je suis le graphiste de l'équipe et non le codeur).

Je vous remercie de vos réponse, je creuse de mon coté en attendant d'avoir des précisions si vous en avez.

Tillertan

11 janvier 2010 à 20:45:52

<p>

<img src="image/monde/d1.png" style=" visibility:hidden;"/>
<img src="image/monde/d2.png" style=" visibility:hidden;"/>
<img src="image/monde/d3.png" style=" visibility:hidden;"/>
<img src="image/monde/d4.png" style=" visibility:hidden;"/>
<a href='#a' onclick="ici('6@5','9')" ><img style="z-index:100;border:none; position:absolute; left:480px ; top:565px; " src="image/monde/bg.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('7@4','9')" ><img style="z-index:100;border:none; position:absolute; left:480px; top:335px; "  src="image/monde/hg.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('7@6','9')" ><img  style="z-index:100;border:none; position:absolute; left:810px; top:565px;; " src="image/monde/bd.png" alt="Deplacement" title="Deplacement" /></a> 
<a href='#a' onclick="ici('8@5','9')" ><img  style="z-index:100;border:none; position:absolute; left:800px; top:330px;; "  src="image/monde/hd.png" alt="Deplacement" title="Deplacement" /></a><br />

<a href='#a' onclick="ici('-2@5','9')" ><img style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:761px; top:650px; " src="image/monde/fg.png" alt="Deplacement de 9 case" title="Deplacement de 9 case" /></a> 
<a href='#a' onclick="ici('7@-4','9')" ><img style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:753px; top:620px; "  src="image/monde/fh.png" alt="Deplacement de 9 case" title="Deplacement de 9 case" /></a> 
<a href='#a' onclick="ici('7@14','9')" ><img  style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:813px; top:653px; " src="image/monde/fb.png" alt="Deplacement de 9 case" title="Deplacement de 9 case" /></a> 
<a href='#a' onclick="ici('16@5','9')" ><img  style="width:50px; height:26px; z-index:100;border:none; position:absolute; left:805px; top:623px; "  src="image/monde/fd.png" alt="Deplacement de 9 case" title="Deplacement de 9 case" /></a><br />



<a href='#a'  onclick="ici('7@5','3')"  ><img  style="width:40px; height:40px; z-index:100;border:none; position:absolute; left:415px; top:330px; " src="image/monde/zoom.png" alt="Zoom" title="Zoom" /></a> 

<a href='#a'  onclick="ici('7@5','15')"  ><img  style="width:40px; height:40px; z-index:100;border:none; position:absolute;left:415px; top:370px; "  src="image/monde/dezoom.png" alt="Dézoom" title="Dézoom" /></a><br />

	<span style="font-size:14.666666666667px;border:none;position:absolute; left:413.88888888889; top:448.88888888889;">7 </span>
				<span style="font-size:14.666666666667px;border:none;position:absolute; left:415.55555555556; top:491.66666666667;">5 </span>
					<img src="image/monde/d4.png" alt="5@7"  style="border:none;position:absolute;width:60px;height:40px;  left:415; top:460;" />
		<img src="image/monde/v.png" alt="5@7"  style="border:none;position:absolute;width:60px;height:40px;  left:415; top:460;" />
		<img src="image/monde/v.png" alt="5@7"  style="border:none;position:absolute;width:60px;height:40px;  left:415; top:460;" />
		<img src="image/monde/v.png" alt="5@7" style="border:none;position:absolute;width:60px;height:40px;  left:415; top:460;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:445.55555555556; top:511.66666666667;">6 </span>
					<img src="image/monde/d4.png" alt="6@7"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:480;" />
		<img src="image/monde/v.png" alt="6@7"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:480;" />
		<img src="image/monde/v.png" alt="6@7"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:480;" />
		<img src="image/monde/v.png" alt="6@7" style="border:none;position:absolute;width:60px;height:40px;  left:445; top:480;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:475.55555555556; top:531.66666666667;">7 </span>
					<img src="image/monde/d4.png" alt="7@7"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:500;" />
		<img src="image/monde/v.png" alt="7@7"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:500;" />
		<img src="image/monde/v.png" alt="7@7"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:500;" />
		<img src="image/monde/v.png" alt="7@7" style="border:none;position:absolute;width:60px;height:40px;  left:475; top:500;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:505.55555555556; top:551.66666666667;">8 </span>
					<img src="image/monde/d4.png" alt="8@7"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:520;" />
		<img src="image/monde/v.png" alt="8@7"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:520;" />
		<img src="image/monde/v.png" alt="8@7"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:520;" />
		<img src="image/monde/v.png" alt="8@7" style="border:none;position:absolute;width:60px;height:40px;  left:505; top:520;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:535.55555555556; top:571.66666666667;">9 </span>
					<img src="image/monde/d4.png" alt="9@7"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:540;" />
		<img src="image/monde/c2.png" alt="9@7"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:540;" />
		<img src="image/monde/c2.png" alt="9@7"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:540;" />
		<img src="image/monde/v.png" alt="9@7" style="border:none;position:absolute;width:60px;height:40px;  left:535; top:540;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:565.55555555556; top:591.66666666667;">10 </span>
					<img src="image/monde/d4.png" alt="10@7"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:560;" />
		<img src="image/monde/v.png" alt="10@7"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:560;" />
		<img src="image/monde/v.png" alt="10@7"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:560;" />
		<img src="image/monde/v.png" alt="10@7" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:560;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:595.55555555556; top:611.66666666667;">11 </span>
					<img src="image/monde/d4.png" alt="11@7"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:580;" />
		<img src="image/monde/v.png" alt="11@7"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:580;" />
		<img src="image/monde/c4.png" alt="11@7"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:580;" />
		<img src="image/monde/v.png" alt="11@7" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:580;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:625.55555555556; top:631.66666666667;">12 </span>
					<img src="image/monde/d4.png" alt="12@7"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:600;" />
		<img src="image/monde/v.png" alt="12@7"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:600;" />
		<img src="image/monde/v.png" alt="12@7"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:600;" />
		<img src="image/monde/v.png" alt="12@7" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:600;" />
					<span style="font-size:14.666666666667px;border:none;position:absolute; left:655.55555555556; top:651.66666666667;">13 </span>
					<img src="image/monde/d4.png" alt="13@7"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:620;" />
		<img src="image/monde/v.png" alt="13@7"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:620;" />
		<img src="image/monde/v.png" alt="13@7"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:620;" />
		<img src="image/monde/c5.png" alt="13@7" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:620;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:443.88888888889; top:428.88888888889;">8 </span>
			<img src="image/monde/d4.png" alt="5@8"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:440;" />
		<img src="image/monde/v.png" alt="5@8"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:440;" />
		<img src="image/monde/v.png" alt="5@8"  style="border:none;position:absolute;width:60px;height:40px;  left:445; top:440;" />
		<img src="image/monde/v.png" alt="5@8" style="border:none;position:absolute;width:60px;height:40px;  left:445; top:440;" />
				<img src="image/monde/d4.png" alt="6@8"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:460;" />
		<img src="image/monde/v.png" alt="6@8"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:460;" />
		<img src="image/monde/v.png" alt="6@8"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:460;" />
		<img src="image/monde/v.png" alt="6@8" style="border:none;position:absolute;width:60px;height:40px;  left:475; top:460;" />
				<img src="image/monde/d4.png" alt="7@8"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:480;" />
		<img src="image/monde/v.png" alt="7@8"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:480;" />
		<img src="image/monde/v.png" alt="7@8"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:480;" />
		<img src="image/monde/v.png" alt="7@8" style="border:none;position:absolute;width:60px;height:40px;  left:505; top:480;" />
				<img src="image/monde/d4.png" alt="8@8"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:500;" />
		<img src="image/monde/v.png" alt="8@8"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:500;" />
		<img src="image/monde/v.png" alt="8@8"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:500;" />
		<img src="image/monde/v.png" alt="8@8" style="border:none;position:absolute;width:60px;height:40px;  left:535; top:500;" />
				<img src="image/monde/d4.png" alt="9@8"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:520;" />
		<img src="image/monde/v.png" alt="9@8"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:520;" />
		<img src="image/monde/v.png" alt="9@8"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:520;" />
		<img src="image/monde/v.png" alt="9@8" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:520;" />
				<img src="image/monde/d4.png" alt="10@8"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:540;" />
		<img src="image/monde/v.png" alt="10@8"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:540;" />
		<img src="image/monde/v.png" alt="10@8"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:540;" />
		<img src="image/monde/v.png" alt="10@8" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:540;" />
				<img src="image/monde/d4.png" alt="11@8"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:560;" />
		<img src="image/monde/v.png" alt="11@8"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:560;" />
		<img src="image/monde/v.png" alt="11@8"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:560;" />
		<img src="image/monde/v.png" alt="11@8" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:560;" />
				<img src="image/monde/d4.png" alt="12@8"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:580;" />
		<img src="image/monde/v.png" alt="12@8"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:580;" />
		<img src="image/monde/v.png" alt="12@8"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:580;" />
		<img src="image/monde/v.png" alt="12@8" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:580;" />
				<img src="image/monde/d4.png" alt="13@8"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:600;" />
		<img src="image/monde/v.png" alt="13@8"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:600;" />
		<img src="image/monde/v.png" alt="13@8"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:600;" />
		<img src="image/monde/v.png" alt="13@8" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:600;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:473.88888888889; top:408.88888888889;">9 </span>
			<img src="image/monde/d4.png" alt="5@9"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:420;" />
		<img src="image/monde/c2.png" alt="5@9"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:420;" />
		<img src="image/monde/c2.png" alt="5@9"  style="border:none;position:absolute;width:60px;height:40px;  left:475; top:420;" />
		<img src="image/monde/c5.png" alt="5@9" style="border:none;position:absolute;width:60px;height:40px;  left:475; top:420;" />
				<img src="image/monde/d4.png" alt="6@9"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:440;" />
		<img src="image/monde/v.png" alt="6@9"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:440;" />
		<img src="image/monde/v.png" alt="6@9"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:440;" />
		<img src="image/monde/v.png" alt="6@9" style="border:none;position:absolute;width:60px;height:40px;  left:505; top:440;" />
				<img src="image/monde/d4.png" alt="7@9"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:460;" />
		<img src="image/monde/v.png" alt="7@9"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:460;" />
		<img src="image/monde/v.png" alt="7@9"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:460;" />
		<img src="image/monde/v.png" alt="7@9" style="border:none;position:absolute;width:60px;height:40px;  left:535; top:460;" />
				<img src="image/monde/d4.png" alt="8@9"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:480;" />
		<img src="image/monde/v.png" alt="8@9"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:480;" />
		<img src="image/monde/v.png" alt="8@9"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:480;" />
		<img src="image/monde/v.png" alt="8@9" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:480;" />
				<img src="image/monde/d4.png" alt="9@9"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:500;" />
		<img src="image/monde/v.png" alt="9@9"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:500;" />
		<img src="image/monde/v.png" alt="9@9"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:500;" />
		<img src="image/monde/v.png" alt="9@9" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:500;" />
				<img src="image/monde/d4.png" alt="10@9"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:520;" />
		<img src="image/monde/v.png" alt="10@9"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:520;" />
		<img src="image/monde/v.png" alt="10@9"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:520;" />
		<img src="image/monde/v.png" alt="10@9" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:520;" />
				<img src="image/monde/d4.png" alt="11@9"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:540;" />
		<img src="image/monde/v.png" alt="11@9"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:540;" />
		<img src="image/monde/v.png" alt="11@9"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:540;" />
		<img src="image/monde/v.png" alt="11@9" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:540;" />
				<img src="image/monde/d4.png" alt="12@9"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:560;" />
		<img src="image/monde/v.png" alt="12@9"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:560;" />
		<img src="image/monde/v.png" alt="12@9"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:560;" />
		<img src="image/monde/v.png" alt="12@9" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:560;" />
				<img src="image/monde/d4.png" alt="13@9"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:580;" />
		<img src="image/monde/c1.png" alt="13@9"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:580;" />
		<img src="image/monde/c3.png" alt="13@9"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:580;" />
		<img src="image/monde/v.png" alt="13@9" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:580;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:503.88888888889; top:388.88888888889;">10 </span>
			<img src="image/monde/d4.png" alt="5@10"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:400;" />
		<img src="image/monde/v.png" alt="5@10"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:400;" />
		<img src="image/monde/v.png" alt="5@10"  style="border:none;position:absolute;width:60px;height:40px;  left:505; top:400;" />
		<img src="image/monde/v.png" alt="5@10" style="border:none;position:absolute;width:60px;height:40px;  left:505; top:400;" />
				<img src="image/monde/d4.png" alt="6@10"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:420;" />
		<img src="image/monde/c3.png" alt="6@10"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:420;" />
		<img src="image/monde/v.png" alt="6@10"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:420;" />
		<img src="image/monde/v.png" alt="6@10" style="border:none;position:absolute;width:60px;height:40px;  left:535; top:420;" />
				<img src="image/monde/d4.png" alt="7@10"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:440;" />
		<img src="image/monde/v.png" alt="7@10"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:440;" />
		<img src="image/monde/v.png" alt="7@10"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:440;" />
		<img src="image/monde/v.png" alt="7@10" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:440;" />
				<img src="image/monde/d4.png" alt="8@10"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:460;" />
		<img src="image/monde/v.png" alt="8@10"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:460;" />
		<img src="image/monde/v.png" alt="8@10"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:460;" />
		<img src="image/monde/v.png" alt="8@10" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:460;" />
				<img src="image/monde/d3.png" alt="9@10"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:480;" />
		<img src="image/monde/v.png" alt="9@10"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:480;" />
		<img src="image/monde/v.png" alt="9@10"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:480;" />
		<img src="image/monde/v.png" alt="9@10" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:480;" />
				<img src="image/monde/d4.png" alt="10@10"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:500;" />
		<img src="image/monde/c3.png" alt="10@10"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:500;" />
		<img src="image/monde/v.png" alt="10@10"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:500;" />
		<img src="image/monde/v.png" alt="10@10" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:500;" />
				<img src="image/monde/d4.png" alt="11@10"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:520;" />
		<img src="image/monde/v.png" alt="11@10"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:520;" />
		<img src="image/monde/v.png" alt="11@10"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:520;" />
		<img src="image/monde/v.png" alt="11@10" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:520;" />
				<img src="image/monde/d4.png" alt="12@10"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:540;" />
		<img src="image/monde/v.png" alt="12@10"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:540;" />
		<img src="image/monde/v.png" alt="12@10"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:540;" />
		<img src="image/monde/v.png" alt="12@10" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:540;" />
				<img src="image/monde/d3.png" alt="13@10"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:560;" />
		<img src="image/monde/v.png" alt="13@10"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:560;" />
		<img src="image/monde/v.png" alt="13@10"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:560;" />
		<img src="image/monde/v.png" alt="13@10" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:560;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:533.88888888889; top:368.88888888889;">11 </span>
			<img src="image/monde/d3.png" alt="5@11"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:380;" />
		<img src="image/monde/c1.png" alt="5@11"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:380;" />
		<img src="image/monde/v.png" alt="5@11"  style="border:none;position:absolute;width:60px;height:40px;  left:535; top:380;" />
		<img src="image/monde/c5.png" alt="5@11" style="border:none;position:absolute;width:60px;height:40px;  left:535; top:380;" />
				<img src="image/monde/d4.png" alt="6@11"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:400;" />
		<img src="image/monde/v.png" alt="6@11"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:400;" />
		<img src="image/monde/v.png" alt="6@11"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:400;" />
		<img src="image/monde/v.png" alt="6@11" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:400;" />
				<img src="image/monde/d4.png" alt="7@11"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:420;" />
		<img src="image/monde/v.png" alt="7@11"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:420;" />
		<img src="image/monde/v.png" alt="7@11"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:420;" />
		<img src="image/monde/v.png" alt="7@11" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:420;" />
				<img src="image/monde/d4.png" alt="8@11"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:440;" />
		<img src="image/monde/v.png" alt="8@11"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:440;" />
		<img src="image/monde/v.png" alt="8@11"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:440;" />
		<img src="image/monde/v.png" alt="8@11" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:440;" />
				<img src="image/monde/d4.png" alt="9@11"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:460;" />
		<img src="image/monde/v.png" alt="9@11"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:460;" />
		<img src="image/monde/c4.png" alt="9@11"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:460;" />
		<img src="image/monde/v.png" alt="9@11" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:460;" />
				<img src="image/monde/d4.png" alt="10@11"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:480;" />
		<img src="image/monde/v.png" alt="10@11"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:480;" />
		<img src="image/monde/v.png" alt="10@11"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:480;" />
		<img src="image/monde/v.png" alt="10@11" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:480;" />
				<img src="image/monde/d4.png" alt="11@11"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:500;" />
		<img src="image/monde/v.png" alt="11@11"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:500;" />
		<img src="image/monde/c4.png" alt="11@11"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:500;" />
		<img src="image/monde/v.png" alt="11@11" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:500;" />
				<img src="image/monde/d4.png" alt="12@11"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:520;" />
		<img src="image/monde/v.png" alt="12@11"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:520;" />
		<img src="image/monde/v.png" alt="12@11"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:520;" />
		<img src="image/monde/v.png" alt="12@11" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:520;" />
				<img src="image/monde/d4.png" alt="13@11"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:540;" />
		<img src="image/monde/v.png" alt="13@11"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:540;" />
		<img src="image/monde/v.png" alt="13@11"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:540;" />
		<img src="image/monde/v.png" alt="13@11" style="border:none;position:absolute;width:60px;height:40px;  left:775; top:540;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:563.88888888889; top:348.88888888889;">12 </span>
			<img src="image/monde/d4.png" alt="5@12"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:360;" />
		<img src="image/monde/v.png" alt="5@12"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:360;" />
		<img src="image/monde/v.png" alt="5@12"  style="border:none;position:absolute;width:60px;height:40px;  left:565; top:360;" />
		<img src="image/monde/v.png" alt="5@12" style="border:none;position:absolute;width:60px;height:40px;  left:565; top:360;" />
				<img src="image/monde/d4.png" alt="6@12"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:380;" />
		<img src="image/monde/v.png" alt="6@12"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:380;" />
		<img src="image/monde/v.png" alt="6@12"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:380;" />
		<img src="image/monde/v.png" alt="6@12" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:380;" />
				<img src="image/monde/d4.png" alt="7@12"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:400;" />
		<img src="image/monde/v.png" alt="7@12"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:400;" />
		<img src="image/monde/v.png" alt="7@12"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:400;" />
		<img src="image/monde/v.png" alt="7@12" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:400;" />
				<img src="image/monde/d4.png" alt="8@12"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:420;" />
		<img src="image/monde/v.png" alt="8@12"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:420;" />
		<img src="image/monde/v.png" alt="8@12"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:420;" />
		<img src="image/monde/v.png" alt="8@12" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:420;" />
				<img src="image/monde/d4.png" alt="9@12"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:440;" />
		<img src="image/monde/v.png" alt="9@12"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:440;" />
		<img src="image/monde/v.png" alt="9@12"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:440;" />
		<img src="image/monde/v.png" alt="9@12" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:440;" />
				<img src="image/monde/d4.png" alt="10@12"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:460;" />
		<img src="image/monde/v.png" alt="10@12"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:460;" />
		<img src="image/monde/v.png" alt="10@12"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:460;" />
		<img src="image/monde/v.png" alt="10@12" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:460;" />
				<img src="image/monde/d4.png" alt="11@12"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:480;" />
		<img src="image/monde/v.png" alt="11@12"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:480;" />
		<img src="image/monde/v.png" alt="11@12"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:480;" />
		<img src="image/monde/v.png" alt="11@12" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:480;" />
				<img src="image/monde/d4.png" alt="12@12"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:500;" />
		<img src="image/monde/v.png" alt="12@12"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:500;" />
		<img src="image/monde/v.png" alt="12@12"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:500;" />
		<img src="image/monde/v.png" alt="12@12" style="border:none;position:absolute;width:60px;height:40px;  left:775; top:500;" />
				<img src="image/monde/d4.png" alt="13@12"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:520;" />
		<img src="image/monde/v.png" alt="13@12"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:520;" />
		<img src="image/monde/v.png" alt="13@12"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:520;" />
		<img src="image/monde/v.png" alt="13@12" style="border:none;position:absolute;width:60px;height:40px;  left:805; top:520;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:593.88888888889; top:328.88888888889;">13 </span>
			<img src="image/monde/d4.png" alt="5@13"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:340;" />
		<img src="image/monde/v.png" alt="5@13"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:340;" />
		<img src="image/monde/v.png" alt="5@13"  style="border:none;position:absolute;width:60px;height:40px;  left:595; top:340;" />
		<img src="image/monde/v.png" alt="5@13" style="border:none;position:absolute;width:60px;height:40px;  left:595; top:340;" />
				<img src="image/monde/d4.png" alt="6@13"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:360;" />
		<img src="image/monde/v.png" alt="6@13"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:360;" />
		<img src="image/monde/v.png" alt="6@13"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:360;" />
		<img src="image/monde/v.png" alt="6@13" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:360;" />
				<img src="image/monde/d4.png" alt="7@13"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:380;" />
		<img src="image/monde/v.png" alt="7@13"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:380;" />
		<img src="image/monde/v.png" alt="7@13"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:380;" />
		<img src="image/monde/c5.png" alt="7@13" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:380;" />
				<img src="image/monde/d4.png" alt="8@13"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:400;" />
		<img src="image/monde/v.png" alt="8@13"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:400;" />
		<img src="image/monde/v.png" alt="8@13"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:400;" />
		<img src="image/monde/v.png" alt="8@13" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:400;" />
				<img src="image/monde/d4.png" alt="9@13"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:420;" />
		<img src="image/monde/v.png" alt="9@13"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:420;" />
		<img src="image/monde/v.png" alt="9@13"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:420;" />
		<img src="image/monde/v.png" alt="9@13" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:420;" />
				<img src="image/monde/d4.png" alt="10@13"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:440;" />
		<img src="image/monde/v.png" alt="10@13"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:440;" />
		<img src="image/monde/v.png" alt="10@13"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:440;" />
		<img src="image/monde/v.png" alt="10@13" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:440;" />
				<img src="image/monde/d4.png" alt="11@13"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:460;" />
		<img src="image/monde/c2.png" alt="11@13"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:460;" />
		<img src="image/monde/c4.png" alt="11@13"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:460;" />
		<img src="image/monde/c1.png" alt="11@13" style="border:none;position:absolute;width:60px;height:40px;  left:775; top:460;" />
				<img src="image/monde/d4.png" alt="12@13"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:480;" />
		<img src="image/monde/v.png" alt="12@13"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:480;" />
		<img src="image/monde/v.png" alt="12@13"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:480;" />
		<img src="image/monde/v.png" alt="12@13" style="border:none;position:absolute;width:60px;height:40px;  left:805; top:480;" />
				<img src="image/monde/d4.png" alt="13@13"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:500;" />
		<img src="image/monde/v.png" alt="13@13"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:500;" />
		<img src="image/monde/v.png" alt="13@13"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:500;" />
		<img src="image/monde/v.png" alt="13@13" style="border:none;position:absolute;width:60px;height:40px;  left:835; top:500;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:623.88888888889; top:308.88888888889;">14 </span>
			<img src="image/monde/d4.png" alt="5@14"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:320;" />
		<img src="image/monde/v.png" alt="5@14"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:320;" />
		<img src="image/monde/v.png" alt="5@14"  style="border:none;position:absolute;width:60px;height:40px;  left:625; top:320;" />
		<img src="image/monde/v.png" alt="5@14" style="border:none;position:absolute;width:60px;height:40px;  left:625; top:320;" />
				<img src="image/monde/d4.png" alt="6@14"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:340;" />
		<img src="image/monde/v.png" alt="6@14"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:340;" />
		<img src="image/monde/v.png" alt="6@14"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:340;" />
		<img src="image/monde/v.png" alt="6@14" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:340;" />
				<img src="image/monde/d4.png" alt="7@14"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:360;" />
		<img src="image/monde/v.png" alt="7@14"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:360;" />
		<img src="image/monde/v.png" alt="7@14"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:360;" />
		<img src="image/monde/v.png" alt="7@14" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:360;" />
				<img src="image/monde/d4.png" alt="8@14"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:380;" />
		<img src="image/monde/v.png" alt="8@14"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:380;" />
		<img src="image/monde/v.png" alt="8@14"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:380;" />
		<img src="image/monde/v.png" alt="8@14" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:380;" />
				<img src="image/monde/d4.png" alt="9@14"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:400;" />
		<img src="image/monde/v.png" alt="9@14"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:400;" />
		<img src="image/monde/v.png" alt="9@14"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:400;" />
		<img src="image/monde/v.png" alt="9@14" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:400;" />
				<img src="image/monde/d4.png" alt="10@14"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:420;" />
		<img src="image/monde/v.png" alt="10@14"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:420;" />
		<img src="image/monde/v.png" alt="10@14"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:420;" />
		<img src="image/monde/v.png" alt="10@14" style="border:none;position:absolute;width:60px;height:40px;  left:775; top:420;" />
				<img src="image/monde/d4.png" alt="11@14"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:440;" />
		<img src="image/monde/c3.png" alt="11@14"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:440;" />
		<img src="image/monde/v.png" alt="11@14"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:440;" />
		<img src="image/monde/c1.png" alt="11@14" style="border:none;position:absolute;width:60px;height:40px;  left:805; top:440;" />
				<img src="image/monde/d4.png" alt="12@14"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:460;" />
		<img src="image/monde/v.png" alt="12@14"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:460;" />
		<img src="image/monde/v.png" alt="12@14"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:460;" />
		<img src="image/monde/v.png" alt="12@14" style="border:none;position:absolute;width:60px;height:40px;  left:835; top:460;" />
				<img src="image/monde/d3.png" alt="13@14"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:480;" />
		<img src="image/monde/v.png" alt="13@14"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:480;" />
		<img src="image/monde/v.png" alt="13@14"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:480;" />
		<img src="image/monde/v.png" alt="13@14" style="border:none;position:absolute;width:60px;height:40px;  left:865; top:480;" />
			<span style="font-size:14.666666666667px;border:none;position:absolute; left:653.88888888889; top:288.88888888889;">15 </span>
			<img src="image/monde/d3.png" alt="5@15"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:300;" />
		<img src="image/monde/c1.png" alt="5@15"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:300;" />
		<img src="image/monde/c3.png" alt="5@15"  style="border:none;position:absolute;width:60px;height:40px;  left:655; top:300;" />
		<img src="image/monde/c6.png" alt="5@15" style="border:none;position:absolute;width:60px;height:40px;  left:655; top:300;" />
				<img src="image/monde/d4.png" alt="6@15"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:320;" />
		<img src="image/monde/v.png" alt="6@15"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:320;" />
		<img src="image/monde/v.png" alt="6@15"  style="border:none;position:absolute;width:60px;height:40px;  left:685; top:320;" />
		<img src="image/monde/v.png" alt="6@15" style="border:none;position:absolute;width:60px;height:40px;  left:685; top:320;" />
				<img src="image/monde/d4.png" alt="7@15"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:340;" />
		<img src="image/monde/v.png" alt="7@15"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:340;" />
		<img src="image/monde/v.png" alt="7@15"  style="border:none;position:absolute;width:60px;height:40px;  left:715; top:340;" />
		<img src="image/monde/v.png" alt="7@15" style="border:none;position:absolute;width:60px;height:40px;  left:715; top:340;" />
				<img src="image/monde/d4.png" alt="8@15"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:360;" />
		<img src="image/monde/v.png" alt="8@15"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:360;" />
		<img src="image/monde/v.png" alt="8@15"  style="border:none;position:absolute;width:60px;height:40px;  left:745; top:360;" />
		<img src="image/monde/v.png" alt="8@15" style="border:none;position:absolute;width:60px;height:40px;  left:745; top:360;" />
				<img src="image/monde/d4.png" alt="9@15"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:380;" />
		<img src="image/monde/c2.png" alt="9@15"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:380;" />
		<img src="image/monde/c2.png" alt="9@15"  style="border:none;position:absolute;width:60px;height:40px;  left:775; top:380;" />
		<img src="image/monde/v.png" alt="9@15" style="border:none;position:absolute;width:60px;height:40px;  left:775; top:380;" />
				<img src="image/monde/d4.png" alt="10@15"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:400;" />
		<img src="image/monde/v.png" alt="10@15"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:400;" />
		<img src="image/monde/v.png" alt="10@15"  style="border:none;position:absolute;width:60px;height:40px;  left:805; top:400;" />
		<img src="image/monde/v.png" alt="10@15" style="border:none;position:absolute;width:60px;height:40px;  left:805; top:400;" />
				<img src="image/monde/d4.png" alt="11@15"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:420;" />
		<img src="image/monde/v.png" alt="11@15"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:420;" />
		<img src="image/monde/v.png" alt="11@15"  style="border:none;position:absolute;width:60px;height:40px;  left:835; top:420;" />
		<img src="image/monde/v.png" alt="11@15" style="border:none;position:absolute;width:60px;height:40px;  left:835; top:420;" />
				<img src="image/monde/d4.png" alt="12@15"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:440;" />
		<img src="image/monde/v.png" alt="12@15"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:440;" />
		<img src="image/monde/v.png" alt="12@15"  style="border:none;position:absolute;width:60px;height:40px;  left:865; top:440;" />
		<img src="image/monde/v.png" alt="12@15" style="border:none;position:absolute;width:60px;height:40px;  left:865; top:440;" />
				<img src="image/monde/d3.png" alt="13@15"  style="border:none;position:absolute;width:60px;height:40px;  left:895; top:460;" />
		<img src="image/monde/c1.png" alt="13@15"  style="border:none;position:absolute;width:60px;height:40px;  left:895; top:460;" />
		<img src="image/monde/c4.png" alt="13@15"  style="border:none;position:absolute;width:60px;height:40px;  left:895; top:460;" />
		<img src="image/monde/c6.png" alt="13@15" style="border:none;position:absolute;width:60px;height:40px;  left:895; top:460;" />
		</p>
<img  src="image/monde/carte.png" usemap="#carte" style="width:540px; height:380px; border:none;position:absolute;top:300px;left:415px;" />

Tu récupères tout ça, et tu écris tout ça, c'est énorme. Alors qu'au final quand tu te déplaces,tu ne fais que déplacer tes blocs et rajouter une ligne. Tu as deja tout.

T'as mal organisé ton jeu. Et si j'ai bien compris, tu ne connais pas spécialement le javascript..

Donc je te conseillerais d'apprendre le javascript, comprendre que tout les elements html sont accessibles en javascript et revoir la structure de ta map qui pour le moment est fait n'importe comment, généré barbarement par du php.

morkibut

13 janvier 2010 à 9:15:43

ok merci beaucoup je vois maintenant l'énormité de la chose...

Bon hé bien je vous remercie je vais réfléchir la dessus et travailler le javascript.

Encore merci et bonne journée

Golmote

13 janvier 2010 à 11:25:06

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page

morkibut

14 janvier 2010 à 8:57:40

je te remercie Golmote, mais pour le momment ce n'est pas résolu, mais en cours de résolutions.
J'aurai probablement besoin de poser d'autres questions, et je posterez les solutions que j'ai mise en place pour ceux que sa interresse.

A bientôt

morkibut

20 mars 2010 à 17:28:19

Bonjour a tous,
je reviens de puis le temps pour reposter un problème!

Alors cette fois-ci l'ajax est mieux utiliser, il recharge simplement les nouvelles case a afficher et plus la page entière.

Mais il y a toujours un souci. Je vous explique le fonctionnement du code :
On déplace les images déjà présentes et on charge la nouvelle ligne d'image.
Ici l'exemple: Exemple
donc pour faire simple, toutes les cases paires sont bleu et les impaires rouge (ou l'inverse ^^)
le code (javascript et html mélanger):

<script type="text/javascript">

function calcase(zone,zone_nouvelle) {
	var xhr = null;
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
	}
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById(zone).src=xhr.responseText; //Met la reponse dans la zone approprié.
		}
	};
	 //Envoie qu'elle est l'image que l'on attend pour cette nouvelle zone
	xhr.open("GET", "calculcase.php?zone="+zone_nouvelle, true);
	xhr.send(null);
}


//Déplace vers la droite
function droite()
{
	var x=document.getElementById('x').value;
	var y=document.getElementById('y').value;
	for(var i=0;i<=8;i++)
	{
		for(var j=0;j<=8;j++)
		{	
			zone=i+'@'+j;
			if(j!=8) //Décale les images deja présente
			{
				zone_nouvelle=i+'@'+(j*1+1);
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
			else
			{
				zone_nouvelle=(1*x+1*i)+'@'+(y*1+j*1+1);
				calcase(zone,zone_nouvelle); //Va chercher les nouvelles images
				document.getElementById(zone).title=zone_nouvelle;
			}
		}
	}
	document.getElementById('x').value=x;
	document.getElementById('y').value=(y*1+1);
}

//Déplace vers la gauche
function gauche()
{
	var x=document.getElementById('x').value;
	var y=document.getElementById('y').value;
	for(var i=0;i<=8;i++)
	{
		for(var j=8;j>=0;j--)
		{	
			zone=i+'@'+j;
			if(j!=0)
			{
				zone_nouvelle=i+'@'+(j*1-1);
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
			else
			{
				zone_nouvelle=(1*x+1*i)+'@'+(j*1+y*1-1);
				calcase(zone,zone_nouvelle);
				document.getElementById(zone).title=zone_nouvelle;
			}
		}
	}
	document.getElementById('x').value=x;
	document.getElementById('y').value=(y*1-1);
}


//Déplace vers le bas
function bas()
{
	var x=document.getElementById('x').value;
	var y=document.getElementById('y').value;
	for(var i=0;i<=8;i++)
	{
		for(var j=0;j<=8;j++)
		{	
			zone=i+'@'+j;
			if(i!=8)
			{
				zone_nouvelle=(i*1+1)+'@'+j;
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
			else
			{
				zone_nouvelle=(i*1+x*1+1)+'@'+(j*1+y*1);
				calcase(zone,zone_nouvelle);
				document.getElementById(zone).title=zone_nouvelle;
			}
		}
	}
	document.getElementById('x').value=(x*1+1);
	document.getElementById('y').value=y;
}

//Déplace vers le haut
function haut()
{
	var x=document.getElementById('x').value;
	var y=document.getElementById('y').value;
	for(var i=8;i>=0;i--)
	{
		for(var j=0;j<=8;j++)
		{	
			zone=i+'@'+j;
			if(i>0) 
			{
				zone_nouvelle=(i*1-1)+'@'+j;
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
			else
			{
				zone_nouvelle=(i*1+x*1-1)+'@'+(j*1+y*1);
				calcase(zone,zone_nouvelle); 
				document.getElementById(zone).title=zone_nouvelle;
			}
		}
	}
	document.getElementById('x').value=(x*1-1);
	document.getElementById('y').value=y;
}

</script>
<!-- Lien pour se déplacer sur la carte si dessous//-->
<a  href='#a' onclick="haut()" >Haut</a> | <a  href='#a' onclick="bas()" >Bas</a> | <a  href='#a' onclick="gauche()" >Gauche</a> | <a  href='#a' onclick="droite()" >Droite</a> <br />

<?php
$zone='0@0';

function coordonnees($zone)
{
	return $coordonnees = array ('x'=>preg_replace('#(.+)@(.+)#','$1',$zone),'y'=>preg_replace('#(.+)@(.+)#','$2',$zone));
}

$coordonnees=coordonnees($zone);
$x=$coordonnees['x'];
$y=$coordonnees['y'];
//Coordonnée de la case en haut a gauche
?>
<input id="x" type="text" name="x" value="<?php echo $x;?>" />
<input id="y" type="text" name="y" value="<?php echo $y;?>" /><br />

<?php
//Creation de la carte façon matriciel
$nbcase=9;
for ($i=0;$i<=$nbcase-1;$i++)
{
	
	for ($j=0;$j<=$nbcase-1;$j++)
	{
		$a=$i+$x;
		$b=$j+$y;
		if((($a+$b)%2)==0) $image="base.png"; //Si pair alors affiche image "base.png"
		else $image="nid.png";
		$num=($a)."@".($b);
		?>
		<img id="<?php echo $i.'@'.$j ?>" src="<?php echo $image; ?>"  title="<?php echo $num ?>" />
		<?php

	}
	echo '<br />';

}

et la page appeler par le javascript:

<?php
function coordonnees($zone)
{
	return $coordonnees = array ('a'=>preg_replace('#(.+)@(.+)#','$1',$zone),'z'=>preg_replace('#(.+)@(.+)#','$2',$zone));
}



$coordonnees=coordonnees($_GET['zone']); //Formatage des coordonnées
$a=$coordonnees['a'];
$z=$coordonnees['z'];

//Calcule qu'elle image il faut pour cette zone
if((($a+$z)%2)==0) $image="base.png";
else $image="nid.png";

echo $image;
?>

voili voilou, donc en testant, vous remarquerez que la dernière case nécessite quelques seconde pour arriver et que cela décale le reste si on clique plusieurs fois d'affilé...

auriez vous une solution car on rame vraiment la-dessus.

Merci beaucoup

morkibut

22 mars 2010 à 0:38:46

Personne n'a une idée ?? Ou une piste a suivre ??

merci d'avance !

morkibut

4 avril 2010 à 0:12:05

Need help s'il vous plaît.

Solar

4 avril 2010 à 14:39:52

je n'ai jamais eu à me poser ce genre de probleme, donc je sais pas si mon idée est la mieux...

Donc si j'ai bien compris, le probleme consiste a ce que si tu cliques plein de fois, les images juste chargées sont remplacer par un ancien clique, ou quelque chose du genre ? En gros, il y'aurai un entremelement des requetes AJAX qui affichent nimporte comment les images. Si jai bien compris.

Donc la solution pour moi consisterai par le biai d'un booleen a empecher toute action tant que la map n'est pas chargée correctement. Du style : je clique, si la-map-est-deja-en-chargement vaut true, il ne se passe rien, si la-map-est-deja-en-chargement vaut false, alors je lance ma requete ajax pour faire bouger la carte dans la direction choisis et je donne pour valeur true à la-map-est-deja-en-chargement.

De plus, j'ai lu vite fait sans essayer de comprendre ton code PHP, et jai vu ton commentaire : "//Calcule qu'elle image il faut pour cette zone". Par habitude, pour eviter d'encombrer le serveur trop longtemps, je te conseil de faire tous les calculs que tu peux faire coté client. Bon, apres j'ai pas vraiment regarder, donc ca se trouve il est peut etre plus rapide de faire comme tu as fait.

tMd

4 avril 2010 à 19:06:10

le problème c'est que tu lances 9 requêtes quand on clique alors qu'une seule pourrait suffire.

morkibut

10 avril 2010 à 16:09:54

Hum, l'idée du booléen ne convient pas car le but est de garder la rapidité lors du déplacement de la carte!!

Mais par contre je comprend pour les 9 requêtes, je vais donc recherché de ce coté la, merci beaucoup je vous tient au courant de mon avancement!

xavierm02

10 avril 2010 à 16:19:21

Tu stocke le x et le x actuel dans des variables JS.
Et quand on bouge, tu demandes que la ligne que tu rajoutes et tu essaye de récupérer une chaîne avec les types d'images (un numéro, pas l'url de l'image...) que tu split et tu loop sur l'array obtenu pour ajouter les éléments un à un.

morkibut

11 avril 2010 à 9:51:19

Je vous remercie a tous j'ai réussi a faire se que je voulais, il me reste plus qu'a l'adapter un peu!!

Encore merci de votre aide !

Dès que j'ai fini le code complet je le poste pour ceux que sa aiderai.

Encore un grand merci a tous !