Carte pour un rpg en php, déplacement via javascript

Bonjour,

je suis en train de créer un rpg en php, et j'ai un petit problème. Je voudrais que le personnage se déplace instantanément sur la carte avec un petit script js. Un peu à la manière d'un tchat ajax ou l'on affiche le texte avant de l'entrer dans la base de donnée.

Voici le script de la carte (il fonctionne) :

Code:

$mapquery = mysql_query(sprintf("SELECT id, size_x, size_y  FROM %s_map WHERE id='%d' LIMIT 1", $mysql->pref, mysql_real_escape_string($userrow['map'])));
$maprow = mysql_fetch_assoc($mapquery);

$x_start = -$maprow['size_x'];
$x_end = $maprow['size_x'];
$y_start = -$maprow['size_y'];
$y_end = $maprow['size_y'];

$elementsquery = mysql_query(sprintf("SELECT type, avatar, id_element, latitude, longitude FROM %s_map_elements WHERE latitude <= %d AND latitude >= %d AND longitude <= %d AND longitude >= %d AND map='%d'", $mysql->pref, mysql_real_escape_string($y_end), mysql_real_escape_string($y_start), mysql_real_escape_string($x_end), mysql_real_escape_string($x_start), mysql_real_escape_string($maprow['id'])));

while($elementsrow = mysql_fetch_assoc($elementsquery) ) {	

	$block[$elementsrow['latitude']][$elementsrow['longitude']] = 1;
	
}

$debutx = $x_start;

$width = 64*$maprow['size_x']+32;
$height = 64*$maprow['size_y']+32;

$map ='<div style="margin:auto; width:'.$width.'px">';

while($y_end >= $y_start) {
	
	$map .='<div style="height:32px">';
	
	while($x_start <= $x_end) {
		
		//bouton pour se déplacer.
		$right =(empty($block[$userrow['latitude']][$userrow['longitude']+1]) && $x_start==$userrow['longitude']+1 && $y_end==$userrow['latitude'])? '<input name="right" type="submit" onclick="?">' : null;
		
		$player =($x_start==$userrow['longitude'] && $y_end==$userrow['latitude'])? '<img src="images/avatars/carte/'.$userrow['avatar'].'.gif" alt="">' : null;
		
		$map .='<div class="map">'.$player.$right.'</div>';	
		
		$x_start++;
	}
	
	$map .='</div>';

	$x_start = $debutx;
	$y_end--;
}

$map .='</div>';

echo $map;

ce qui donne ceci :



Le bouton pour se déplacer est ceci :

Code:

$right =(empty($block[$userrow['latitude']][$userrow['longitude']+1]) && $x_start==$userrow['longitude']+1 && $y_end==$userrow['latitude'])? '<input name="right" type="submit" onclick="?">' : null;

IL faudrait donc que lorsque l'on clique sur ce bouton, le personnage se déplace instantanément sur la carte.

Le script js pour un t'chat ajax est comme ca :

Code:

function submit(page)
{
var xhr = getXMLHttpRequest();

var content = encodeURIComponent(document.getElementById('content').value);
document.getElementById('content').value = "";
 
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById(page).innerHTML = xhr.responseText;
        }
};
 
xhr.open("POST", "?do="+page, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("content="+content);

} 

Dans ce code on affiche dans le HTML avant de l'entrer dans la base de donnée, soit un temps de réponse quasi nul. Je voudrais reprendre le même principe pour la carte.

Mais comment ?

Pouvez vous m'aider ?

Merci