Kwaliteitsnormen

G4: Je Werkt Volgens Kwaliteitsnormen

Ik heb bij een paar snippets code, waarin we duidelijk de kwaliteitscriteria van vorig blok aanduiden, ook de google code conventions aangeduid.

Dit is te zien door de header “Google Code Conventions” voor de lijst aan conventions.

Naamgeving

Voor de naamgeving van onze variabele denken we aan leesbaarheid en ook aan het gebruik van de variabele. Hieronder hebben we een if statement die wel 6 lines lang kan zijn als je dit volledig uit zou schrijven (Zie voorbeeld 1).

Om dit te voorkomen hebben we de equaties in de de constanten zelf al gemaakt, die vervolgens de afstanden checken.

const distanceXCoord = Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].x - this.tiles[this.secondObjectX][this.secondObjectY].x);
const distanceYCoord = Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y);
const minusDistanceYCoord = -Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y);


// The code below checks for every part of the array that's 1 block from the first block selected.
if ((distanceXCoord === 1 && distanceYCoord === 0) || (distanceXCoord === 0 && distanceYCoord === 1) ||  (distanceXCoord === 1 && minusDistanceYCoord === -1))

Voorbeeld 1.

if (
  ((Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].x - this.tiles[this.secondObjectX][this.secondObjectY].x) === 1 &&
    Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y) === 0)) ||
  ((Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].x - this.tiles[this.secondObjectX][this.secondObjectY].x) === 0 &&
    Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y) === 1)) ||
  ((Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].x - this.tiles[this.secondObjectX][this.secondObjectY].x) === 1 &&
    -Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y) === -1)))

Code Commentaar

Met het maken van commentaar bij code, proberen we zo duidelijk mogelijk aan te tonen wat met de code wordt gegaan en waar het naartoe gaat, zo kan je makkelijk zien wat de code doet en of je hier gebruik van kan/moet maken.

Hieronder kan je zien dat we de player press x en y positie pakken, deze zoeken we in een array en de tile die daar uit komt, die bewegen we via de moveObject methode naar de plek van de tweede tile die aan wordt geklikt en vice versa.

/**
     * Using targetX and targetY, the x and y coordinates of the position that the player has pressed,
     * we can then check this position in the array and use the tile we get from this in the moveObject method
     * to start moving the tile.
     */
    updateTileGrid(targetX, targetY) {
        this.targetX = targetX;
        this.targetY = targetY;

        for (let x = 0; x < this.#width; x++) {
            for (let y = 0; y < this.#height; y++) {
                let tile = this.tiles[x][y]
                if (this.firstTile) {
                    if (tile.x == this.targetX && tile.y == this.targetY) {
                        this.firstObjectX = tile.x;
                        this.firstObjectY = tile.y;
                        this.firstTile = false;
                        break;
                    }
                }
                if (!this.firstTile) {
                    if (tile.x == this.targetX && tile.y == this.targetY) {
                        this.secondObjectX = tile.x;
                        this.secondObjectY = tile.y;
                        this.firstTile = true;

                        this.moveObject()
                    }
                }
            }
        }
    }

Google Code Conventions

• Variable Naming
• Constants
• Whitespace and Formatting
• Conditionals
• Comments
• Loops

Code Layout

Bij de layout van de code zorgen we voor een indentatie van 4 spaces, zoals je hierboven en hieronder kan zien in de code. De sluitaccolade hebben we ook altijd op dezelfde kolom als de 1e letter van de regel met de open-accolade.

Dit doen we allemaal om: te zorgen dat de code makkelijker te doorlezen is, goed te zien is welke delen allemaal bij elkaar horen en om “visual clutter” te voorkomen.

if ((distanceXCoord === 1 && distanceYCoord === 0) || (distanceXCoord === 0 && distanceYCoord === 1) || (distanceXCoord === 1 && minusDistanceYCoord === -1)) {

    // Swap tile positions in the tiles array.
    const tempTile = this.tiles[this.firstObjectX][this.firstObjectY];
    this.tiles[this.firstObjectX][this.firstObjectY] = this.tiles[this.secondObjectX][this.secondObjectY];
    this.tiles[this.secondObjectX][this.secondObjectY] = tempTile;

    // Used to update the tile positions
    this.tiles[this.firstObjectX][this.firstObjectY].x = this.firstObjectX;
    this.tiles[this.firstObjectX][this.firstObjectY].y = this.firstObjectY;
    this.tiles[this.secondObjectX][this.secondObjectY].x = this.secondObjectX;
    this.tiles[this.secondObjectX][this.secondObjectY].y = this.secondObjectY;
}

Het voorbeeld hierboven ziet er veel beter uit dan het voorbeeld hieronder, dit komt bijna volledig door de layout. Hier zijn de posities van de comments ook verplaats en bieden deze ook geen extra lijn om tussen de twee verschillende groepen te kunnen onderscheiden.

if ((distanceXCoord === 1 && distanceYCoord === 0) || (distanceXCoord === 0 && distanceYCoord === 1) || (distanceXCoord === 1 && minusDistanceYCoord === -1)) {
const tempTile = this.tiles[this.firstObjectX][this.firstObjectY]; // Swap tile positions in the tiles array.
this.tiles[this.firstObjectX][this.firstObjectY] = this.tiles[this.secondObjectX][this.secondObjectY];
this.tiles[this.secondObjectX][this.secondObjectY] = tempTile;
this.tiles[this.firstObjectX][this.firstObjectY].x = this.firstObjectX;  // Used to update the tile positions
this.tiles[this.firstObjectX][this.firstObjectY].y = this.firstObjectY;
this.tiles[this.secondObjectX][this.secondObjectY].x = this.secondObjectX;
this.tiles[this.secondObjectX][this.secondObjectY].y = this.secondObjectY;
}

Magic Numbers

Hieronder hebben we een eerder gebruikt voorbeeld (iets uitgebreider), met constanten waarin een berekening plaatsvindt, met deze constanten wordt vervolgens een if statement gemaakt waarin deze constanten in totaal opgeteld 6 keer gebruikt worden, als dit allemaal uitgeschreven word zoals in voorbeeld 1 is aangetoond, zou dit veel te ingewikkeld zijn om te lezen.

Met deze constanten berekenen we de afstand die de x coordinaten van elkaar af zitten en afstand die de y coordinaten van elkaar af zitten, dit is uiteindelijk veel makkelijker en duidelijker om te lezen, dan hoe het in voorbeeld 1 wordt gedaan.

const firstTileNumber = this.tiles[this.firstObjectX][this.firstObjectY].getTileNumber()
const secondTileNumber = this.tiles[this.secondObjectX][this.secondObjectY].getTileNumber()

    if (firstTileNumber > 0 && secondTileNumber > 0) {
        const distanceXCoord = Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].x - this.tiles[this.secondObjectX][this.secondObjectY].x);
        const distanceYCoord = Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y);
        const minusDistanceYCoord = -Math.abs(this.tiles[this.firstObjectX][this.firstObjectY].y - this.tiles[this.secondObjectX][this.secondObjectY].y);

        // The code below checks for every part of the array that's 1 block from the first block selected.
        if ((distanceXCoord === 1 && distanceYCoord === 0) || (distanceXCoord === 0 && distanceYCoord === 1) || (distanceXCoord === 1 && minusDistanceYCoord === -1)) {
            // Extra code
        }
    }

Google Code Conventions

• Variable Naming
• Constants
• Whitespace and Formatting
• Conditionals
• Comments
• Math Operations
• Array Acces

---

Last update: January 25, 2024