Expert review

K5: Object Oriented Programming

Encapsulation

Hieronder is een constructor waarin we alleen privé variabele gebruiken.

constructor(image, size, x, y, tileNumber) {
        this.#image = image;
        this.#size = size;
        this.#x = x;
        this.#y = y;
        this.#tileNumber = tileNumber
        this.#visible = true;
    }

In de class waarin de constructor zich bevindt, zitten ook meerdere methods net zoals deze twee.

get x() {
        return this.#x;
    }

    set x(value) {
        this.#x = value;
    }

Omdat de variabele in de constructor privé zijn moet je met deze functies respectievelijk de variabelen callen en veranderen.

Dit process volgen we zodat de speler de values niet vanaf buiten de game kan veranderen, dit komt omdat deze methods niet door andere classes kunnen worden gecalled, waardoor de values niet kunnen worden veranderd buiten de class waarin zich deze methods bevinden.

In de code hieronder kan je zien dat de tileNumber via de constructor (hierboven) van de Tile class word aangemaakt.

class NonMovingTile extends Tile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);

        this.tileNumber = 0
    }
}

Abstraction

In onze code gebruiken we alleen de benodigde data en de rest laten we weg.

class NonMovingTile extends Tile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);

        this.tileNumber = 0
    }
}

Ook het gebruiken van privé variabelen zorgt ervoor dat we niet belangrijke informatie voor buiten de class, in de class zelf houden.

constructor(image, size, x, y, tileNumber) {
        this.#image = image;
        this.#size = size;
        this.#x = x;
        this.#y = y;
        this.#tileNumber = tileNumber
        this.#visible = true;
    }

Ook willen we grote lijsten aan if statements in de classes zelf houden zodat de tilegrid class wat makkelijker is om te lezen, ook willen we nog de berekeningen zelf hierin verwerken, of in de NormalTile en SpecialTile.

class MovingTile extends Tile {
    constructor( size, x, y, tileNumber) {
        let image;
        if (tileNumber == 6) {
            image = gameManager.getImage("circle");
        } else if (tileNumber == 5) {
            image = gameManager.getImage("square");
        } else if (tileNumber == 4) {
            image = gameManager.getImage("diamond");
        } else if (tileNumber == 3) {
            image = gameManager.getImage("circle");
        } else if (tileNumber == 2) {
            image = gameManager.getImage("square");
        } else if (tileNumber == 1) {
            image = gameManager.getImage("diamond");
        }
        super(image, size, x, y, tileNumber);
    }
}

Inheritance

De class “NonMovingTile” is een extensie op de code van de class “Tile” en erft daarom alle code van deze class.

In de constructor van de class, wordt daarom ook gelijk verwezen naar de constructor van de “super” class, in dit geval de Tile class.

Dit doen we om ervoor te zorgen dat we gemakkelijk soortgelijke classes kunnen maken, met kleine variaties en dezelfde basis.

class NonMovingTile extends Tile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);

        this.tileNumber = 0
    }
}

Alle code van de class “Tile” kan nu worden gebruikt in de class “NonMovingTile” omdat het een extensie is.

De code hieronder is een extensie van de MovingTile class en hieruit halen ze ook hun image.

class NormalTile extends MovingTile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);
    }
}
// Beide classes staan in andere files
class SpecialTile extends MovingTile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);
    }
}

Polymorphism

In de class NonMovingTile gebruiken we voor nu de this.tileNumber = 0 override, om te zorgen dat de tile niet kan bewegen, maar we zijn van plan om ook aan de MovingTile class een functie voor het bewegen van tiles toe te voegen in plaats van in de tilegrid.

class NonMovingTile extends Tile {
    constructor(image, size, x, y, tileNumber) {
        super(image, size, x, y, tileNumber);

        this.tileNumber = 0
    }
}

K7: Documenteren Met UML

In de onderstaande afbeelding is een class diagram te zien, dit diagram bevat alle classes en de bijbehorende eigenschappen en methodes die we tot nu toe toegevoegd hebben aan onze game. In dit diagram zijn de eigenschappen en methodes aangegeven met een plus (+) als het om een publieke eigenschap of methode gaat en een min (-) voor een private eigenschap of methode. Dit diagram zal worden geupdate naarmate we meer classes en eigenschappen/methodes toevoegen.

G4: Kwaliteitsnormen

Gegeven Kwaliteitsnormen

G6: Brongebruik

Voor het project hebben we de bronnen in onderstaande bronnenlijst gebruikt om informatie te zoeken als we ergens niet uit kwamen, of om beter te begrijpen wat iets inhoudt. Bij de bronnen wordt kort toegelicht waar deze voor zijn gebruikt.

(Voorlopige) Bronnenlijst:

Knowledgebase | UML class diagram UML overview

Deze bronnen over UML hebben we gebruikt om informatie te vinden over class diagrams.

Git branches en samenwerkingscontract

Deze bron hebben we voornamelijk gebruikt om te leren over git branches en hoe deze werken.

p5.js references

Deze bron hebben we gebruikt om vragen gerelateerd aan de code op te zoeken.

Github p5.js wiki | Beyond the canvas

Deze bron hebben we gebruikt om meer over het p5.js canvas te leren, zoals hoe het gemakkelijk verplaatst kan worden.

Canva | Maken class diagram

Deze bron hebben we gebruikt om het class diagram in elkaar te zetten

Codecamp | 2d arrays Stackoverflow | Change 2d array cell value How to manipulate 2d arrays

Deze bronnen hebben we gebruikt om meer te leren over 2d arrays in javascript.

Object Geörienteerd Denken

Deze bron hebben we gebruikt om basiskennis over object georiënteerd programmeren te verkrijgen.

---

Last update: November 27, 2023