bha vie -_-
c'est ca ... pkoi tu pourai deplacer la carte et pas le joueur ?
dark vengeur j'aime bien ta carte ... elle fait plutot realiste .. j'ai faiili en etre jaloux mais je me susi rendu compte que c'etait pas le meme univers
heu po trop non .. j'ai deja trop de taff
je decode un code soruce par semaine
Salut tout le monde !
Voilà, j'ai repris le code de dark vengeur, utilisant uniquement le php pour générer une map, et, j'ai essayé de l'améliorer un petit peu (j'ai amélioré un petit peu la clarté, en mettant toutes les valeurs dans des variables). Bref, j'ai essayé d'introduire le 2nd tuto dedans, pour pouvoir se déplacer sur la map, et j'ai essayé de traficoter le javascript, mais je n'y suis pas trop arrivé (je n'ai presque aucune connaissance dans ce domaine
).
J'ai donc décidé de tout faire en php. Cela à plutôt bien marché, seulement, il y a un problème, les coordonnées du personnage se changent bien, mais je n'arrive pas à trouver une formule permettant de mettre le perso sur la map, au bon endroit, et sur la bonne "case".
Voici le code, en espérant que vous pourrez trouver la solution. Je suis presque sûr qu'elle est évidente, mais voilà, je sèche !
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;
if (isset($_GET['px'])) //si position X existe (donc position Y existe aussi)
{
$px = $_GET['px']; // position X
$py = $_GET['py']; // position Y
$margin_left_perso_base = $px* $longueur_herbe; // la je sèche !!!!
$margin_top_perso_base = $py* $largeur_herbe; // ici aussi !!!
}
while ($ligne != $ligne_actuel - 1)
{
$margin_left += ceil($longueur_herbe/2);
$margin_top += ceil($largeur_herbe/2);
echo '<a href="?px='.$colonne_actuel.'&py='.$ligne_actuel.'">
<img border="0" id="sol" src="'.$src_img_herbe.'" title='.$colonne_actuel.':'.$ligne_actuel.'
alt='.$colonne_actuel.':'.$ligne_actuel.' style="margin-left:' . $margin_left . 'px; margin-top:' . $margin_top . 'px;
float:left; position:absolute; z-index:10;">
</a>';
$ligne_actuel++;
}
$margin_left_base -= ceil($longueur_herbe/2);
$margin_top_base += ceil($largeur_herbe/2);
$ligne_actuel = 1;
$colonne_actuel++;
}
echo '<img src="'.$src_img_perso.'"
style="margin-left:'.$margin_left_perso_base.'px;
margin-top:'.$margin_top_perso_base.'px;
float:left; position:absolute; z-index:100;>';
echo '</div>';
?>
PS: Désolé pour la longueur de la ligne !
J'ai le même problème,
je n'ai aucune idée sur comment placer le perso au bonne endroit :s
le perso n'est pas dans une case
le perso a lui meme est une div au dessus de la map
ses coordonées dependent de celle de la case au dessus de laquelle elle devrai etre
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 :
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 !!
Julien_k a écrit :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 ?
X-Zod va le dire dans son prochain tuto
en plus je l'ai déja demander sur un autre sujet
allez jte donne une piste :
http://www.startyourdev.com/HTML/Balise-AREA.html
Voila
apres cherche un peu tout seul ou attends le prochain tuto lol
