Cours d'eau

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;

}

Ce qui devrait faire (si je ne me suis pas gouré dans le couper-coller) l'image au début de ce message.