[Résolu] [Aide] Déplacement d'une carte en Ajax par morkibut - page 1

(Edité une fois car j'ai cliqué sur ce qu'il fallait pas, désolé )

Bonjour à vous,
j'ai déjà posté sur le forum du site du zéro pour ce code qui a beaucoup évolué et presque prés à fonctionner correctement mais il y a encore quelques bugs que j'essaye de corriger.

Mon But :
Créer une carte pour un jeu par navigateur. Des liens Haut, Bas, Gauche et Droite permettent de se déplacer sur la carte sans recharger la page.

Mon Code :
Le code est simple, la carte est généré grâce au PHP la première fois, lors du déplacement via un lien, les images et les titres sont déplacés.Seul, la nouvelle ligne est chargée grâce à L'Ajax.
Sur la carte deux images sont chargées, elle servent pour vérifier que le code marche car un grand B est sur un case dite pair et le grand N est sur une case dite impair.

Le déroulement est le suivant :
1-On calcule la nouvelle ligne et on la met dans la balise div d'id "blabla"
2-En fonction de la direction on déplace les images et les titres.
3-On charge ensuite la nouvelle ligne sur la carte.

<script type="text/javascript">
var test=true;

function calcase(direction) {

	var xhr = null;
	var x=document.getElementById('x').value;
	var y=document.getElementById('y').value;
	var zone=x+'@'+y;
	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("blabla").innerHTML=xhr.responseText; //Met la reponse dans la zone approprié.*
			if(direction==1) haut(x,y);
			else if(direction==2) bas(x,y);
			else if(direction==3) gauche(x,y);
			else if(direction==4) droite(x,y);
		}
	};
	 //Envoie qu'elle est l'image que l'on attend pour cette nouvelle zone
	xhr.open("GET", "calculcase.php?zone="+zone+"&dir="+direction, true);
	xhr.send(null);
}


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

//Déplace vers la gauche
function gauche(x,y)
{

	for(var i=0;i<=8;i++)
	{
		for(var j=8;j>=0;j--)
		{	
			zone=j+'@'+i;
			if(j!=0)
			{
				zone_nouvelle=(j*1-1)+'@'+i;
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
			else
			{
				zone_nouvelle='nouvellezone'+i;
				document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
				document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;
			}
		}
	}
	document.getElementById('x').value=(x*1-1);
	document.getElementById('y').value=y;
}



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






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



</script>
<!-- Lien pour se déplacer sur la carte si dessous//-->


<?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 />
<a  href='#a' onclick="calcase(1)" >Haut</a> | <a  href='#a' onclick="calcase(2)" >Bas</a> | <a  href='#a' onclick="calcase(3)" >Gauche</a> | <a  href='#a' onclick="calcase(4)" >Droite</a> <br />
<div id="blabla"></div>
<br />
<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=$j+$x;
		$b=$i+$y;
		if((($a+$b)%2)==0) $image="base.png"; //Si pair alors affiche image "base.png"
		else $image="nid.png";
		$num='X : '.$a.' | Y : '.$b;
		?>
		<img id="<?php echo $j.'@'.$i ?>" src="<?php echo $image; ?>"  title="<?php echo $num ?>" />
		<?php
	}
	echo '<br />';

}

?>

Le page charger par l'ajax :

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


$direction=$_GET['dir'];
$coordonnees=coordonnees($_GET['zone']); //Formatage des coordonnées
$x=$coordonnees['x'];
$y=$coordonnees['y'];

if($direction<=2)
{
	if($direction==1) $y-=1;
	elseif($direction==2) $y+=9;
	for($i=0;$i<=8;$i++)
	{
		if((($x+($y+$i))%2)==0) $image="base.png";
		else $image="nid.png";
		$num='X : '.$x.' | Y : '.($y+$i);
		?>
		<img id="<?php echo 'nouvellezone'.$i; ?>" title="<?php echo $num; ?>" src="<?php echo $image; ?>" />
		<?php
	}
}
else
{
	if($direction==3) $x-=1;
	elseif($direction==4) $x+=9;
	for($i=0;$i<=8;$i++)
	{
		if(((($y+$i)+$x)%2)==0) $image="base.png";
		else $image="nid.png";
		$num='X : '.$x.' | Y : '.($y+$i);
		?>
		<img   id="<?php echo 'nouvellezone'.$i; ?>" title="<?php echo $num ?>" src="<?php echo $image; ?>" />		<?php
	}
}
//style="display : none;" 
?>

