Un plateau de jeu hexagonal

Un exemple du rendu final :

• Savoir créer une carte (voir Plateau de jeu)
• Table MySQL

Elle contient les x et y, ainsi que le terrain correspond a la case

CREATE TABLE `carte` (
  `idcarte` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `x` int(10) UNSIGNED DEFAULT NULL,
  `y` int(10) UNSIGNED DEFAULT NULL,
  `idterrain` int(10) UNSIGNED NOT NULL DEFAULT '0',
  `vision` int(10) UNSIGNED DEFAULT '5',
  PRIMARY KEY  (`idcarte`),
  KEY `carte_FKIndex1` (`idcentrale`),
  KEY `carte_FKIndex2` (`idpc`),
  KEY `carte_FKIndex3` (`idterrain`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1551 ; 

Elle est basique pour contenir juste les coordonées X et Y des perso

CREATE TABLE `perso_info` (
  `idperso` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `x` int(10) UNSIGNED DEFAULT '5000',
  `y` int(10) UNSIGNED DEFAULT '5000',
  PRIMARY KEY  (`idperso`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Le script va générer la carte, il est tout de même nécessaire d'avoir les images des terrains.

<?php
 
$sql = query("SELECT * FROM perso WHERE idperso='$idperso'"); //Récupération des données du personnage
$perso = mysql_fetch_assoc($sql);
$sql = query("SELECT * FROM carte WHERE x='".$perso['x']."' AND y='".$perso['y']."'"); //Récupération des données du terrain
$terrain = mysql_fetch_assoc($sql);
 
// On définit le tableau en fonction de la vision
$x_min = $perso['x']-$perso['vision'];
$x_max = $perso['x']+$perso['vision'];
$y_min = $perso['y']-$perso['vision'];
$y_max= $perso['y']+$perso['vision'];
 
// On récupère les données 'joueurs' des environs
$result = query("SELECT * FROM perso WHERE x BETWEEN '$x_min' AND '$x_max' AND y BETWEEN '$y_min' AND '$y_max'") or die(mysql_error());
 
// On va stocké les info de chaque joueur dans un array
while ( $data = mysql_fetch_assoc($result)) {
        $joueur[$data['x']][$data['y']] = array('x'=>$data['x'],'y'=>$data['y'],'idperso'=>$data['idperso']);
        }
 
$width=80; // Largeur de l'image des terrains qui permettra de décaler les images
$curent_y = -5000;
 
// Petit calcul pour ne pas déformer la map selon le y de base/référence lors de la génération
if ($y_min%2 == 0) {
    $y = 0;
}else { $y = 1; }
 
$query = query("SELECT * FROM carte WHERE x BETWEEN '$x_min' AND '$x_max' AND y BETWEEN '$y_min' AND '$y_max' ORDER BY y,x");
 
// On génére la map
while($carte = mysql_fetch_assoc($query)) {
    if ($curent_y!=$carte['y']) { // Nouvelle ligne
        $x=0;
        $y++;
        $curent_y = $carte['y'];
    }
    $x++;
 
    // Calcul pour savoir si on décale ou pas les cases d'une ligne
    if ( ($y%2) == 1) { // Pair
        $iX=($x*80)-40;
    }else {
         $iX= ($x*80) + ($width/2)-40;
    }
    $iY = ($y*60 )-80;
 
    $var_carte .= '<div class="case" style="top:'.$iY.'px;left:'.$iX.'px;';
    $var_carte .=  'background-image: url(\'images/'.$carte['idterrain'].'_iso.png\');">';
 
// <!-- POUR LE DEBUGGAGE AFFICHAGE DES x/y DANS LES CASES 
//  $var_carte .= "<br />$x_pos/$y_pos";
//  FIN DEBUGGAGE -->
 
    if ( isset($joueur[$carte['x']][$carte['y']])) { 
        // la prescence d'un joueur est détecté sur cette case
        // Affichage des informations du joueur dans la case
   }
 
    $var_carte .=  '</div>';
 
} // fin While
 
echo $var_carte;
 
?>

Il sera bien sur adapté pour chaque utilisation, mais le travail n'est pas encore fini.
Pour le moment, la carte s'affiche bien. Mais elle est en haut de votre écran et ne bouge plus. Il faut bien comprendre maintenant ce qui suit. Cela vous permettra de positionner le contenu ( des images, des textes,.. et même des cartes ) où vous le souhaitez.
En CSS, la position absolute prend pour repere ( 0;0 ) le haut de votre page

Notre but va être de fixer le repère que nous souhaitons, à l'endroit qui nous intéresse. Pour cela, on va créer une division (div) qui encercle la carte.

<div id=“carte”>
<!– On génére la carte hexa –>
</div>

Pour les cases de la carte, on va les positionner de façon absolute.
width et height sont respectivement la largeur et la hauteur de vos images terrains.

.case{
    position:absolute;
    width: 80px; 
    height: 100px;
    text-align: center;
    background-position: bottom;
    background-repeat: no-repeat;
    margin-left:0px;
    margin-top:0px;
}

Pour le div carte, on va le mettre en position relative. Cela indique qu'il sera la réference en x;y de touts objets en position absolue qu'il contient.

div#carte {
    position:relative;
    padding-bottom:40em;
}

padding-bottom:40em;, c'est quoi ce code moche ?
En faite, on va imposer une taille minimum a notre div carte qui par exemple sur mon jeu à un fond rouge.