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

Publié le par

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

Dans ce billet, nous verrons la classe Unit, qui permet de gerer des unités

Le constructeur 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
function Unit(name,src){
    //le nom type d'unité
    this.name=name;
    //l'adresse de l'image
    this.src='img3/'+src;
    this.oImage='';
   
    //les coordonnées + les vies
    this.x=0;
    this.y=0;
    this.life=100;
   
    //la destination cible
    this.targetX='';
    this.targetY='';
   
    //la largeur/hauteur de l'unité
    this.width=widthCase;
    this.height=widthCase;
   
    //contiendra le moment venu un batiment à construire
    this.oBuildOn=null;
   
    //compteur utilisé lors de la récupération de ressource
    this.counter=0;
    //ressources or/bois transporté
    this.or=0;
    this.wood=0;
   
    //pour une ronde point de départ
    this.cycleFromX='';
    this.cycleFromY='';
   
    //pour une ronde point d'arrivée
    this.cycleToX='';
    this.cycleToY='';
   
    //tableau contenant les batiments que l'unité peut construire
    this.tBuildCreation=Array();
   
    if(this.name=='soldat'){
        this.tBuildCreation[0]=new Buildcreation('buid2','build2.png');
    }
}

L’affichage de l’unité
Méthode utilisée pour afficher l’unité
Comme vous pouvez le voir il y a également une partie pour la construction effective d’un batiment.

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
build:function(){
    //partie affichage de l'image de l'unité sur le canvas
    if(this.oImage==''){
        this.oImage=new Image(this);
        this.oImage.src=this.src;
        this.oImage._x=this.x;
        this.oImage._y=this.y;
        this.oImage.onload=this.drawImage;
    }else{
        oLayer_perso.drawImage(this.oImage ,((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2);
       
        oLayer_perso.fillRect((this.x-currentX)*widthCase,((this.y-currentY)*heightCase)+heightCase-2,widthCase,2,'#00ff00');
       
    }
   
    //si l'unité doit construire un batiment, et qu'elle se trouve sur les lieux de la construction
    if(this.oBuildOn && this.x+1==this.oBuildOn.x && this.y==this.oBuildOn.y){
       
        //création du batiment à l'emplacement
        var aBuild=new Build(this.oBuildOn.name,this.oBuildOn.src);
        aBuild.x=this.oBuildOn.x;
        aBuild.y=this.oBuildOn.y;
        aBuild.build();
       
        //ajout du batiment à la liste des batiments (pour la reconstruction lors des scroll)
        oGame.tBuild.push(aBuild);
        //on sauvegarde les coordonnées du batiments
        oGame.saveBuild(aBuild);
       
        //on reset les propriétés de construction
        oGame.buildcreation='';
        this.buildOnX='';
        this.buildOnY='';
        this.oBuildOn='';
       
        //on décrément la ressource or
        oGame.iOr-=100;
        //on réactualise les ressources
        oGame.buildRessource();
        //on reset la sélection
        oGame.clearSelect();
       
    }
    //on enregistre les nouvelles coordonnées de l'unité
    oGame.saveUnit(this);
},

Quelques remarques, vous pouvez lire certaines portions de code qui seront amenés à être modifié: par exemple le fait que l’on décrémente uniquement l’or de 100 unités et pas le bois lorsque l’on créé un batiment.
Cette notion de cout de construction sera ensuite stoquée dans la classe build afin de permettre d’avoir des batiments de prix différents (or/bois)

Création de la navigation
Lorsque l’on sélectionne une unité, on ne va pas avoir les mêmes possibilités en fonction du type d’unité.
C’est ici qu’intervient la méthode buildNav qui va construire la navigation correspondant à 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
buildNav:function(){
    var sHtml='';
   
    if(this.name=='soldat'){
        sHtml='<p><img src="'+this.src+'"></p>';
       
        sHtml+='<h2>Construction</h2>';
       
        var sEnabled='';
       
        //on boucle sur les batiments que l'unité peu construire
        for(var i=0;i&lt;this.tBuildCreation.length;i++){
            if(oGame.iOr &lt; 100){
                 sHtml+=&#039;';
            }else{
                sHtml+='';
            }
           
            sHtml+=' ';
        }
       
    }else{
        sHtml='<p><img src="'+this.src+'"></p>';
       
    }
   
    getById('nav').innerHTML=sHtml;
},

Laisser un commentaire