01 - Setup / Create Boundary as {} object

01/01-js.html

01

When setting up the constructor() for Classes, Insert them as {} objects so order doesn't matter when creating instances of them

Do this for the Boundary class 

class Boundary{
    constructor({position}){
        this.position = position
        this.width = 40
        this.height = 40
    }
    draw(){
        c.fillStyle = 'blue'
        c.fillRect(this.position.x, this.position.y, this.width,this.height)

    }
}

02

Use static variables in the Boundary class, Referece Boundary.width and height when creating instances in the boundaries [] array, with map.forEach

Use i for rows, and j for columns 

class Boundary{
    static width  = 30
    static height  = 30
    constructor({ position }) {
        this.position = position
        this.width = 30
        this.height = 30
    }
    draw() {
        c.fillStyle = 'blue'
        c.fillRect(this.position.x, this.position.y, this.width, this.height)
    }
}
map.forEach((row,i) =>{
    row.forEach((symbol,j) =>{
        switch (symbol){
            case '-':
                boundaries.push(new Boundary({
                    position:{
                        x: Boundary.width * j,
                        y: Boundary.height * i
                    }
                }))
                break
        }
    })
})