Pas de belle carte sans cours d'eau. Non seulement ils sont un embellissement graphique non négligeable, mais ils aident à se repérer et peuvent également être très utiles : La présence d'un fleuve a toujours été primordiale dans l'établissement de nouvelles villes.
Des cours d'eaux meublent tout de suite une carte. |
Les cours d'eau sont affichés après le terrain de base. Eux aussi sont directement dans le javascript, pour la même raison que le terrain :
fleuve = new Array("1*3","2*3","3*3","3*4","5*4","5*5","6*5","7*5","8*5","8*6","8*7","8*8","8*9","9*9",
"10*9","3*10","3*9","4*4","4*9","5*9","6*9","6*8","6*7","6*6","3*11","3*12","2*11",
"4*11","4*7","4*8","5*1","5*2","5*3","4*2","1*4","1*5","1*6","1*7","1*8","2*6","2*1");
Il n'y a qu'un seul tableau, et il est monodimensionnel. Chaque élément du tableau indique une coordonnée de la carte (d'abord la ligne, puis la colonne, un asterisque - qui à ma grande suprise est un mot masculin. On apprend tous les jours - servant à les délimiter).
Par exemple, le premier élément est "1*3". Celà veut dire qu'il y a un cours d'eau ligne 1, colonne 3
On utilise pour l'instant les éléments suivants :
Seize éléments pour les cours d'eau. |
Il est fort probable que j'en rajoute par la suite, ne serait-ce que pour les embouchures (estuaires, deltas, etc).
EDIT : J'ai renommé certains depuis la prise de cette image. Les images dont la valeur commence par un 0 ont perdu celui-ci (sinon, beh Ratsodie ne les trouve pas).
Le principe d'affichage, maintenant :
Chaque fois que Ratsodie affiche une case de terrain, il regarde s'il y a une entrée correspondante dans le tableau "fleuve" (cours d'eaux).
Si c'est le cas, il examine les six cases voisines Nord, Est, Sud, Ouest, et regarde s'il y a un cours d'eau dedans.
- Nord vaut 1 point ;
- Est vaut 2 points ;
- Sud vaut 4 points ;
- Ouest vaut 8 points ;
Ensuite, il fait l'addition, et le total est également le numéro de l'image de cours d'eau (riviere_X.svg, où X est un nombre), qu'il affiche par dessus le terrain.
Je commence donc par définir
case2 = new Array();
J'ignore si je peux reprendre le "case1" du terrain, simplement.
Puis, juste après le code affichant mon terrain, mais avant de refermer l'accolade, je fais ça :
var fleuve_element = i3+"*"+j3;
if (fleuve.indexOf(fleuve_element) != -1 && mer !=1)
{
var fleuve_element_n = (i3-1)+"*"+j3;
var fleuve_element_e = (i3)+"*"+(j3+1);
var fleuve_element_s = (i3+1)+"*"+j3;
var fleuve_element_o = (i3)+"*"+(j3-1);
var fleuve_voisin = 0;
if (fleuve.indexOf(fleuve_element_n) != -1) {fleuve_voisin+=1;}
if (fleuve.indexOf(fleuve_element_e) != -1) {fleuve_voisin+=2; }
if (fleuve.indexOf(fleuve_element_s) != -1) {fleuve_voisin+=4; }
if (fleuve.indexOf(fleuve_element_o) != -1) {fleuve_voisin+=8; }
var ncase = "riviere_"+fleuve_voisin+".svg";
case2[i3+"*"+j3] = document.createElement("img");
case2[i3+"*"+j3].src=ncase;
case2[i3+"*"+j3].setAttribute('width',taille_case);
//case2[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case2[i3+"*"+j3].setAttribute('id','case2['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case2[i3+"*"+j3]);
case2[i3+"*"+j3].style.position = 'absolute';
case2[i3+"*"+j3].style.bottom = i2 + 'px';
case2[i3+"*"+j3].style.left = j2 + 'px';
case2[i3+"*"+j3].style.zIndex = j4;
}
if (fleuve.indexOf(fleuve_element) != -1 && mer !=1)
{
var fleuve_element_n = (i3-1)+"*"+j3;
var fleuve_element_e = (i3)+"*"+(j3+1);
var fleuve_element_s = (i3+1)+"*"+j3;
var fleuve_element_o = (i3)+"*"+(j3-1);
var fleuve_voisin = 0;
if (fleuve.indexOf(fleuve_element_n) != -1) {fleuve_voisin+=1;}
if (fleuve.indexOf(fleuve_element_e) != -1) {fleuve_voisin+=2; }
if (fleuve.indexOf(fleuve_element_s) != -1) {fleuve_voisin+=4; }
if (fleuve.indexOf(fleuve_element_o) != -1) {fleuve_voisin+=8; }
var ncase = "riviere_"+fleuve_voisin+".svg";
case2[i3+"*"+j3] = document.createElement("img");
case2[i3+"*"+j3].src=ncase;
case2[i3+"*"+j3].setAttribute('width',taille_case);
//case2[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case2[i3+"*"+j3].setAttribute('id','case2['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case2[i3+"*"+j3]);
case2[i3+"*"+j3].style.position = 'absolute';
case2[i3+"*"+j3].style.bottom = i2 + 'px';
case2[i3+"*"+j3].style.left = j2 + 'px';
case2[i3+"*"+j3].style.zIndex = j4;
}
Ce qui devrait faire (si je ne me suis pas gouré dans le couper-coller) l'image au début de ce message.
Aucun commentaire:
Enregistrer un commentaire