23-09-2009, 08:25 PM
Dans un premier temps, il faut définir quel type de carte tu veux, la forme de tes cases, leurs dimensions, et ce que tu veux que ta carte soit possible de faire(interaction avec le joueurs par exemple).
Ensuite il faut trouver l'algorithme pour placer tes cases, pour une cartes à case carrée en 2D simple, c'est facile, dès qu'on veux faire de l'isométrie ça se corse, voici mon code permettant de généré une map "vierge" de 6*6cases:
J'ai pris quelques précautions à savoir: chaque tuiles est dépendante des autres(je n'ai pas un div par valeur de X et dans chacun de ces div, 6div pour la valeur de Y), ainsi je peux bouger librement une case comme bon me sembles sans altérer le comportement des autres, ensuite je génère un code propre et régulier html, à savoir:Ensuite il faut trouver l'algorithme pour placer tes cases, pour une cartes à case carrée en 2D simple, c'est facile, dès qu'on veux faire de l'isométrie ça se corse, voici mon code permettant de généré une map "vierge" de 6*6cases:
Code PHP :
<?php
for($y = 0; $y < 6; $y++) {
for($x = 0; $x < 6; $x++) {
$position_top = $x*9 + $y*32;
$position_left = $x*64 + $y*16;
echo "<div class=\"tuile\" id=\"".$x.";".$y."\" style=\"top:".$position_top."px; left:".$position_left."px;\"></div>\r";
}
}
?>Code :
<div class="tuile" id="1;0" style="top:9px; left:64px;"></div>
<div class="tuile" id="2;0" style="top:18px; left:128px;"></div>
<div class="tuile" id="3;0" style="top:27px; left:192px;"></div>
<div class="tuile" id="4;0" style="top:36px; left:256px;"></div>
[...]![[Image: apercumap_u1253730216.png]](http://upload.jeuweb.org/uploaded/apercumap_u1253730216.png)
Maintenant on pars sur de bonne base: on a une carte avec autant de case que l'on veux, avec les positions déjà toute prédéfinie, il suffis juste par des fonction ajax de changer ces images par l'image des tuiles que l'on veux voir à leur place(on rajoutes simplement un <img src="" /> dans le div pour mon cas)