Back to Forum
PAC Man is not drawing on the screen
BobWyz posted 3 years ago

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!!

B
BobWyz posted 3 years ago

Here's my index.html

<style>
body {
    margin: 0;
    background-color: black;
}

</style>
<canvas></canvas>
<script src="index.js"></script>
B
BobWyz posted 3 years ago

here's my version of Java:

java version "21.0.2" 2024-01-16 LTS

Java(TM) SE Runtime Environment (build 21.0.2+13-LTS-58)

Java HotSpot(TM) 64-Bit Server VM (build 21.0.2+13-LTS-58, mixed mode, sharing)

B
BobWyz posted 3 years ago

running on Ubuntu Desktop:

No LSB modules are available.

Distributor ID: Ubuntu

Description: Ubuntu 22.04.4 LTS

Release: 22.04

Codename: jammy

B
BobWyz posted 3 years ago

I figured it out....I had "position" spelled wrong. Line 53 "postion' .. dumbass! :-)

Want to participate?

Create a free Chris Courses account to begin

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.