I am working on a java script and html game but keep getting the error:
index.js:20 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at Sprite.draw (index.js:20:40)
at animate (index.js:47:13)
My console on chrome is getting spammed with error messages and I am unsure of what to do. I have looked throught the code numerous times and found nothing. The problem is apparently a type error that stops my code from drawing on the canvas. If you need more specification comment I'll be right here ready to answer. I hope you guys can help. The code:
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = 1024;
canvas.height = 576;
c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)
const image = new Image()
image.src = './img/kazimon-map.png'
const playerImage = new Image()
playerImage.src ='./img/playerDown.png'
class Sprite {
constructor({
positon, velocity, image
}) {
this.position = positon
this.image = image
}
draw() {
c.drawImage(this.image, this.positon.x, this.postion.y)
}
}
const background = new Sprite({
postion: {
x:-300,
y:-450
},
image: image
})
const keys = {
w: {
pressed: false
},
a: {
pressed: false
},
s: {
pressed: false
},
d: {
pressed: false
}
}
function animate() {
window.requestAnimationFrame(animate)
background.draw()
c.drawImage(
playerImage,
0,
0,
playerImage.width / 4,
playerImage.height,
canvas.width / 2 - (playerImage.width / 4) /2,
canvas.height / 2 - playerImage.height / 2,
playerImage.width / 4,
playerImage.height,
)
if (keys.w.pressed) {
background.positon.y = background.positon.y - 3
}
}
animate()
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'w':
keys.w.pressed = true
console.log(keys.s.pressed)
break
case 'a':
keys.a.pressed = true
console.log(keys.s.pressed)
break
case 's':
keys.s.pressed = true
console.log(keys.s.pressed)
break
case 'd':
keys.d.pressed = true
console.log(keys.s.pressed)
break
console.log(keys)
}
})
Thanks in advance
CodePudding user response:
Basically you should correct your spelling or just be consistent. I went with position
.
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = 400;
canvas.height = 250;
c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)
const image = new Image()
image.src = 'https://picsum.photos/400/250'
const playerImage = new Image()
playerImage.src = 'https://picsum.photos/50'
class Sprite {
constructor({
position,
velocity,
image
}) {
console.log(position)
this.position = position
this.image = image
}
draw() {
c.drawImage(this.image, this.position.x, this.position.y)
}
}
const background = new Sprite({
position: {
x: -300,
y: -450
},
image: image
})
const keys = {
w: {
pressed: false
},
a: {
pressed: false
},
s: {
pressed: false
},
d: {
pressed: false
}
}
function animate() {
window.requestAnimationFrame(animate)
background.draw()
c.drawImage(
playerImage,
0,
0,
playerImage.width / 4,
playerImage.height,
canvas.width / 2 - (playerImage.width / 4) / 2,
canvas.height / 2 - playerImage.height / 2,
playerImage.width / 4,
playerImage.height,
)
if (keys.w.pressed) {
background.position.y = background.position.y - 3
}
}
animate()
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'w':
keys.w.pressed = true
console.log(keys.s.pressed)
break
case 'a':
keys.a.pressed = true
console.log(keys.s.pressed)
break
case 's':
keys.s.pressed = true
console.log(keys.s.pressed)
break
case 'd':
keys.d.pressed = true
console.log(keys.s.pressed)
break
}
})
<canvas></canvas>