Discussion :

[imikado]

Introduction
Lors du précédent journal de bord, j’ai développé un jeu de stratégie temps réel ou RTS multiplayer en HTML5.
J’ai beaucoup appris de ces 17 jours, et j’espère que vous aussi.
Aujourd’hui commence un nouveau journal de bord pour developper un jeu bomberman-like multiplayer également en HTML5.
L’avantage, c’est qu’on ne part pas de zéro, on a déjà une base de structure Map/unité/cycle/serveur multiplayer…
note: comme pour le RTS, ce jeu est disponible sur github, je mets des extraites de code pour exemple mais les classes entières sont disponibles sur le dépôt.

Les bases du jeu
Voici la liste des fichiers du jeu:

• bombermanM.html
• bombermanM.js
• bombermanM_Bomb.js
• bombermanM_Game.js
• bombermanM_Map.js
• bombermanM_Perso.js
• bombermanM_Sound.js

+ Fichier serveur coté node.js

• serverBomberM.js

bombermanM.html
Comme pour le RTS: une page html qui charge les différents fichiers javascripts du jeu.
Il y a toujours deux div utilisés pour indiquer le chargement et l’autre pour permettre de choisir sa team.
A une différence: il y a moins de canvas (calques) à gerer: ici layer_map, layer_bomb et layer_perso.

bombermanM.js
Script principal du jeu qui contient également la classe Images permettant de charger et d’identifier les sprites.
Une fonction de preload qui charge le sprite, puis instancie les canvas, le jeu et construit la map.
Ce script contient également la méthode appelé en continue: la fonction run()

bombermanM_Map.js
Cette classe est quasiment la même que celle du RTS à une différence près: il n’y a pas ici de gestion d’aperçu.
Cette classe est constitué d’un constructeur et de 2 méthodes build() et drawImage()

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Map.prototype={
    build:function(){ 
        for(var y=0;y< maxY;y++){
            for(var x=0;x< maxX;x++){
                if(this.tMap[y] && this.tMap[y][x]){
                    //on dessine sur le canvas la valeur du tableau
                    this.drawImage( this.tMap[y][x] ,x,y);
                }
            }   
        } 
    },
    //la methode pour dessiner sur le canvas
    drawImage:function(iImg,x,y){
        console.log(this.tImg[iImg]);
        oImages.drawImageOnLayer(this.tImg[iImg],x*widthCase,y*heightCase,widthCase,widthCase,'map');
    },
 
};

bombermanM_Game.js
Cette classe ressemble également beaucoup à celle du RTS, il y a dans le constructeur la partie écoute du socket,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
socket=io.connect('http://localhost:1338');
 
socket.on('Game.createPerso',function(id, team,name,x,y){
    var oPerso=new Perso(name,team);
    oPerso.x=x;
    oPerso.y=y;
    oPerso.id=id;
    oPerso.build();
 
    console.log('creation perso team:'+team+' x:'+x+' y:'+y);
 
    oGame.tPerso.push(oPerso);
});

puis plusieurs méthodes du jeu comme la récupération d’un personnage,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
getPersoById:function(id){
    for(var i=0;i< this.tPerso.length;i++){
        if(this.tPerso[i].id==id){
            return this.tPerso[i];
        }
    }
},
getPersoByTeam:function(team){
    for(var i=0;i< this.tPerso.length;i++){
        if(this.tPerso[i].team==team){
            return this.tPerso[i];
        }
    }
},

d'une bombe par son id ou ses coordonnées,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
getBombById:function(id){
    for(var i=0;i< this.tBomb.length;i++){
        if(this.tBomb[i].id==id){
            return this.tBomb[i];
        }
    }
},

La création d'un bombe sur la map

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
createBombBroadcast:function(team,name,x,y){
    console.log('socket create bomb'+team+' '+name+' x:'+x+' y:'+y);
    socket.emit('Game.createBombBroadcast',team,name,x,y);
},

La boucle d'affichage des joueurs:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
refreshPerso:function(){
 
    //on boucle sur les persos existants
    for(var i=0;i< this.tPerso.length;i++){
        var oPerso= this.tPerso[i];
        if(oPerso.life <=0){ continue;}
 
            var vitesse=0.5;
 
            if(!this.tDirection[oPerso.team]){
                continue;
            }
 
            var sDirection=this.tDirection[oPerso.team];
 
            //on efface le dessin sur le calques
            oPerso.clear();
 
            //on initialise les nouvelles coordonnées
            var newX=oPerso.x;
            var newY=oPerso.y;
 
            //on fait evoluer les coordonnées en fonction de la direction
            if(sDirection=='right'){
                newX+=vitesse;
            }else if(sDirection=='left'){
                newX-=vitesse;
            }
            if(sDirection=='up'){
                newY-=vitesse;
            }else if(sDirection=='down'){
                newY+=vitesse;
            }
 
            if(this.checkCoord(newX,newY)){
                //si les coordonnées est libre
                oPerso.x=newX;
                oPerso.y=newY;
 
            }
 
            //on dessine le personnage
            oPerso.buildBroadcast('walking');
 
 
    }
 
 
},

La suite dans le billet http://blog.developpez.com/ducodeetd...n-html5-jour-1