Mon Problème :
Quand on clique sur les liens le programme marche mais lorsque le serveur "lague", la fonction qui décale est appelée mais les nouvelles lignes ne sont pas chargées.

Mon idée pour corriger :
Il faudrait que quand le serveur "lague", il ne rappelle pas la fonction. Pour ça, un booléen pourrait bloquer tant la fonction n'a pas finit d'être calculée.

Mes Questions :
Pensez-vous que ça corrigera le problème ?
Vous comment feriez vous pour corriger le problème ?

Merci de votre réponse.
Si vous avez des questions n'hésité pas.
De plus le code est mis sur internet à l'adresse suivante : ICI

Personne n'a d'idée

?
Quand je "reteste", effectivement le bug vient quand le serveur n'arrive plus à suivre le clic de l'utilisateur.

Quand le serveur bloque, il calcule la prochaine ligne et décale la carte. Ensuite au lieu de calculer la nouvelle ligne, il fait une déplacement ce qui copie la même ligne ( on le voit bien avec le title de l'image ).

Mon but c'est d'éviter que la fonction soit appelée si celle ci n'a pas finit ( calcul + déplacement ).
Mais mes connaissances en Ajax ne sont pas assez grandes donc je tourne et retourne le problème sans vraiment savoir si je peux le corriger ( à part avoir un super serveur garantie 0% lag

)

Si vous avez d'autres idées, elles sont les bienvenues.

Bonne journée à tous

APRES EDITION :

Voila j'ai une bonne nouvelle, je crois avoir réussi à régler mon problème

!
Pour éviter de faire de la compensation de lag d'un serveur, j'ai tout bêtement mis la fonction qui exécute l'ajax de façon synchrone.
Un petit true qui devient false et ça change tout !

Mon problème est résolu

!
Merci à ceux qui m'ont lu.

morkibut

6 juin 2010 à 13:27:09

Golmote

6 juin 2010 à 16:14:41

Je ne comprends pas à quoi te sert ton div blabla ? o_O

6 juin 2010 à 16:45:02

Citation : Golmote

Je ne comprends pas à quoi te sert ton div blabla ?

La balise div blabla sert insérer la nouvelle ligne ( qui est calculée ) avant de s'en servir pour décaler la carte.

6 juin 2010 à 17:00:39

Je ne vois pas où tu t'en sers pour le décalage ?

6 juin 2010 à 18:21:55

Je m'en sert dans les fonctions haut, bas, gauche et droite.
Dans la boucle qui charge la nouvelle ligne on a :

zone_nouvelle='nouvellezone'+i;
document.getElementById(zone).src=document.getElementById(zone_nouvelle).src;
document.getElementById(zone).title=document.getElementById(zone_nouvelle).title;

Cette partie la viens de la page php charger par l'ajax :

<img id="<?php echo 'nouvellezone'.$i; ?>" title="<?php echo $num; ?>" src="<?php echo $image; ?>" />

7 juin 2010 à 4:10:32

Je ne vois toujours pas où la div "blabla" est utilisée... :euh:

7 juin 2010 à 8:27:31

La balise div d'id "blabla" est dans le code entre les liens et la carte.

<input id="x" type="text" name="x" value="<?php echo $x;?>" />
<input id="y" type="text" name="y" value="<?php echo $y;?>" /><br />
<a  href='#a' onclick="calcase(1)" >Haut</a> | <a  href='#a' onclick="calcase(2)" >Bas</a> | <a  href='#a' onclick="calcase(3)" >Gauche</a> | <a  href='#a' onclick="calcase(4)" >Droite</a> <br />
<div id="blabla"></div>
<br />
<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=$j+$x;
		$b=$i+$y;
		if((($a+$b)%2)==0) $image="base.png"; //Si pair alors affiche image "base.png"
		else $image="nid.png";
		$num='X : '.$a.' | Y : '.$b;
		?>
		<img id="<?php echo $j.'@'.$i ?>" src="<?php echo $image; ?>"  title="<?php echo $num ?>" />
		<?php
	}
	echo '<br />';

}

?>

Quand tu regardes au lien donné. Quand un utilisateur clique sur un lien, une ligne apparait, c'est la ligne chargée par l'ajax mis dans ce div d'id "blabla".

8 juin 2010 à 14:51:52

[Aide] Déplacement d'une carte en Ajax

[Aide] Déplacement d'une carte en Ajax

Supprimer

Modérer

Signaler le message aux modérateurs