01

Create a Pacman class, and create an instance of it in the variable pacman. And use the static variables width & height from Boundary to set position for pacman correctly

Use position and velocity as parameters, set velocity for x and y to 0 for now.

class Pacman {
    constructor({position,velocity}){
        this.position = position
        this.velocity = velocity
        this.radius = 15
    }
    draw(){
        c.beginPath()
        c.fillStyle = 'yellow'
        c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2)
        c.fill()
        c.closePath()
    }
}
const pacman = new  Pacman({
    position : {
        x: 30,
        y: 30
    },
    velocity: {
        x: 0,
        y: 0
    }
})

03

Draw it after drawing the boundaries

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

Use pacman.draw() after drawing the boundaries. And use the static variables width & height from Boundary to set position for pacman correctly

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)

    }
}

//Pacman

class Pacman{
    constructor({position, velocity}){
        this.position = position
        this.velocity = velocity
        this.radius = 15
    }
    draw() {
        c.beginPath()
        c.fillStyle = 'yellow'
        c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2)
        c.fill()
        c.closePath()
    }
}
const pacman = new Pacman({
    position : {
        x : Boundary.width + (Boundary.width * .5),
        y : Boundary.height + (Boundary.height * .5),
    },
    velocity : {
        x: 0,
        y: 0
    }
})

const map = [
    ['-','-','-','-','-','-'],
    ['-',' ',' ',' ',' ','-'],
    ['-',' ','-','-',' ','-'],
    ['-',' ',' ',' ',' ','-'],
    ['-','-','-','-','-','-']
    ]  
const boundaries = []
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
        }
    })
})
boundaries.forEach(el => {
    el.draw()
})
pacman.draw()

02-01 - Create Pacman class

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

01

02

03