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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Développement 2D, 3D et Jeux Discussion :

Journal de la création d'un RTS en HTML5


Sujet :

Développement 2D, 3D et Jeux

  1. #1
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de la création d'un RTS en HTML5
    Introduction
    Ce billet fait suite au billet précédent: http://blog.developpez.com/ducodeetd...n-html5-jour-1

    Dans ce billet je vais vous détailler les fichiers rts.js et canvas.js , leur utilisation, leur construction.

    Faire une application HTML5/canvas
    Mais avant, je dois vous expliquer le fonctionnement global d’une application HTML5: pour ceux qui ont déjà fait des jeux en flash, il faut se dire vous dire que l’HTML5 est plus austère: oubliez la scène, la timeline et les clips, ici juste un canvas, soit une image fixe.
    Ce que l’on fait pour créer une animation, selectionner un élement.. ce sont des maths : aucun objet sur un canvas, juste des pixels de couleurs différentes imprimés ou éffacés sur une image (le canvas).
    Pour simplifier un peu la gestion et les performances, on créé autant de canvas que de calques nécéssaires:
    Un canvas pour le sol, un canvas pour les batiment, un autre pour les personnage, le brouillard, la selection…

    lib3/canvas.js
    Cette classe est très importante dans ce projet, elle permet de faciliter les interactions avec les canvas.
    Vous pouvez ainsi coder plus facilement:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var oCanvas = new Canvas('idDeMonCanvas');
    oCanvas.drawRectStroke(x,y,largeur,hauteur,epaisseur,couleur);
    Au lieu de :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    var canvas = document.getElementById('idDeMonCanvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.lineWidth=epaisseur;
    ctx.strokeStyle=couleur;
    ctx.strokeRect(x,y,largeur,epaisseur);
    ctx.closePath();

    La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-2
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 344
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 344
    Points : 9 866
    Points
    9 866
    Par défaut
    Salut,

    Sympa l'idée d'un journal de bord, ça sert à la fois de tuto et de retour d'expérience
    A une époque, j'ai commencé un projet de RTS en HTML5, mais j'ai abandonné par manque de temps et d'ambition. J'utilisais alors des <div> et des background-image pour gérer tous mes sprites, tandis qu'un <canvas> superposé servait à tous les effets HUD (barres de vie, de chargement etc...). L'avantage d'utiliser le DOM et des <div>, c'est qu'on pouvait très facilement associer une instance JS à un élément HTML et manipuler l'élément en utilisant les animations CSS. Mais utiliser canvas partout est généralement plus performant, bien qu'un peu plus compliqué à gérer niveau code.
    Si ça intéresse quelqu'un, le jeu est encore en ligne ici et le code source n'est pas obfusqué.
    One Web to rule them all

  3. #3
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut
    Merci
    Votre jeu est pas mal du tout, effectivement le problème avec les canvas, mais j'en parlerai dans le prochain journal c'est le fait qu'on ai pas d'objets:

    Avec un div, on ajoute un onclick et l'on peut indiquer de faire ceci en cliquant sur tel div, par exemple changer ses coordonnées x/y

    Avec un canvas, il faut recuperer les coordonéés, en soustraire le scroll du navigateur puis diviser par la largeur des cases pour en déduire des coordonnées
    Enfin il faut stoquer les elements js dans un tableau indexé puis effacé et réafficher au nouvel emplacement
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  4. #4
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut [HTML5] Journal de bord: création d’un RTS en HTML5, jour 3
    Introduction
    Ce billet fait suite au billet précédent: http://blog.developpez.com/ducodeetd...n-html5-jour-2

    Dans ce billet je vais vous détailler le fichiers rts_Game.js et son utilisation, sa construction.

    Faire une application HTML5/canvas : les interactions
    J’expliquai lors du dernier billet que l’utilisation du canvas était un peu moins confortable que de faire du flash.
    Une chose toute bête c’est d’identifier où l’on clique: sur une unité, sur un batiment, un arbre ou dans le vide.
    Pour cela plusieurs choses: on recupère l’evenement clic, ses coordonnées, on leur soustrait le scroll du navigateur.
    Puis on cherche à savoir si on trouve dans un tableau indexé par coordonnées x y un élément.

    Cette méthode se trouve dans la classe Game.

    La classe Game, fichier rts_Game.js
    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
     
    //Game
    function Game(){
        //tableau de coordonnées des unités
        this.tCoordUnit=Array();
        //tableau de corrdonnées des batiments/arbres/mine d'or
        this.tCoordBuild=Array();
        //le mode en cours 
        this.mode='';
        //l'element selectionné (unité/batiment...)
        this.selected='';
        //le batiment selectionné à construire
        this.buildcreation='';
        //le tableau des cases visibles sur la carte
        this.tVisible=Array();
        //tableau contenant tous les batiments (utilisé pour reconstruire la map lors d'un scroll)
        this.tBuild=Array();
        //idem pour les unités
        this.tUnit=Array();
     
        //ressources
        this.iOr=250;
        this.iWood=150;
    }
    Je ne vais pas ici coller la classe Game en entier (plus de 400 lignes), je vais plutot présenter bloc par bloc pour expliquer certains principe de développement
    Pour rappel, l’ensemble du projet est disponible sur github (voir en bas d’article)

    La récupération des coordonnées
    Lorsque l’on clique sur un endroit du canvas, il faut faire plusieurs choses: récupérer l’evenement, recupérer les coordonnées du clic, puis diviser par la taille des cases pour récupérer les coordonnées du tableau.
    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
     
    //recuperation de X + le decalage de la scrollbar
    getXmouse:function(e){
        if(e &amp;&amp; e.x!=null &amp;&amp; e.y!=null){
            return e.x +document.body.scrollLeft;
        }else{
            return e.clientX +document.body.scrollLeft;
        }
    },
    //recuperation de X + le decalage de la scrollbar
    getYmouse:function(e){
        if(e &amp;&amp; e.x!=null &amp;&amp; e.y!=null){
            return e.y + document.body.scrollTop;
        }else{
            return e.clientY + document.body.scrollTop;
        }
    },
    //recuperation de la coordonnée de tableau: divisition de x par la largeur d'une case
    getX:function(e){
        var x=this.getXmouse(e);
        x=parseInt( x/widthCase);
     
        //ajout du decallage (scrolling sur la map)
        return x+currentX;
    },
    getY:function(e){
        var y=this.getYmouse(e);
        y=parseInt( y/widthCase);
     
        return y+currentY;
    },

    Lire la suite dans le billet:
    http://blog.developpez.com/ducodeetd...n-html5-jour-3

    Le clic gauche
    Lorsque l’on veut séléctionner une unité, on doit cliquer sur l’image de celle-ci.
    Mais malheureusment, cette image est un dessin sur le canvas, il n’y donc pas possibilité de mettre un evement sur l’image.
    On doit récupérer les coordonnées du clic pour retrouver l’image en dessous.
    Pour cela, on recupere les coordonnées « tableau » puis l’on demande si il y a une unité ou un batiment en dessous.

    Lors du clic gauche, si on a demandé à l’unité de construire un batiment, on va vérifier que l’on peut le construire sur ces coordonnées
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
     
     getUnit:function(x,y){
            //console.log('search x:'+x+' '+y);
            if(this.tCoordUnit[y] &amp;&amp;  this.tCoordUnit[y][x]){
                return this.tCoordUnit[y][x];
            }
            return null;
        },
        getBuild:function(x,y){
            if(this.tCoordBuild[y] &amp;&amp;  this.tCoordBuild[y][x]){
                return this.tCoordBuild[y][x];
            }
            return null;
        },
        //appelée lors d'un clic gauche sur le canvas (sélection d'une unité/batiment)
        click:function(e){
            //recuperation des coordonnées "tableau" x y
            var x=this.getX(e);
            var y=this.getY(e);
     
            //si l'utilisateur a séléctionné un batiment à construire
            if(this.buildcreation!=''){
     
                //on veririfie ensuite les coordonnées 
                //des 4 cases nécéssaires à la construction du batiment
                var ok=1;
                if(!oGame.checkCoordVisible(x,y) || !oGame.checkCoord(x,y) ){
                    ok=0;
                }else if(!oGame.checkCoordVisible(x+1,y) || !oGame.checkCoord(x+1,y) ){
                    ok=0;
                }else if(!oGame.checkCoordVisible(x,y+1) || !oGame.checkCoord(x,y+1) ){
                    ok=0;
                }else if(!oGame.checkCoordVisible(x+1,y+1) || !oGame.checkCoord(x+1,y+1) ){
                    ok=0;
                }
     
                if(!ok){
                    //si une des cases indisponible, on annule
                    return;
                }
     
                //si c'est ok, on efface la selection d'emplacement
                this.buildcreation.clear();
                //on indique à l'unité qui doit construire
                //le batiment à construire
                this.selected.buildOn(this.buildcreation);
     
                //on annule la construction en cours
                this.buildcreation='';
     
                return;
     
            } 
     
            //on recherche si il y a quelquechose aux coordonnées
            var oUnit=this.getUnit(x,y);
            var oBuild=this.getBuild(x,y);
     
            //si il y a une unité
            if(oUnit){
                //on selectionne celle-ci
                this.select(oUnit);
            }else if(oBuild){
                //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();
            }
        },

    La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-3
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  5. #5
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 4
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-3

    Dans ce billet je vais vous détailler le fichier rts_Map.js, son utilisation, sa construction.

    Faire une application HTML5/canvas: construire la Map
    Dans ce jeux de stratégie, comme dans beaucoup d’autres jeux, la carte est trop grande pour être affichée dans son ensemble,.
    Il faut donc afficher une partie de la carte, et permettre de visualiser ce que l’on regarde par rapport à la carte complète.

    C’est là qu’intervient la classe Map (fichier rts_Map.js)
    Comme pour la classe Game, nous allons ici voir bloc par bloc

    Création de la map
    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
    50
    build:function(){
     
            for(var y=0;y&lt; maxY;y++){
                for(var x=0;x&lt; maxX;x++){
     
                    //decalage x/y en fonction du scrolling
                    var x2=x+currentX;
                    var y2=y+currentY;
     
                    if(this.tMap[y2] &amp;&amp; this.tMap[y2][x2]){
                        //si c&#039;est un arbre
                        if(this.tMap[y2][x2]==4){
                            //on dessine un case normale
                            this.drawImage( 3 ,x,y);
                            //puis on créé un objet arbre par dessus
                            var oWood=new Wood();
                            oWood.x=x;
                            oWood.y=y;
                            oWood.build();
     
                            //on ajoute cette arbre au tableau des batiments
                            //pour les reconstruire lors du scrolling
                            oGame.tBuild.push(oWood);
                        }
                        //on dessine sur le canvas la valeur du tableau
                        this.drawImage( this.tMap[y2][x2] ,x,y);
     
                    }
                }   
            } 
     
        },
        //la methode pour dessiner sur le canvas
        drawImage:function(iImg,x,y){
            if(!this.tOImg[iImg]){
                var oImg=new Image();
                oImg.src=&#039;img3/&#039;+this.tImg[iImg];
                oImg._x=x;
                oImg._y=y;
                oImg.onload=function(){
                    oLayer_map.drawImage(this,this._x*widthCase,this._y*heightCase,widthCase,widthCase);
     
                }
                this.tOImg[iImg]=oImg;
     
            }else{
                oLayer_map.drawImage(this.tOImg[iImg],x*widthCase,y*heightCase,widthCase,widthCase);
            }
     
        },
    Petite parenthèse sur les images
    Pensez bien que lorsque vous souhaitez dessiner une image sur un canvas, vous n’etes pas en local: les images de votre jeu ne sont pas chargées.
    Pour gerer ce mode asynchrone: on créé un objet image, on lui assigne des propriétés comme ces coordonnées et enfin on lui indique du code à éxécuter au moment du chargement avec « onload »
    Mais il faut également prévoir le fait que l’image ai déjà été chargée précédement.
    C’est pour cela que je stoque ici l’objet image dans un tableau de propriété de la classe, ainsi, si l’objet existe on le dessine tout de suite.
    En revanche si il n’existe pas on instancie avec les propriétés ainsi que la méthode onload.

    La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-4
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  6. #6
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 5
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-4

    Dans ce billet, nous verrons la classe Unit, qui permet de gerer des unités

    Le constructeur d’unité
    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
    function Unit(name,src){
        //le nom type d'unité
        this.name=name;
        //l'adresse de l'image
        this.src='img3/'+src;
        this.oImage='';
     
        //les coordonnées + les vies
        this.x=0;
        this.y=0;
        this.life=100;
     
        //la destination cible
        this.targetX='';
        this.targetY='';
     
        //la largeur/hauteur de l'unité
        this.width=widthCase;
        this.height=widthCase;
     
        //contiendra le moment venu un batiment à construire
        this.oBuildOn=null;
     
        //compteur utilisé lors de la récupération de ressource
        this.counter=0;
        //ressources or/bois transporté
        this.or=0;
        this.wood=0;
     
        //pour une ronde point de départ
        this.cycleFromX='';
        this.cycleFromY='';
     
        //pour une ronde point d'arrivée
        this.cycleToX='';
        this.cycleToY='';
     
        //tableau contenant les batiments que l'unité peut construire
        this.tBuildCreation=Array();
     
        if(this.name=='soldat'){
            this.tBuildCreation[0]=new Buildcreation('buid2','build2.png');
        }
    }

    L’affichage de l’unité
    Méthode utilisée pour afficher l’unité
    Comme vous pouvez le voir il y a également une partie pour la construction effective d’un batiment.
    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
    build:function(){
        //partie affichage de l'image de l'unité sur le canvas
        if(this.oImage==''){
            this.oImage=new Image(this);
            this.oImage.src=this.src;
            this.oImage._x=this.x;
            this.oImage._y=this.y;
            this.oImage.onload=this.drawImage;
        }else{
            oLayer_perso.drawImage(this.oImage ,((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2);
     
            oLayer_perso.fillRect((this.x-currentX)*widthCase,((this.y-currentY)*heightCase)+heightCase-2,widthCase,2,'#00ff00');
     
        }
     
        //si l'unité doit construire un batiment, et qu'elle se trouve sur les lieux de la construction
        if(this.oBuildOn &amp;&amp; this.x+1==this.oBuildOn.x &amp;&amp; this.y==this.oBuildOn.y){
     
            //création du batiment à l'emplacement
            var aBuild=new Build(this.oBuildOn.name,this.oBuildOn.src);
            aBuild.x=this.oBuildOn.x;
            aBuild.y=this.oBuildOn.y;
            aBuild.build();
     
            //ajout du batiment à la liste des batiments (pour la reconstruction lors des scroll)
            oGame.tBuild.push(aBuild);
            //on sauvegarde les coordonnées du batiments
            oGame.saveBuild(aBuild);
     
            //on reset les propriétés de construction
            oGame.buildcreation='';
            this.buildOnX='';
            this.buildOnY='';
            this.oBuildOn='';
     
            //on décrément la ressource or
            oGame.iOr-=100;
            //on réactualise les ressources
            oGame.buildRessource();
            //on reset la sélection
            oGame.clearSelect();
     
        }
        //on enregistre les nouvelles coordonnées de l'unité
        oGame.saveUnit(this);
    },

    La suite: http://blog.developpez.com/ducodeetd...n-html5-jour-5
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  7. #7
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 6
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-5

    Nous avons dans les précédents billets expliqué chaque fichier du projet, nous allons à partir d’aujourd’hui continuer ce rts pour arriver à un jeu fini

    Gerer les couts des batiments
    Plutot que d’avoir écrit en dur 100 d’or pour les batiments, on va stoquer dans l’objet batiment le cout en or et en bois de chaque batiment

    Pour cela on va editer la classe Build, on y ajoute 2 propriétés costOr et costWood
    J’en ai profité pour remanier un peu le constructeur: cette fois on ne recoit que le type de batiment et le constructeur fait le reste (adresse de l’image, cout…)

    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
    //build
    function Build(name,src){
        this.name=name;
        this.oImage='';
     
        this.x=0;
        this.y=0;
        this.life=100;
     
        this.width=widthCase*2;
        this.height=widthCase*2;
     
        this.color='#064474';
        this.bVisibility=1;
     
        this.costOr=0;
        this.costWood=0;
     
        if(this.name=='or'){
            this.color='#e8bb08';
            this.bVisibility=0;
            this.shortname='Mine d\'or';
            this.src='img3/mine-or.png';
            this.unitCreation ='';
        }else if(this.name=='QG'){
            this.shortname='Quartier g&eacute;n&eacute;ral';
            this.src='img3/build1.png';
     
            this.unitCreation =new Unit('Worker');
        }else if(this.name=='SoldierHouse'){
            this.shortname='Batiment des soldats';
            this.src='img3/build2.png';
     
            this.costOr=100;
            this.costWood=100;
     
            this.unitCreation =new Unit('Soldier');
        }else if(this.name=='ArcherHouse'){
            this.shortname='Batiment des archers';
            this.src='img3/build3.png';
     
            this.costOr=200;
            this.costWood=50;
     
            this.unitCreation =new Unit('Archer');
        }
     
    }

    J’ai également remanié la classe unit, c’est également le constructeur qui fait tout: image, nom et batiments constructibles.

    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
    function Unit(name){
        this.name=name;
        this.oImage='';
     
        this.x=0;
        this.y=0;
        this.life=100;
     
        this.targetX='';
        this.targetY='';
     
        this.width=widthCase;
        this.height=widthCase;
     
        this.oBuildOn=null;
     
        this.counter=0;
        this.or=0;
        this.wood=0;
     
        this.cycleFromX='';
        this.cycleFromY='';
     
        this.cycleToX='';
        this.cycleToY='';
     
        this.tBuildCreation=new Array();
     
        if(this.name=='Soldier'){
            this.shortname='Soldat';
            this.src='img3/WPface.png';
     
        }else if(this.name=='Archer'){
            this.shortname='Archer';
            this.src='img3/WC.png';
     
        }else if(this.name='Worker'){
            this.shortname='Ouvrier';
            this.src='img3/WK.png';
     
            this.tBuildCreation.push(new Build('SoldierHouse'));
            this.tBuildCreation.push(new Build('ArcherHouse'));
        }
    }

    Limitation du scroll à la carte
    Pour éviter que l’on puisse scroller à l’infini, on va ajouter un garde fou à la classe Game

    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
    Game.prototype={
        drawDirection:function(){
            oLayer_cadre.clear();
            //left
            oLayer_cadre.drawRect(0,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
            //right
            oLayer_cadre.drawRect(oLayer_map.width-10,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
            //bottom
            oLayer_cadre.drawRect(0,oLayer_map.height-10,100,10,'#eeaf17','#eeaf17');
            oLayer_cadre.drawRect(500,oLayer_map.height-10,300,10,'#eeaf17','#eeaf17');
            //top
            oLayer_cadre.drawRect(0,0,oLayer_map.width,10,'#eeaf17','#eeaf17');
        },
        goLeft:function(){
            if(currentX-1  map.tMap[0].length){
                return ;
            }
     
            currentX+=1;
            this.rebuild();
            oLayer_cadre.drawRect(oLayer_map.width-10,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
        },
        goDown:function(){
            if(currentY+1+maxY &gt; map.tMap.length){
                return ;
            }
     
            currentY+=1;
            this.rebuild();
            oLayer_cadre.drawRect(0,oLayer_map.height-10,100,10,'#eeaf17','#eeaf17');
            oLayer_cadre.drawRect(500,oLayer_map.height-10,300,10,'#eeaf17','#eeaf17');
        },
        goUp:function(){
            if(currentY-1 &lt; 0){
                return ;
            }
     
            currentY-=1;
            this.rebuild();
            oLayer_cadre.drawRect(0,0,oLayer_map.width,10,'#eeaf17','#eeaf17');
        },



    Voir la suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-6
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  8. #8
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 7
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-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
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    drawSelected:function(){
        //on efface le calque
        oLayer_select.clear();
     
        for(var i=0;i&lt;this.tSelected.length;i++){
            //on dessine un cadre sur un des calques au dimension de l&#039;élement
            oLayer_select.drawRectStroke((this.tSelected[i].x-currentX)*widthCase,(this.tSelected[i].y-currentY)*heightCase,this.tSelected[i].width,this.tSelected[i].height,&#039;#880044&#039;,3);
        }
    },

    suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-7
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  9. #9
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    juin 2006
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : juin 2006
    Messages : 17
    Points : 21
    Points
    21
    Par défaut
    Bonne initiative Mika !

  10. #10
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 8
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-7

    Ajourd’hui nous allons passer aux sprites
    L’idée est d’éviter d’avoir une image par éléments, mais 2-3 images qui contiendrait l’ensemble afin d’avoir peu de fichiers à télécharger
    On va créer 2 images: une qui contiendra les images 1×1 (map, unités, arbres…) cases et l’autre les images 2×2 (batiment, mine d’or…)

    Ensuite on va créer une classe qui permettra dans un premier temps de charger les 2 images, et dans un second temps d’identifier chaque élément du sprite

    Création de la classe de gestion de sprites
    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
    function Images(){
        this.tOImg=new Array();
        this.tDetail=new Array();
        this.counter=0;
    }
    Images.prototype={
        //methode qui permet de charger une image
        load:function(src,idImg){
            this.tOImg[idImg]=new Image();
            this.tOImg[idImg].src=src;
            this.tOImg[idImg].onload=function(){
                oImages.counter++;
                preload2();
            }
        },
        //methode qui permet d'identifier un élément du sprite
        setDetailOnId:function(id,y,x,width,height,idImg){
            this.tDetail[id]=new Array();
            this.tDetail[id]['x']=x;
            this.tDetail[id]['y']=y;
            this.tDetail[id]['width']=width;
            this.tDetail[id]['height']=height;
            this.tDetail[id]['idImg']=idImg;
        },
        //methode qui permet de dessiner un element sur un des canvas
        drawImageOnLayer:function(id,x,y,width,height,sLayer){
            var oCanvasTmp;
            if(sLayer=='map'){
                oCanvasTmp=oLayer_map;
            }else if(sLayer=='apercu'){
                oCanvasTmp=oLayer_apercu;
            }else if(sLayer=='perso'){
                oCanvasTmp=oLayer_perso;
            }else if(sLayer=='building'){
                oCanvasTmp=oLayer_building;
            }
     
            oCanvasTmp.drawImage2(this.tOImg[ this.tDetail[id]['idImg'] ],this.tDetail[id]['x'],this.tDetail[id]['y'],this.tDetail[id]['width'],this.tDetail[id]['height'],x,y,width,height);
     
        },
    };

    Chargement des sprites et identification
    Il faut ensuite identifier chaque éléments:
    On créé un tableau qui représente virtuellement les éléments sur le sprite
    En bouclant dessus, on identifie dans la classe Images ceux-ci

    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
     
    oImages=new Images();
     
    	var tDetailTmp=new Array();
    	tDetailTmp=[
    		['case-beige2','case-water','case-beige','case-wood'],
    		['unit-worker'],
    		['unit-soldier'],
    		['unit-archer'],
    	];
    	for(var y=0;y<tDetailTmp.length;y++){
    		for(var x=0;x<tDetailTmp[y].length;x++){
    			oImages.setDetailOnId(tDetailTmp[y][x],y*40,x*40,40,40,'1x1');
    		}
    	}
    	var tDetailTmp=new Array();
    	tDetailTmp=[
    		['build-SoldierHouse','build-SoldierHouse_-2','build-SoldierHouse_-1'],
    		['build-QG','build-QG_-2','build-QG_-1'],
    		['build-ArcherHouse','build-ArcherHouse_-2','build-ArcherHouse_-1'],
     
    		['build-mineOr'],
    	];
    	for(var y=0;y<tDetailTmp.length;y++){
    		for(var x=0;x<tDetailTmp[y].length;x++){
    			oImages.setDetailOnId(tDetailTmp[y][x],y*80,x*80,80,80,'2x2');
    		}
    	}
     
    	oImages.load('img3/sprite1x1.png','1x1');
    	oImages.load('img3/sprite2x2.png','2x2');
    Dessin d’une image issu du sprite
    Pour dessiner, il suffit d’appeler l’objet ainsi.
    Exemple pour la classe Build: on dessine l’id « this.idImg sur le canvas « building »
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    oImages.drawImageOnLayer(this.idImg+this.sSprite,(this.x-currentX)*widthCase,(this.y-currentY)*heightCase,widthCase*2,widthCase*2,'building');

    Lire la suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-8
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  11. #11
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 9
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-8

    Gérer un mouse over
    Il serait utile de pouvoir, au survol afficher un curseur particulier en fonction de l’unité/batiment présent sous la souris

    Après avoir ajouté une variable onMouseOver à la classe Game, on va indiquer dans la méthode mousmove quand l’initialiser à 1
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    }else if(this.mouseX &gt; 0 &amp;&amp; this.mouseX  0 &amp;&amp; this.mouseY &lt; oLayer_map.height){
        this.onMouseOver=1;
    }

    On ajoute également dans la méthode refreshunit de dessiner la selection sous la souris
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    //on dessine le mouseover
    this.drawMouseOver();

    Qui ressemble à ceci:
    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
    drawMouseOver:function(){
        oLayer_cursor.clear();
        if(this.onMouseOver==0){
            return;
        }
     
        if(!this.checkCoordVisible(this.mouseCoordX,this.mouseCoordY)){
            return false;
        }
     
        var oBuild=this.getBuild(this.mouseCoordX,this.mouseCoordY);
        var oUnit=this.getUnit(this.mouseCoordX,this.mouseCoordY);
     
        var sColor='#ffffff';
     
        if(oBuild){
            if(oBuild.name=='or'){
                sColor='yellow';
            }else if(oBuild.name=='wood'){
                sColor='#01ad4e';
            }else if(oBuild.team!=this.team){
                sColor='red';
            }
            this.strokeMouseOver(oBuild,sColor);
        }else if(oUnit){
            if(oUnit.team!=this.team){
                sColor='red';
            }
            this.strokeMouseOver(oUnit,sColor);
        }
    },

    Ajout de la gestion d’équipe
    On va ajouter une propriété team à la classe Build et Unit afin de différencier ses unités et les unités enemies.

    On modifie également le process pour que le brouillard ne soit éclairci que par les unités de notre équipe

    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
    saveUnit:function(oUnit){
        //on recupere les coordonnées de l'unité
        var y=oUnit.y;
        var x=oUnit.x;
     
        //on enregistre dans un tableau indexé
        //les nouvelles coordonnées
        if(!this.tCoordUnit[y]){
            this.tCoordUnit[y]=Array();
        }
        this.tCoordUnit[y][x]=oUnit;
     
        //on rend la zone visible 
        //que si c'est une unité de notre équipe
        if(oUnit.team==this.team){
            this.setVisibility(x,y);
        }
    },

    Ajout de gestion d’attack
    Pour l’instant on va gerer l’attaque si une unité est à proximité, on va également indiquer de se rapprocher si une unité enemie est à proxmimité


    La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-9
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  12. #12
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 10
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-9

    Dans ce jour 10, j’ai corrigé pas mal de bug notamment concernant le problème de suppression d’un arbre ou d’une unité
    En effet, ces derniers étaient bien supprimés de la variable tCoordBuild/tCoordUnit mais pas du tableau tBuild/tUnit
    J’ai également changé le comportement de base des unités: seule les unités enemies cherchent à se rapprocher pour attaquer: c’est d’ailleurs mieux car les ouviers n’ont pas la même capacité d’attaque que les soldats enemies qui font une ronde.

    On va ici permettre à une unité qui coupe du bois, une fois que l’arbre n’existe plus d’aller en chercher un autre à proximité

    note: pour rappel, le projet est toujours disponible sur github, dans les billets sur developpez je détaille des parties que je considère interressante, mais je ne détaille pas forcément certains bugfix ou réorganisation du code (pour le rendre plus propre)
    N’hésitez pas à suivre le projet github (lien en bas du billet)

    Trouver un autre arbre à proximité
    On va dès l’instant que l’arbre est supprimé d’en trouver un autre et de mettre à jour la ronde de l’unité

    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
    }else if(aBuild &amp;&amp; aBuild.name=='wood' &amp;&amp; oUnit.counter &gt;= 8 &amp;&amp; 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&lt;=0){
            aBuild.clear();
            oGame.removeBuild(aBuild);
     
            //on définit un nouvel arbre à prendre en compte
            var tWood=[
                [-1,-1],
                [0,-1],
                [1,-1],
     
                [-1,0],
                [1,0],
     
                [-1,+1],
                [0,+1],
                [1,+1],
            ];
            for(var i=0;i&lt;tWood.length;i++){
                var oBuild2=this.getBuild(aBuild.x+tWood[i][0],aBuild.y+tWood[i][1]);
                if(oBuild2 &amp;&amp; oBuild2.name=='wood'){
                    oUnit.cycleToX=oBuild2.x;
                    oUnit.cycleToY=oBuild2.y;
     
                    break;
                }
            }
        }
     
        //on remet le compteur à 0
        oUnit.counter=0;
     
        //on redéfinit la nouvelle cible (c'est un cycle)
        oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);


    Arretez son cycle bois si plus d’arbre
    On a vu précédement que dans le cas où l’on a terminé de couper l’arbre il cherche à proximité pour changer d’arbre.
    Nous rajoutons maintenant le cas où il n’en trouve pas pour cesser son cycle bois.

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    }else if(oUnit.cycleFromX!='' &amp;&amp; (oUnit.targetX==oUnit.x || oUnit.targetY==oUnit.y) ){
     
        //si arrivee a destination et cycle 
        if(oUnit.cycleObject=='wood'){
            //si il arrive a venir sur les coordonnées cible
            //c'est que l'arbre n'y est plus
            oUnit.clearCycle();
        }else if(oUnit.cycleFromX==oUnit.x &amp;&amp; oUnit.cycleFromY==oUnit.y ){
            oUnit.setTarget(oUnit.cycleToX,oUnit.cycleToY);
        }else{
            oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);
        }
    }
    Donner un prix aux unités comme pour les batiments
    Jusqu’à présent on pouvait créer autant d’unité que l’on voulait, désormais chaque unité à un prix, comme pour les batiments
    D’abord dans la classe Unit, on ajoute un cout dans le constructeur.
    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
    if(this.name=='Soldier'){
        this.shortname='Soldat';
        this.src='img3/unit-soldier.png';
        this.idImg='unit-soldier';
        this.life=150;
        this.attak=20;
     
        this.costOr=200;
     
    }else if(this.name=='Archer'){
        this.shortname='Archer';
        this.src='img3/WC.png';
        this.idImg='unit-archer';
        this.life=100;
        this.attak=30;  
     
        this.costOr=500;
    }else if(this.name='Worker'){
        this.shortname='Ouvrier';
        this.src='img3/unit-worker.png';
        this.idImg='unit-worker';
        this.life=50;
        this.attak=5;
     
        this.costOr=100;
     
        this.tBuildCreation.push(new Build('SoldierHouse',this.team));
        this.tBuildCreation.push(new Build('ArcherHouse',this.team));
    }



    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-10
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  13. #13
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 11
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-10

    Dans ce jour 11, on va ajouter un peu de son sur ce jeux qui est bien muet pour l’instant
    On ne pas va pas encore mettre l’ambiance, juste 2-3 son histoire d’ajouter un peu de vie

    On va ajouté un son lorsqu’une unité coupe du bois, travaille dans la mine, construit un batiment se bat ou meure.
    J’ai trouvé ces divers sons sur ce site: http://www.universal-soundbank.com/

    Le son en html5
    Tout d’abord comment jouer un son en HTML5, comme il y a une classe Image pour créer un objet image, il y a une classe Audio pour crée un objet son.
    Vous pouvez ensuite interagir avec ce son: le lire, le mettre en pause…

    Nous créons ici dans une classe Sound
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    function Sound(){
     
        this.counter=0;
        this.total=0;
        this.tSrc=Array();
        this.tOAudio=Array();
        this.tPlaying=Array();
    }
    Sound.prototype={
        resetPlaying:function(){
    	this.tPlaying=Array();
        },
        add:function(src,id){
    	    this.tSrc[this.total]=Array();
    	    this.tSrc[this.total]['src']=src;
    	    this.tSrc[this.total]['id']=id;
     
    	    this.total++;
        },
        load:function(){
     
    	    for(var i=0;i&lt; this.total;i++){
    		var id=this.tSrc[i][&#039;id&#039;];
     
    		this.tOAudio[id]=new Audio();
    		this.tOAudio[id].src=this.tSrc[i][&#039;src&#039;];
    		this.tOAudio[id].onload=function(){
     
    		};
    		this.tOAudio[id].load();
    		oSound.counter++;
    			preload2();
     
    	    }		
        },
        playSound:function(sType){
    	console.log("play sound "+sType);
    	this.tPlaying[sType]=1;
           //on joue le son
    	this.tOAudio[sType].play();
        },
        stopSound:function(sType){
    	console.log("stop sound "+sType);
     
     
    	//on remet le son au début
    	this.tOAudio[sType].pause();
    	this.tOAudio[sType].currentTime=0;
     
    	this.tPlaying[sType]=0;
        },
        stopPlaying:function(){
    	//return;
    	for(var i=0;i&lt; this.total;i++){
    	    var id=this.tSrc[i][&#039;id&#039;];
    	    if( !this.tPlaying[ id ] &amp;&amp; id!=&#039;building&#039;){
    		this.stopSound(id);
    	    }
     
    	}
     
        }
     
    };

    Ajoutons un son de coupe du bois
    Il y a deux choses à faire: démarrer le son au début de la coupe du bois avec oGame.playSound('wood');
    Et l'arretez une fois le travail terminé avec oGame.stopSound('wood');
    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
    }else if(aBuild &amp;&amp; aBuild.name=='wood' &amp;&amp; oUnit.counter = 8 &amp;&amp; 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&lt;=0){
    		aBuild.clear();
    		oGame.removeBuild(aBuild);
     
    		//on définit un nouvel arbre à prendre en compte
    		var tWood=[
    			[-1,-1],
    			[0,-1],
    			[1,-1],
     
    			[-1,0],
    			[1,0],
     
    			[-1,+1],
    			[0,+1],
    			[1,+1],
    		];
    		for(var i=0;i&lt;tWood.length;i++){
    			var oBuild2=this.getBuild(aBuild.x+tWood[i][0],aBuild.y+tWood[i][1]);
    			if(oBuild2 &amp;&amp; oBuild2.name==&#039;wood&#039;){
    				oUnit.cycleToX=oBuild2.x;
    				oUnit.cycleToY=oBuild2.y;
     
    				break;
    			}
    		}
    	}
     
    	//on remet le compteur à 0
    	oUnit.counter=0;
     
    	//on redéfinit la nouvelle cible (c&#039;est un cycle)
    	oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);
     
    	oSound.stopSound(&#039;wood&#039;);
     
    //si la cible c&#039;est une mine d&#039;or et que le compteur est inferieur à N
    }
    Faisons de même pour la mine d&#039;or

    Ajoutons un son pour le combat
    Ici il y a deux sons ici à mettre en place: celui du combat et celui de la mort d'une unité.
    Pour le combat à chaque fois qu'on est en position d'attaque (à proximité d'une unité enemie)
    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
    if(iAttack){
    	oSound.playSound('attack');
     
    	//on decremente l'enemie de la puissance d'attaque
    	oUnit2.life-=oUnit.attak;
    	if(oUnit2.life &lt;=0){
    		//on joue le son d&#039;attaque
    		oSound.stopSound(&#039;attack&#039;);
     
    		//si unite dead, on l&#039;efface du jeu
    		oUnit2.clear();
    		oGame.removeUnit(oUnit2);
     
    		//on joue le son de mort de l&#039;unite
    		oSound.playSound(&#039;dead&#039;);
     
    	}

    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-11
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  14. #14
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 12
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-11

    Dans ce jour 12, on va gérer des sprites d’animation et en profiter pour réorganiser la gestion du son de manière plus propre.

    Ajout d’une méthode animate
    On va ajouter une méthode animate qui permettra à la fois de modifier l’image affichée mais également de jouer le bon son
    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
    animate:function(action){
        //on commence par effacer la zone
        oLayer_perso.clearRect(((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2);
     
        var tmpImg;
        if(action=='attack'){
            tmpImg=this.idImg+'_attack';
            this.playSound('attack',this.action);
        }else if(action=='walking'){
            //si le précédent sprite était A 
            //on prend le B (pour créer une animation)
            if(this.tmpIdImg==this.idImg+'_walking2'){
                tmpImg=this.idImg+'_walking';
            }else{
                tmpImg=this.idImg+'_walking2';
            }
            //on arrête tout son (on marche)
            this.stopSound();
            //on stoque le sprite affiché pour la prochaine animation
            this.tmpIdImg=tmpImg;
        }else if(action=='dead'){
            this.playSound('dead',this.action);
            return;
        }else if(action=='wood'){
            tmpImg=this.idImg;
            this.playSound('wood',this.action);
        }else if(action=='mining'){
            tmpImg=this.idImg;
            this.playSound('mining',this.action);
        }else if(action=='stand'){
            tmpImg=this.idImg;
        }
     
        oImages.drawImageOnLayer(tmpImg,((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2,'perso');
     
        this.action=action;
    },
    Pour recentrer le son sur l’unité, on a du recréé des méthodes de gestion de son que voici:
    Note: on stoque la précédente animation afin lorsqu’une animation/action se déroule en plusieurs temps, on lise le son en entier plutot que de saccader celui-ci.
    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
    playSound:function(action,lastAction){
        //si la précédente action était la même, on fait rien
        if(action==lastAction){
            return;
        }
        this.stopSound();
     
        this.oAudio=new Audio();
        this.oAudio.src=oSound.getSrc(action);
        this.oAudio.play();
     
    },
    stopSound:function(){
        if(!this.oAudio){
            return;
        }
        this.oAudio.pause();
    },


    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-12
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  15. #15
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 13
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-12

    Dans ce jour 13, j’ai modifié la gestion des ressources pour permettre de stoquer l’information par équipe. Ainsi il sera plus simple d’une part de développer une intelligence artificielle qui pourra interagir avec ses ressources comme nos unités et également de faciliter la gestion multi utilisateur.
    On ajoute également une gestion de sprite multi-direction.

    Le stoquage multi team
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    this.team='blue';
     
    //ressources
    this.tRessource=Array();
    this.tRessource[this.team]=Array();
    this.tRessource[this.team]['or']=250;
    this.tRessource[this.team]['wood']=150;

    L’intéraction avec celles-ci
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    addRessource:function(team,ressource,nb){
        this.tRessource[team][ressource]+=nb;
        this.buildRessource();
    },
    useRessource:function(team,ressource,nb){
        this.tRessource[team][ressource]-=nb;
        this.buildRessource();
    },
    getRessource:function(team,ressource){
        return this.tRessource[team][ressource];
    },

    Modifier l’appel par des unités/batiments
    On modifie l’appel à la méthode lorsque l’on construit un batiment
    En modifiant dans la méthode build de la classe Unit
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    //on décrément la ressource or et bois
    oGame.useRessource(this.team,'or',aBuild.costOr);
    oGame.useRessource(this.team,'wood',aBuild.costWood);

    Idem pour la classe Build : batiment
    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
    createUnit:function(){
     
        oGame.useRessource(this.unitCreation.team,'or',this.unitCreation.costOr);
        oGame.buildRessource();
     
        var oUnit;
        oUnit =new Unit(this.unitCreation.name,this.team);
     
        oUnit.x=this.x+2;
        oUnit.y=this.y;
        oUnit.build();
     
        oGame.tUnit.push(oUnit);
     
        oGame.displayVisibility();
    }

    D’ailleurs, on modifie également la construction de la navigation
    Pour vérifier les ressources disponible avec cette nouvelle méthode.
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    if(oGame.getRessource(this.team,'or') &gt; this.unitCreation.costOr){
    Je profite de cette mise à jour pour assombrir totalement le brouillard de niveau 1.

    Lire la suite du billet: http://blog.developpez.com/ducodeetd...-html5-jour-13
    Images attachées Images attachées   
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  16. #16
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 14
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-13

    Dans ce billet peu de choses technique:
    Une mise à jour graphique ainsi qu’une amélioration de la fluidité de déplacement

    Modification du déplacement de 1 à 0.5
    Plutot que de déplacer d’une case à la fois, j’ai modifié la vitesse de déplacement de 1 à 0.5 (multiplié par la largeur d’une case)

    Les problèmes à gérer
    Cela change plusieurs choses: les coordonnées x et y étant jusqu’à présent utilisées comme les coordonnées du tableau, il a fallu modifier un peu pour que le jeux fonctionne toujours.

    Ajout de deux méthodes getX() et getY() dans la classe Unit

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    getX:function(){
        return parseInt(this.x);
    },
    getY:function(){
        return parseInt(this.y);
    },

    Vérification des coordonnées utilisant ces nouvelles méthodes:

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    //si l'unité doit se rendre quelques part
    }else if(oUnit.targetX!='' &amp;&amp; oUnit.targetY!='' &amp;&amp; (oUnit.targetX!=oUnit.getX() || oUnit.targetY!=oUnit.getY() ) ){

    Modification de certaines méthodes pour prendre en compte la coordonnées entières et non les coordonnées décimales

    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-14
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  17. #17
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 15
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-14

    Dans ce jour 15, j’ai ajouté la gestion de la bière: les unités consomment de la bière pour attaquer. Il faut constuire un champ de houblon ainsi qu’une brasserie.
    Enfin assigner un ouvrier au houblon pour qu’il fasse des aller retour entre le champ de houblon et la brasserie.
    J’en ai également profité pour ajouter un bouton pour activer/désactiver le son.

    Ajout des nouveaux batiments: champ de houblon et brasserie
    Premièrement on ajoute dans le sprite le champ de houblon ainsi que la brasserie

    Enquite on ajoute ce sprite au tableau d’identification
    Dans la fonction preload du fichier rts.js
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var tDetailTmp=new Array();
    tDetailTmp=[
        ['build-SoldierHouse','build-SoldierHouse_-2','build-SoldierHouse_-1'],
        ['build-QG','build-QG_-2','build-QG_-1'],
        ['build-ArcherHouse','build-ArcherHouse_-2','build-ArcherHouse_-1'],
     
        ['build-mineOr'],
        ['case-houblon','case-houblon_-2','case-houblon_-1'],
        ['build-brasserie','build-brasserie_-2','build-brasserie_-1']
    ];
    Ensuite on ajoute ces deux batiments à la liste constructible par une unité worker:
    Dans le constructeur de la classe Unit
    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
    }else if(this.name='Worker'){
        this.shortname='Ouvrier';
        this.src='img3/unit-worker.png';
        this.idImg='unit-worker';
        this.life=100;
        this.attak=5;
     
        this.costOr=100;
        this.costBeer=5;
     
        this.tBuildCreation.push(new Build('SoldierHouse',this.team));
        this.tBuildCreation.push(new Build('ArcherHouse',this.team));
        this.tBuildCreation.push(new Build('Houblon',this.team));
        this.tBuildCreation.push(new Build('Brasserie',this.team));
    }
    Prise en compte d’un clic droit sur un champ de houblon
    Dans la méthode goto de la classe Game:
    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
    }else if(this.tSelected.length &amp;&amp; aBuild &amp;&amp; ( aBuild.name=='Houblon')){
        //on créé une ronde du bois/or vers le QG
        //pour alimenter les ressources Or/bois
     
        for(var i=0;i&lt;this.tSelected.length;i++){
     
            //on indique que la destination de cycle c&#039;est la mine d&#039;or ou l&#039;arbre
            var cycleToX=x;
            var cycleToY=y;
     
            //on indique que la provenance du cycle c&#039;est la brasserie
            var cycleFromX=-1;
            var cycleFromY=-1;
     
            for(var j=0;j&lt; this.tBuild.length;j++){
                if(this.tBuild[j].name==&#039;Brasserie&#039;){
                    cycleFromX=this.tBuild[j].x;
                    cycleFromY=this.tBuild[j].y;
                }
            }
     
            if(cycleFromX &lt; 0){
                alert(&#039;Il vous manque une brasserie&#039;);
            }
     
            this.tSelected[i].setCycle(cycleToX,cycleToY,cycleFromX,cycleFromY,aBuild.name);
     
            //on donne comme cible de deplacement la mine d&#039;or/l&#039;arbre cliqué
            this.tSelected[i].setTarget(cycleToX,cycleToY);


    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-15
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  18. #18
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 16
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-15

    Aujourd’hui nous allons décliner ce jeu en une version multiplayer

    Pour cela, nous allons utiliser les websockets ainsi qu’un server node.js

    Présentation de node.js et socket.io
    Node.js est un serveur javascript utilisant le moteur de chrome, plus d’infos sur le site de nodejs: http://nodejs.org/
    Socket.io est un serveur temps réel qui permet de transmettre des messages.
    Les deux réunis couplés aux nouvelles capacités d’html5 permettent de mettre en place un jeu multi-joueur en temps réel.

    Installons le serveur
    Sur un serveur ubuntu, ouvrez un terminal et lancez la commande suivante:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    sudo apt-get install nodejs
    Pour les utilisateurs windows et mac, rendez-vous sur le site de nodejs: http://nodejs.org/

    Installer ensuite socket.io
    Pour cela il faut le binaire npm
    Installez le avec la commande
    [code]sudo apt-get install npm[code]
    Puis installer le packet socket.io
    Principe de base du jeu multi-player
    Le principe de ce serveur tient dans un concept evenementiel: un client peut emettre un message et également être à l’écoute.
    Le serveur est dans le même cas, il peut emettre soit vers l’émetteur (comme une réponse), soit vers tous les autres clients connectés.
    On peut ainsi imaginer à chaque déplacement, avertir les autres joueurs, et vice versa.

    Mise en place dans notre jeu
    Pour ce RTS, il y a plusieurs solution différente et efficace.

    Ici on va choisir d’avoir le premier joueur maitre, qui fera tourner le cycle du jeu et diffusera les ordres d’affichage des unités et batiments.
    Pour cela, on va ajouter dans les classes Unit et Build, des copie de certains méthodes

    La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-16
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  19. #19
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    décembre 2006
    Messages
    5 236
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 5 236
    Points : 19 642
    Points
    19 642
    Billets dans le blog
    17
    Par défaut Journal de bord: création d’un RTS en HTML5, jour 17
    Introduction
    Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-16

    Ce jour 17 a été utilisé surtout pour corriger les moultes bugs de la version multi player.
    Au fur et à mesure de développement multi joueur, je me suis heurté à beaucoup de soucis.

    L’effet Larsen
    Premièrement: node.js/socket.io, j’avais identifié les actions coté client et coté serveur avec les mêmes noms, exemple: Unit.build.
    Je me suis rendu compte d’un effet Larsen: j’emettais avec le client sur id pensant l’envoyer uniquement au serveur, puis coté serveur j’emmetais vers les clients avec le même identifiant pour que chacun mette à jour son écran.
    J’ai donc différencier les identifiants client et serveur avec un suffixe « Broadcast »
    Ainsi coté client on fait un
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    socket.emit('Unit.buildBroadcast',this.id,x,y);

    Coté serveur, on écoute l’evenement et l’on broadcast un évenement différent (sans le suffixe Broadcast)
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    socket.on('oBuild.buildBroadcast',function(id,x,y){
        socket.broadcast.emit('oBuild.build',id,x,y);
        socket.emit('oBuild.build',id,x,y);
    });

    Et ainsi coté client, on écoute l’evenement pour intéragir avec l’écran du joueur
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    socket.on('oBuild.build',function(id,x,y){
        var oBuild=oGame.getBuildById(id);
        oBuild.clear();
        oBuild.x=x;
        oBuild.y=y;
        oBuild.build();
    });

    Persistance de la partie
    Sur la première version multijoueur, il fallait lancer les deux navigateurs à peu près en meme temps, pour qu’ils se broadcaste l’un l’autre leurs unités respectives.
    Mais ceci n’était pas une bonne idée, j’ai donc ajouté plusieurs choses:
    - on stocke sur le serveur deux tableaux: tBuild et tUnit qui stoque les entités (unités et batiments)
    - lors de la connection d’un joueur, on boucle sur ces tableaux pour lui afficher l’état actuel de la partie
    - pour le debug: 4 boutons pour choisir sa team
    Pour info, c’est la team bleu qui mène la danse: c’est ce joueur qui possède la boucle de jeu (cycle de raffraichissement des unités et batiments)

    Note: pour sauvegarder les informations de partie, on met à jour les données des tableaux tUnit et tBuild
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    socket.on('unit.buildBroadcast',function(id,x,y){
        var i=getUnitById(id);
        tUnit[i].x=x;
        tUnit[i].y=y;
        socket.broadcast.emit('unit.build',id,x,y);
        socket.emit('unit.build',id,x,y);
     
    });
    La fonction pour récupérer les données de l’unité:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function getUnitById(id){
        for(var i=0;i&lt;tUnit.length;i++){
            if(tUnit[i].id==id){
                return i;
            }
        }
    }
    Le prototype qui sert juste à stoquer les informations d'unité et batiments:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Data(){
        this.team;
        this.name;
        this.id;
        this.x;
        this.y;
    };
    Data.prototype={
     
    };
    Copie de Unit.js et Build.js
    Pour permettre de gérer plus facilement certains éléments du jeu multiplateforme, j’ai du dupliquer les classes Unit et Build

    Modification de la méthode build de la classe Unit pour broadcaster la création d’un batiment: en effet, à la création d’une unité et d’un batiment, il faut avertir les autres 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
    //si l'unité doit construire un batiment, et qu'elle se trouve sur les lieux de la construction
    if(this.oBuildOn &amp;&amp; this.getX()+1==this.oBuildOn.x &amp;&amp; this.getY()==this.oBuildOn.y){
     
        oGame.createBuildBroadcast(oGame.team,this.oBuildOn.name,this.oBuildOn.x,this.oBuildOn.y);
     
        var aBuild=new Build(this.oBuildOn.name,this.team);
     
        //on reset les propriétés de construction
        oGame.buildcreation='';
        this.buildOnX='';
        this.buildOnY='';
        this.oBuildOn='';
     
        //on décrément la ressource or et bois
        oGame.useRessource(this.team,'or',aBuild.costOr);
        oGame.useRessource(this.team,'wood',aBuild.costWood);
     
        //on réactualise les ressources
        oGame.buildRessource();
        //on reset la sélection
        oGame.clearSelect();
     
    }
    note: un bug que j’ai mis longtemps à identifier: le mauvais nom d’event, en effet, si vous vous trompez de nom d’évenement à emettre, vous ne le savez pas : pas d’erreur
    si vous avez un doute, ajoutez des console.log() pour vérifier que vous passer bien dans vos évenements

    Voilà pour le résumé des derniers déboires
    J’espère que ce journal de bord vous évitera de perdre autant de temps que moi.

    Je pense améliorer un peu leu jeu, en ajoutant un menu, permettre de créer une nouvelle partie mais ce sera tout pour ce jeu.

    Le prochain jeu sera un bomberman-like multijoueur

    Le github
    Le projet GitHub : https://github.com/imikado/rtshtml5

    Le billet: http://blog.developpez.com/ducodeetd...-html5-jour-17
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

Discussions similaires

  1. [HTML5] Journal d'un création d'un bomberman multiplayer
    Par imikado dans le forum Développement 2D, 3D et Jeux
    Réponses: 4
    Dernier message: 05/02/2014, 10h04
  2. Journal de la création d'un RTS en HTML5
    Par imikado dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 30/12/2013, 00h17
  3. [Projet en cours] [Journal de bord] Création d'un petit jeu de zombies
    Par Tigrounette dans le forum Projets
    Réponses: 146
    Dernier message: 07/10/2011, 10h07
  4. Journal date/heure création fichier MDC
    Par sylvie16 dans le forum Cognos
    Réponses: 3
    Dernier message: 16/02/2011, 14h12
  5. Création d'un Journal Club
    Par MaliciaR dans le forum Bioinformatique
    Réponses: 30
    Dernier message: 06/05/2009, 16h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo