Je suis en train de crée un jeu de plateau. J'ai cette fonction qui génère mon "terrain".
Le fonction va calculer le nombre de lignes et de colonnes parfait à dessiner pour que tout soit bien centré dans le canvas, et va dessiner une case plus sombre, puis une claire, puis une sombre.. (Question de design).

Je pense qu'un screen vaut mieux que des explications

La fonction, out plutôt classe pour dessiner la map :

export default class Terrain {

    constructor(canvas, textures) {
        
        this.Canvas = canvas;
        this.Textures = textures;

        this.Columns = (this.Canvas.Height / 2) / 32;
        this.Rows = (this.Canvas.Width / 2) / 32;

        this.MapWidth = this.Rows * 32;
        this.MapHeight = this.Columns * 32;

        this.DrawGrid();
    }

    DrawGrid() {

        for(var yGrid = 0; yGrid < this.Columns; yGrid++) {

            for(var xGrid = 0; xGrid < this.Rows; xGrid++) {
                var x = 32 * xGrid + this.MapWidth / 2;
                var y = 32 * yGrid + this.MapHeight / 2 ;

                var modulus = xGrid % 2;

                if(modulus == 0 && yGrid != 9)
                    this.Canvas.Context.drawImage(this.Textures[0], x, y);
                else if (modulus == 0 && yGrid == 9)
                    this.Canvas.Context.drawImage(this.Textures[1], x, y);

                if(modulus == 1 && yGrid != 9)
                    this.Canvas.Context.drawImage(this.Textures[2], x, y);
                else if (modulus == 1 && yGrid == 9)
                    this.Canvas.Context.drawImage(this.Textures[3], x, y);    
            }   
        }

        console.log('Terrain :')
        console.log('Columns : ' + this.Columns + ' Rows : ' + this.Rows + ' Width : ' + this.MapWidth + ' Height : ' + this.MapHeight);  
    }
}

export default class Terrain {
    constructor(canvas, textures) {
        this.Canvas = canvas;
        this.Textures = textures;

        this.Columns = this.Canvas.Height / 2 / 32;
        this.Rows = this.Canvas.Width / 2 / 32;

        this.MapWidth = this.Rows * 32;
        this.MapHeight = this.Columns * 32;
        this.DrawGrid();
    }

    DrawGrid() {
        for (let yGrid = 0; yGrid < this.Columns; yGrid++) {
            for (let xGrid = 0; xGrid < this.Rows; xGrid++) {
                const x = 32 * xGrid + this.MapWidth / 2;
                const y = 32 * yGrid + this.MapHeight / 2;

                const modulus = xGrid % 2;

                if (!modulus) {
                    this.Canvas.Context.drawImage(this.Textures[yGrid !== 9 ? 0 : 1], x, y)
                } else {
                    this.Canvas.Context.drawImage(this.Textures[yGrid !== 9 ? 2 : 3], x, y)
                }
            }
        }

        console.log("Terrain :");
        console.log("Columns : " + this.Columns + " Rows : " + this.Rows + " Width : " + this.MapWidth + " Height : " + this.MapHeight);
    }
}

C'est beaucoup plus clean comme ça mais c'est pas encore parfait :

• Utilises des const ou des let, jamais de var pour déclarer les variables.
• Modifies ton tableau Textures et transforme le en objet, ex :

   const textures = 
   {
      greenTile: "tonString",
      greenBorderTile: "tonString2",
      darkGreenTile: "tonString3",
      darkGreenBorderTile: "tonString4"
   }

C'est beaucoup plus lisible dans le code de savoir à quoi ça fait référence :
yGrid !== 9 ? this.texture.greenTile : this.texture.greenBorderTile

• Respectes les conventions du JS : les noms des properties en camelCase, les fonctions aussi. Là dans ton code tu te trimballes du PascalCase pour ton code à toi et les fonctions natives sont en camelCase c'est pas sexy
• Tu peux aussi utiliser des variables globales ou mieux générifier ton code pour qu'il soit plus facilemment maintenable : le 32, le 9 qui se balladent ça demande réflexion à relire alors que tu pourrais l'avoir en tant que variable ex : rowLength, lineLength

Tu as l'air de venir d'un langage basé sur la POO style C#. Saches que les conventions diffèrent en JS car c'est un langage basé sur les prototypes et non la POO. Cependant, ça demande de l'investissement pour bien saisir les principes donc c'est quelque chose que tu pourrais aborder si tu souhaites poursuivre dans ce langage !

Le 22 mars 2021 à 12:52:51 Pathos-II a écrit :
export default class Terrain { constructor(canvas, textures) { this.Canvas = canvas; this.Textures = textures; this.Columns = this.Canvas.Height / 2 / 32; this.Rows = this.Canvas.Width / 2 / 32; this.MapWidth = this.Rows * 32; this.MapHeight = this.Columns * 32; this.DrawGrid(); } DrawGrid() { for (let yGrid = 0; yGrid < this.Columns; yGrid++) { for (let xGrid = 0; xGrid < this.Rows; xGrid++) { const x = 32 * xGrid + this.MapWidth / 2; const y = 32 * yGrid + this.MapHeight / 2; const modulus = xGrid % 2; if (!modulus) { this.Canvas.Context.drawImage(this.Textures[yGrid !== 9 ? 0 : 1], x, y) } else { this.Canvas.Context.drawImage(this.Textures[yGrid !== 9 ? 2 : 3], x, y) } } } console.log("Terrain :"); console.log("Columns : " + this.Columns + " Rows : " + this.Rows + " Width : " + this.MapWidth + " Height : " + this.MapHeight); } }

C'est beaucoup plus clean comme ça mais c'est pas encore parfait :

• Utilises des const ou des let, jamais de var pour déclarer les variables.
• Modifies ton tableau Textures et transforme le en objet, ex :

   const textures = 
   {
      greenTile: "tonString",
      greenBorderTile: "tonString2",
      darkGreenTile: "tonString3",
      darkGreenBorderTile: "tonString4"
   }

C'est beaucoup plus lisible dans le code de savoir à quoi ça fait référence :
yGrid !== 9 ? this.texture.greenTile : this.texture.greenBorderTile

• Respectes les conventions du JS : les noms des properties en camelCase, les fonctions aussi. Là dans ton code tu te trimballes du PascalCase pour ton code à toi et les fonctions natives sont en camelCase c'est pas sexy
• Tu peux aussi utiliser des variables globales ou mieux générifier ton code pour qu'il soit plus facilemment maintenable : le 32, le 9 qui se balladent ça demande réflexion à relire alors que tu pourrais l'avoir en tant que variable ex : rowLength, lineLength

Tu as l'air de venir d'un langage basé sur la POO style C#. Saches que les conventions diffèrent en JS car c'est un langage basé sur les prototypes et non la POO. Cependant, ça demande de l'investissement pour bien saisir les principes donc c'est quelque chose que tu pourrais aborder si tu souhaites poursuivre dans ce langage !

Bon bah tout est dit je crois

Une réponse digne de mes attentes, merci à toi
Effectivement tu as tapé dans le mille je viens du language C#, j'ai vraiment du mal à m'y défaire
Ok pour les conventions je vais faire un effort...

Par contre je comprend pas la notion de prototype, c'est à dire ? On peut vraiment pas utiliser javascript comme le C# ?

Oui je me disais bien au vu du Pascal Case
En gros derrière en JS, tout est objet, il n'y a pas de distinction entre une classe et un objet c'est du pur sucre syntaxique, tu peux lire ces docs si ça t'intéresses :
https://stackoverflow.com/questions/186244/what-does-it-mean-that-javascript-is-a-prototype-based-language
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

Tu peux utiliser le JS comme le C# mais ça sera au détriment de plusieurs principes et ça sera un "semblant" de similarité. Par exemple en JS, rien ne t'interdit de rajouter des propriétés à un objet au moment de ton choix. Il n'y a pas vraiment de moyen d'avoir des accesseurs privés pour tes classes (en ce moment) etc.

Par contre si tu veux te rapprocher d'un langage plus strict et d'éviter de faire n'importe quoi avec toutes les libertées du JS (ça ne veux pas dire que ça t'empêchera toute bêtise tout de même), tu peux regarder du côté du Typescript qui a justement ce but de fournir cet aspect de typage fort. Au final les fichiers TS sont transcompilés et tu obtiens un fichier JS lisible sur tous les navigateurs à la fin.

Je ne sais pas en passant par la class, perso je n’utilise pas ça car je préfère écrire un langage tel qu'il a été conçu, plutôt que chercher à émuler une autre langue, mais si je comprends bien ce que tu veux dire par assesseurs privés, on peut créer des propriétés privés. perso je l'utilise pour des modules, mais à priori ça marche aussi pour des constructeur :
var maClass = function() { }; maClass.prototype = (function(nombre) { let _mod = {}; // important let x = 5; //privé _mod.Ajouter = function(nombre) //rattaché à _mod, donc public { x += nombre; console.log(x); } return _mod; //important })(); var y = 10; var test = new maClass; test.Ajouter(y); //15 test.Ajouter(y); //25 test.x //undefined

(Pourquoi je sais pas utiliser ma balise T.T )

Au fait, par rapport à l'auteur, attention pour tes égalités, en js je te conseil plutôt de faire === que ==, car ce n'est pas équivalent, et ça peut poser parfois des problèmes avec les nombres justement :
'5' == 5 //true
'5' === 5 //false

Le 22 mars 2021 à 19:19:48 Shiba_the_Inu a écrit :
Au fait, par rapport à l'auteur, attention pour tes égalités, en js je te conseil plutôt de faire === que ==, car ce n'est pas équivalent, et ça peut poser parfois des problèmes avec les nombres justement :
'5' == 5 //true
'5' === 5 //false

Exact, je l'ai corrigé sans expliquer !
var permet de créer une variable globale accessible peut importe le scope donc c'est très souvent mauvais de l'utiliser. Tu as une des meilleures réponses sur le sujet ici : https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var

Regarde aussi ce qu'est une ternaire (ternary operator), ça peut te simplifier la vie et ça existe dans la pluspart des langages !