IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Journal de création d'un bomberman multiplayer en HTML 5
Un récit quotidien de Michael Bertocchi

Le , par imikado

7PARTAGES

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
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
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
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
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
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
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

Une erreur dans cette actualité ? Signalez-nous-la !