01-02 - Build Boundary Rows with [] array

01/01-02/01-02-js.js

01

Create a map [] array and fill it with '-' and spaces ' ', '-'. Use this with boundaries,
' 'space will be nothing, loop through map, this will be rows, increment i for y axis, and j for x axis 

const map = [
    ['-', '-', '-', '-', '-', '-'],
    ['-', ' ', ' ', ' ', ' ', '-'],
    ['-', ' ', '-', '-', ' ', '-'],
    ['-', ' ', ' ', ' ', ' ', '-'],
    ['-', '-', '-', '-', '-', '-'],
]
const boundaries = []
map.forEach((row,i) =>{
    row.forEach((symbol,j) =>{
        switch (symbol){
            case '-':
                boundaries.push(new Boundary({
                    position:{
                        x: 30 * j,
                        y: 30 * i
                    }
                }))
                break
        }
    })
})

boundaries.forEach(el => {
    el.draw()
})

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
        }
    })
})