Archives quotidiennes :

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

Publié le par
Répondre

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

Modification de la selection d’unités
Si on veut par la suite pouvoir faire une multiple selection, on va remplacer la variable selected par un tableau tSelected
Et ainsi en selectionnant une unité on l’ajoute à ce tableau

1
2
3
4
5
6
7
8
9
10
select:function(oMix){
    //on enregistre l'unité/batiment
    this.tSelected.push(oMix);
   
    //on demande son dessin
    this.drawSelected();
   
    //on affiche la navigation
    oMix.buildNav();
},

Et lors de l’affichage des unités sélectionnés, on va boucler sur celui-ci

1
2
3
4
5
6
7
8
9
drawSelected:function(){
    //on efface le calque
    oLayer_select.clear();
   
    for(var i=0;i<this.tSelected.length;i++){
        //on dessine un cadre sur un des calques au dimension de l'élement
        oLayer_select.drawRectStroke((this.tSelected[i].x-currentX)*widthCase,(this.tSelected[i].y-currentY)*heightCase,this.tSelected[i].width,this.tSelected[i].height,'#880044',3);
    }
},

Permettre de sélectionner plusieurs unités avec shift
Premièrement ajouter un onkeydown appelant oGame.keydown(event)
Puis nous définissons cette méthode pour qu’elle enregistre une variable shiftClicked

1
2
3
4
5
6
7
8
keydown:function(e){
    var touche = e.keyCode;

    //si shirt, on enregistre que shift est pressé
    if(touche==16){
        this.shiftClicked=1;
    }
},

Et l’on prévoit le fait de relacher la touche shift pour ne plus sélectionner plusieurs unités

1
2
3
keyup:function(e){
    this.shiftClicked=0;
},

Enfin on modifie la methode click de la classe Game pour prendre en compte le fait que la touche est pressée

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//si il y a une unité
if(oUnit){
    //si la touche shift n'est pas cliqué en efface le tableau de sélection
    if(!this.shiftClicked){
        this.clearSelect();
    }
    //on selectionne celle-ci
    this.select(oUnit);
}else if(oBuild){
    this.clearSelect();
    //si  il y a un batiment,
    //on le selectionne
    this.select(oBuild);
}else{
    //sinon on supprime la selection sur le canvas
    console.log('pas trouve');
    this.clearSelect();
}

Correction des déplacements des unités
Si on sélectionne plusieurs unités et que l’on clique à un endroit, celles-ci vont fusionner.
Pour éviter cela, on modifie la méthode checkCoord (de la classe Game) pour prendre en compte également les coordonnées des unités et pas seulement des batiments

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
checkCoord:function(x,y){
    y=parseInt(y+0);
    x=parseInt(x+0);
    if(this.tCoordBuild[ y ] && this.tCoordBuild[ y ][ x ] && this.tCoordBuild[ y ][ x ]!=''){
        console.log('not libre tCoordBuild[ '+y+' ][ '+x+' ]');
        return false;
    }
   
    if(this.tCoordUnit[ y ] && this.tCoordUnit[ y ][ x ] && this.tCoordUnit[ y ][ x ]!=''){
        console.log('not libre tCoordUnit[ '+y+' ][ '+x+' ]');
        return false;
    }
   
    if(map.tMap[y] && map.tMap[y][x] && map.tMap[y][x]==3){
   
        return true;
       
    }
    return false;

},

Tant que l’on corrige, on va également indiquer que l’on ne peut entrer dans un QG que dans le cas d’une « ronde »
Dans la méthode refreshUnit de la classe Game, on va verifier que les coordonnées de cycle sont renseigné
On passe de

1
2
//si la cible est le QG
if(aBuild && aBuild.name=='QG' ){

à

1
2
//si la cible est le QG et que l'on est en "ronde"
if(aBuild && aBuild.name=='QG' && oUnit.cycleToX!=''){

Idem pour le bois

Gérons les arbres
Un arbre doit disparaitre au bout d’un certains nombre d’itération: ce n’est pas une ressource illimitée
Pour cela, on va ajouté une propriété que l’on va décrémenter sur la classe Wood afin de le faire disparaitre une fois épuisé
Dans la classe wood

1
2
3
4
5
6
7
8
9
10
11
12
13
function Wood(){
    this.name='wood';
    this.shortname='Bois';
    this.src="img3/case-wood.png";
   
    this.x=0;
    this.y=0;
   
    this.width=20;
    this.height=20;
   
    this.ressource=30;
}

Ensuite on va indiquer que supprimer l’arbre apres avoir épuisé l’arbre (dans la méthode refreshUnit de la classe Game)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
}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();
    }
   
    oUnit.x=newX;
    oUnit.y=newY;
   
    //on remet le compteur à 0
    oUnit.counter=0;
   
    //on redéfinit la nouvelle cible (c'est un cycle)
    oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);

Et l'on va indiquer à l'arbre qu'avec sa methode clear il doit se supprimer de la map

1
2
3
4
5
6
7
clear:function(){
    map.tMap[this.y][this.x]=3;//un arbre c'est 4, 3 c'est une case vide
    oGame.clearBuild(this);
    sDirection='refresh';

    console.log('on supprime l arbre y:'+this.y+' x:'+this.x);
}