Hello,

I'm having a problem getting the "Player" to display on the screen. (point 32:50 in the video).

I'm getting an error in the Player.draw() function:

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight


class Boundary {
    static width = 40
    static height = 40
    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)       
    }
}

class Player {
    constructor({
        postion,
        velocity
    }){
        this.position = this.position
        this.velocity = this.velocity
        this.radius = 10
        }
    draw () {
        c.beginPath()
        c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2)
        c.fillStyle = 'yellow'
        c.fill()
        c.closePath()
    }
}

const map = [
    ['-', '-','-','-','-','-'],
    ['-', ' ',' ',' ',' ','-'], 
    ['-', ' ','-','-',' ','-'], 
    ['-', ' ',' ',' ',' ','-'],
    ['-', '-','-','-','-','-']
]

const boundaries = []
const player = new Player({
    postion: {
        x: 40,
        y: 40
    },
    velocity: {
        x: 0,
        y: 0
    }
})

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((boundary) => {
    boundary.draw()
})

player.draw()

The error reads: "Uncaught Type Error: can not read properties of undefined (reading"x")

If I put replace this.postion.x with 40, and this.position.y with 40, the player will display.

It looks like everything defined in "const player" is being read into "this.position.x"

Here's my code: Let me know if you can spot anything:

Thank you!!

@BobWyz

BobWyz

Posts (1)

Education

Support

Transparency

Legal