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'); }, }; |
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]; } } }, |
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]; } } }, |
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); }, |
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