<?php



echo'<h1>Map isométrique</h1>';



echo'<div id="carte">';



//On définit le nombre de lignes et de colonnes.

$nbColonnes = 5;

$nbLignes = 5;



//On définit l'image qui s'affichera comme fond dans la case.

$img_fond_carte = 'herbe_iso';



// On définit les variables pour les boucles.

$compteurX = 0;

$compteurY = 0;



//On boucle pour afficher la carte.

while($compteurY < $nbColonnes) //Cette boucle représente les colonnes.

{

    while($compteurX < $nbLignes) //Celle-ci les lignes.

    {

        $decalage = ($nbLignes - 1) * 42; //Pour éviter d'avoir des margin-left négatifs.

        $posX = $decalage + (($compteurY - $compteurX) * 42);

        $posY = ($compteurY + $compteurX) / 2 * 42;

            

        echo'<div title="'.$compteurX.';'.$compteurY.'" style="width:85px; height:42px; 

position:absolute; margin-top:'.$posY.'px; margin-left:'.$posX.'px; background-image:url(\''.$img_fond_carte.'.png\'); float:left;">';

        echo $compteurX.';'.$compteurY;

        echo'</div>';

        

        $compteurX++;

    }

    

    $compteurY++;

    $compteurX = 0; //Nouvelle colonne,  on revient donc au début (ici 0).

}



echo'</div>';



?>

<?php



echo'<h1>Map isométrique</h1>';



echo'<div id="carte">';



//On définit le nombre de lignes et de colonnes.

$nbColonnes = 5;

$nbLignes = 5;



//On définit les images qui s'afficheront.

$img_fond_carte = 'herbe_iso';

$img_perso = 'perso';



$decalage = ($nbLignes - 1) * 42; //Pour éviter d'avoir des margin-left négatifs.



// On définit les variables pour les boucles.

$compteurX = 0;

$compteurY = 0;





//On boucle pour afficher la carte.

while($compteurY < $nbColonnes) //Cette boucle représente les colonnes.

{

    while($compteurX < $nbLignes) //Celle-ci les lignes.

    {

        $posX = $decalage + (($compteurY - $compteurX) * 42);

        $posY = ($compteurY + $compteurX) / 2 * 42;

            

        //Affichage d'une case :

        echo'<div title="'.$compteurX.';'.$compteurY.'" style="padding-left:10px; width:85px; height:42px; position:absolute; 

margin-top:'.$posY.'px; margin-left:'.$posX.'px; background-image:url(\''.$img_fond_carte.'.gif\'); float:left; text-align:center; 

padding-bottom:10px; background-repeat:no-repeat;"></div>';

        

        //Je rajoute des valeurs pour bien centrer les personnages dans les cases.

        $posXPerso = $posX + 30;

        $posYPerso = $posY + 5;

            

        //Affichage d'un personnage :

        echo'<img src="'.$img_perso.'.png" style="position:absolute; margin-top:'.$posYPerso.'px; margin-left:'.$posXPerso.'px; 

border:none;" alt="" />';

        

        $compteurX++;

    }

    

    $compteurY++;

    $compteurX = 0; //Nouvelle colonne,  on revient donc au début (ici 0).

}



echo'</div>';



?>