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!!
Here's my index.html
<style>
body {
margin: 0;
background-color: black;
}
</style>
<canvas></canvas>
<script src="index.js"></script>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)
Want to participate?
Create a free Chris Courses account to begin