Journal de bord: création d’un RTS en HTML5, jour 10

Publié le par

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetdulibre/p12423/developpement/journal-de-bord-creation-dun-rts-en-html5-jour-9

Dans ce jour 10, j’ai corrigé pas mal de bug notamment concernant le problème de suppression d’un arbre ou d’une unité
En effet, ces derniers étaient bien supprimés de la variable tCoordBuild/tCoordUnit mais pas du tableau tBuild/tUnit
J’ai également changé le comportement de base des unités: seule les unités enemies cherchent à se rapprocher pour attaquer: c’est d’ailleurs mieux car les ouviers n’ont pas la même capacité d’attaque que les soldats enemies qui font une ronde.

On va ici permettre à une unité qui coupe du bois, une fois que l’arbre n’existe plus d’aller en chercher un autre à proximité

note: pour rappel, le projet est toujours disponible sur github, dans les billets sur developpez je détaille des parties que je considère interressante, mais je ne détaille pas forcément certains bugfix ou réorganisation du code (pour le rendre plus propre)
N’hésitez pas à suivre le projet github (lien en bas du billet)

Trouver un autre arbre à proximité
On va dès l’instant que l’arbre est supprimé d’en trouver un autre et de mettre à jour la ronde de l’unité

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
}else if(aBuild && aBuild.name=='wood' && oUnit.counter >= 8 && oUnit.cycleToX!=''){
    //on indique à l'unité qu'elle transporte 10
    oUnit.wood=10;
   
    //a chaque iteration on decremente la ressource
    aBuild.ressource-=10;
    //si l'arbre est épuisé, on le supprime de la carte
    if(aBuild.ressource<=0){
        aBuild.clear();
        oGame.removeBuild(aBuild);
       
        //on définit un nouvel arbre à prendre en compte
        var tWood=[
            [-1,-1],
            [0,-1],
            [1,-1],
           
            [-1,0],
            [1,0],
           
            [-1,+1],
            [0,+1],
            [1,+1],
        ];
        for(var i=0;i<tWood.length;i++){
            var oBuild2=this.getBuild(aBuild.x+tWood[i][0],aBuild.y+tWood[i][1]);
            if(oBuild2 && oBuild2.name=='wood'){
                oUnit.cycleToX=oBuild2.x;
                oUnit.cycleToY=oBuild2.y;
               
                break;
            }
        }
    }
   
    //on remet le compteur à 0
    oUnit.counter=0;
   
    //on redéfinit la nouvelle cible (c'est un cycle)
    oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);

Arretez son cycle bois si plus d’arbre
On a vu précédement que dans le cas où l’on a terminé de couper l’arbre il cherche à proximité pour changer d’arbre.
Nous rajoutons maintenant le cas où il n’en trouve pas pour cesser son cycle bois.

1
2
3
4
5
6
7
8
9
10
11
12
13
}else if(oUnit.cycleFromX!='' && (oUnit.targetX==oUnit.x || oUnit.targetY==oUnit.y) ){
   
    //si arrivee a destination et cycle
    if(oUnit.cycleObject=='wood'){
        //si il arrive a venir sur les coordonnées cible
        //c'est que l'arbre n'y est plus
        oUnit.clearCycle();
    }else if(oUnit.cycleFromX==oUnit.x && oUnit.cycleFromY==oUnit.y ){
        oUnit.setTarget(oUnit.cycleToX,oUnit.cycleToY);
    }else{
        oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);
    }
}

Donner un prix aux unités comme pour les batiments
Jusqu’à présent on pouvait créer autant d’unité que l’on voulait, désormais chaque unité à un prix, comme pour les batiments
D’abord dans la classe Unit, on ajoute un cout dans le constructeur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
if(this.name=='Soldier'){
    this.shortname='Soldat';
    this.src='img3/unit-soldier.png';
    this.idImg='unit-soldier';
    this.life=150;
    this.attak=20;
   
    this.costOr=200;
   
}else if(this.name=='Archer'){
    this.shortname='Archer';
    this.src='img3/WC.png';
    this.idImg='unit-archer';
    this.life=100;
    this.attak=30; 
   
    this.costOr=500;
}else if(this.name='Worker'){
    this.shortname='Ouvrier';
    this.src='img3/unit-worker.png';
    this.idImg='unit-worker';
    this.life=50;
    this.attak=5;
   
    this.costOr=100;
   
    this.tBuildCreation.push(new Build('SoldierHouse',this.team));
    this.tBuildCreation.push(new Build('ArcherHouse',this.team));
}

Ensuite dasn la fonction de création de navigation de la classe Build, on ajoute le cout et on indique que si la ressource n’est pas suffisante, on ne peut plus créer d’unité.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
buildNav:function(){
    var sHtml='';
   
    sHtml+='<h1>'+this.shortname+'</h1>';
    sHtml+='<p><img src="'+this.src+'"></p>';

   
    if(this.unitCreation){
       
        var sImg='';
   
        sHtml+='<h2>Cr&eacute;ation unit</h2>';
       
        sHtml+='<table><tr>';
       
        sHtml+='<td>';
       
        if(oGame.iOr &gt; this.unitCreation.costOr){

       
            sImg='';
            sColor='#fff';
           
        }else{
           
            sImg='';
           
            sColor='#333';
        }
       
        sHtml+='<td style="background:#444;color:'+sColor+';padding:4px 8px">';
                       
        sHtml+=sImg;
   
        sHtml+='<br />';
        sHtml+='<span style="border:1px solid gray;background:yellow">&nbsp;&nbsp;&nbsp;&nbsp;</span> ';
        sHtml+=this.unitCreation.costOr;
       
           
        sHtml+='</td>';
       
        sHtml+='</tr></table>';
       
    }

    getById('nav').innerHTML=sHtml;
},

rts_12janv

Le github
Le projet GitHub : https://github.com/imikado/rtshtml5

Laisser un commentaire