C'est bon, j'ai résolu mon problème !!
Merci X-ZoD pour la précision, j'ai rectifié aussi.
Voici donc le code entièrement en PHP pour faire bouger son personnage sur une map :
Merci X-ZoD pour la précision, j'ai rectifié aussi.
Voici donc le code entièrement en PHP pour faire bouger son personnage sur une map :
Code PHP :
<?
$longueur_herbe = 54; // longueur image sol
$largeur_herbe = 27; // largeur image sol
$src_img_herbe = 'maps/carreau_iso_herbe_grand.png'; // url image sol
$longueur_perso = 21; // longueur image perso
$largeur_perso = 41; // largeur image perso
$src_img_perso = 'maps/perso.png'; // url image perso
$margin_left_base = 500; // margin-left de la 1ere image sol
$margin_top_base = 20; // margin-top de la 1ere image sol
$margin_left_perso_base = $margin_left_base + ($longueur_perso)*2; // margin-left de base de l'image du perso
$margin_top_perso_base = ceil($margin_top_base /2); // margin-top de base de l'image du perso
$ligne = 20; // nombre de lignes voulues pour la map
$colonne = 20 ;// nombre de colonnes
echo '<div>';
$ligne_actuel = 1;
$colonne_actuel = 1;
while ($colonne != $colonne_actuel - 1)
{
$margin_left = $margin_left_base;
$margin_top = $margin_top_base;
while ($ligne != $ligne_actuel - 1)
{
$margin_left += ceil($longueur_herbe/2);
$margin_top += ceil($largeur_herbe/2);
echo '<a href="?p='.$colonne_actuel.':'.$ligne_actuel.'&mgleft='.$margin_left.'&mgtop='.$margin_top.' ">
// Création de 2 variables mgleft et mgtop, transmises par méthode GET,
// contenant le margin-left et le margin-top de chaque carré de sol
// Ici, la plus grande ligne du premier code, je ne l\'ai pas modifiée.
</a>';
$ligne_actuel++;
if (isset($_GET['mgleft'])) //si mgleft existe (donc mgtop existe aussi)
{
$px = $_GET['mgleft']; // position X
$py = $_GET['mgtop']; // position Y
$margin_left_perso_base = $px + $longueur_herbe/2 - $longueur_perso /2; // la bonne formule !! ^^
$margin_top_perso_base = $py + $largeur_herbe/2 - $largeur_perso; // ici aussi ! le personnage est centré au milieu de la case voulue.
}
}
$margin_left_base -= ceil($longueur_herbe/2);
$margin_top_base += ceil($largeur_herbe/2);
$ligne_actuel = 1;
$colonne_actuel++;
}
echo '<div style="margin-left:'.$margin_left_perso_base.'px;
margin-top:'.$margin_top_perso_base.'px;
float:left; position:absolute; z-index:100;">';
echo '<img src="'.$src_img_perso.'">';
echo '</div>';
echo '</div>';
?>
Il demeure néanmoins un problème. Chaque image est en fait un rectangle, et chaque rectangle se chevauche, ce qui fait que lorsque l'on clique sur le bas
d'un losange on se retrouve soit à droite soit à gauche... Quelqu'un pourrait-il m'expliquer comment faire pour régler ce problème ?
Au fait merci beaucoup X-ZoD pour ces tutos !! Il sont parfaits ! Très bien expliqués, et surtout, ils fonctionnent !! ^^