Journal de bord: création d’un bomberman-like en HTML5, jour 3

Publié le par

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetdulibre/p12445/developpement/journal-de-bord-creation-dun-bomberman-like-en-html5-jour-2

Aujourd’hui nous allons corriger quelques bugs du jeu rencontré lors des premiers essai avec des collègues.

  • Menu affichage des team (en fonction des team disponibles)
  • Permettre de déposer une bombe pendant que le joueur court
  • Bugfix concernant le haut de la map et la partie gauche

Mise a jour affichage des teams disponibles
Lorsque les joueurs rejoignent la partie, il leur faut choisir une équipe bleu,rouge,jaune ou vert.
On va mettre à jour cette liste à chaque fois qu’un joueur choisit une équipe ou quitte la partie

Du coté client, on va, au moment où l’on choisit une équipe, indiquer au serveur la team choisie pour qu’il l’enregistre
Coté client:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setTeam:function(team){
    this.team=team;
               
    if(team=='blue'){
        setTimeout(run,fps);
    }
       
    getById('team').style.display='none';
               
    map.build();
    this.refresh();
       
    socket.emit('setTeamBroadcast',team);
},

Coté serveur

1
2
3
4
5
6
7
8
socket.on('setTeamBroadcast',function(team){
    tTeamConnected[team]=1;
    tSocket[socket.id]=team;
       
    var tTeamConnectedB=getTeamConnected();
       
    socket.broadcast.emit('Game.listTeam',tTeamConnectedB);
});

Ensuite du coté du serveur, on va indiquer que lors de la connection on va broadcaster les team actives

1
2
3
4
5
6
7
8
socket.on('setTeamBroadcast',function(team){
    tTeamConnected[team]=1;
    tSocket[socket.id]=team;
       
    var tTeamConnectedB=getTeamConnected();
       
    socket.broadcast.emit('Game.listTeam',tTeamConnectedB);
});

Et la fonction getTeamConnected()

1
2
3
4
5
6
7
8
9
function getTeamConnected(){
    var tTeamConnectedB=Array();
    for(var i=0;i< tColor.length;i++){
        if(tTeamConnected[tColor[i]]==1){
            tTeamConnectedB.push(tColor[i]);
        }
    }
    return tTeamConnectedB;
}

Idem lors de la déconnection:

1
2
3
4
5
6
7
8
socket.on('disconnect', function () {
    tTeamConnected[ tSocket[socket.id] ]=0;
       
    var tTeamConnectedB=getTeamConnected();
       
    socket.emit('Game.listTeam',tTeamConnectedB);
    socket.broadcast.emit('Game.listTeam',tTeamConnectedB);
});

On appelle la fonction d’affichage du menu des teams disponibles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
socket.on('Game.listTeam',function(tTeamConnected){
       
    for(var i=0;i<tTeam.length;i++){
        var a=getById('button-'+tTeam[i]);
        if(a){
            a.style.display='block';
        }
    }
       
    for(var i=0;i< tTeamConnected.length;i++){
        console.log('desactivation '+tTeamConnected[i]);
        var a=getById('button-'+tTeamConnected[i]);
        if(a){
            a.style.display='none';
        }
    }
       
});

Ainsi: lorsqu’on arrive sur la partie, le jeu affiche la liste des 4 team, en parallèle si un autre joueur cliquer sur une team, il va broadcaster aux autres qu’une team n’est plus disponible.
Et au contraire, si un des joueurs quitte la partie: volontairement ou fait un F5 pour un soucis de navigateur, il peut de nouveau se reconnecter avec sa team.

Permettre de déposer une bombe en courant
Je cherchais pourquoi lorsque l’on courrait et appuyait sur la barre d’espace, le joueur déposait sa bombe et s’arretait…
C’était tout bête: un bug lors de la gestion du keyUp (relachement d’une touche)
Dans ce cas là j’annulais la direction du personnage, hors dans le cas du relachement de la barre d’espace, ce ne doit pas être le cas
Ainsi, la modification

1
2
3
4
5
6
7
eventKeyUp:function(e){
    var touche = e.keyCode;
    //si touche relachée différente de la barre d'espace
    if(touche!=32){
        this.setTeamDirectionBroadcast('');
    }
},

Conclusion
Voilà pour ce 3ème jour, comme vous le voyez en peu de temps, on a déjà un jeu multi-joueur jouable.
Les prochains jours permettront d’améliorer la jouabilité ;)

Laisser un commentaire