Comme tu le sais déjà, tout le jeu est basé sur un système de superposition de grilles, il y a une grille pour les décors, une grille pour le curseur et une grille pour afficher les unités.
Grille
Lancement d'une partie
Dès qu’une partie est complète et validée par chaque joueur, alors le serveur lance la requête response_request_valide_partie() auprès de chaque joueur de la partie, et la fonction de construction de la map est lancée.
response_launch_partie(params){
if( params.result == true ){
$("#menu .step").hide();
$("#wrapper_map").show(300);
//lancement de la construction de la carte
this.construct_map(params);
}
}Grille des unitées
Cette fonction de construction de map va lancer deux méthodes, la première méthode, construct_map construit la map telle qu’expliqué dans le mapping, et la seconde, construct_unit_grid est la méthode dans laquelle je vais pouvoir afficher des unités.
construct_map(params){
this.construct_grid(params.map.map);
this.construct_unit_grid(params.map.map);
}La construction de la grille des unités est faite de la même manière que les autres grilles, aucune surprise pour toi !
construct_unit_grid(map){
let zindex = 0;
//ajout de la grid des unités
$("#grid").append('<div id="map_units"></div>');
map.forEach( (line, index_line) => {
$("#map_units").append('<div class="tr">');
line.forEach( (col, index_col) => {
$(`#map_units .tr:eq(${index_line})`).append(`<div class="td" style="z-index:${zindex++};" data-x="${index_col}" data-y="${index_line}"><div class="bg"></div></div>`);
});
$("#map_units").append('</div>');
});
}Tank
C’est partie pour ajouter une unité sur cette nouvelle grille ! D’abord j’ai besoin d’un visuel, donc je me suis amusé à réaliser un nouveau sprite de tank.
Pour gérer les couleurs au niveau des sprites, j’ai ajouté une classe spéciale suivi de l’index du joueur, par exemple owner_0 correspondra toujours aux unités rouges, owner_1 correspondra aux unités bleues, etc..
#map_units{
.td{
.bg{
width: $width_cellule;
height: $height_cellule;
position: absolute;
bottom: 0;
left: 0;
}
&.infanterie{
&.owner_0 .bg{
background: url("../../image/infanterie_0.gif") transparent center center no-repeat;
}
&.owner_1 .bg{
background: url("../../image/infanterie_1.gif") transparent center center no-repeat;
}
}
&.tank{
&.owner_0 .bg{
background: url("../../image/tank_0.gif") transparent center center no-repeat;
}
&.owner_1 .bg{
background: url("../../image/tank_1.gif") transparent center center no-repeat;
}
}
&.infanterie, &.tank{
.bg{
background-size: 128px 32px !important;
background-position: ($factor_cellule * -3 * 1px) 0px !important;
}
}
}
}Pour le moment, j’ajoute manuellement les classes avec Firebug pour vérifier que ça marche, et ça marche super bien ! Enfin c’est le résultat que j’attendais, car j’ai pas encore de système d’achat et de placement d’unité, ce sera sans doute l’une des prochaines étapes.
16/07/2016