I think I found the shortest javascript code that could trigger the error "Uncaught ReferenceError: (XXXXXXX) is not defined"
The Javascript code I used is:
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
c.fillStyle = this.color
c.fill()
}
}
class Projectile {
constructor(x, y, radius, color, velocity) {
this.x = x
this.y = y
this.radius = radius
this.color = color
this.velocity = velocity
}
draw() {
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
c.fillStyle = this.color
c.fill()
}
}
const x = canvas.width / 2
const y = canvas.height / 2
const player = new Player(x, y, 30, 'blue')
player.draw()
addEventListener('click', (event) => {
const projectile = new Projectile(event.clientX, event.clientY, 5, 'red', null)
})
projectile.draw()
The HTML code I used is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
body {
margin: 0;
}
</style>
<body>
<canvas></canvas>
</body>
</html>
I think my website is throwing the error "Uncaught ReferenceError: projectile is not defined because there is a problem somewhere along in this part of the javascript code here...
addEventListener('click', (event) => {const projectile = new Projectile (event.clientX, event.clientY, 5, 'red', null)})
projectile.draw()
I don't understand. The const projectile is clearly there on the third code snippet but why my website failed to see it. Is my website blind? (LOL!)
I don't understand why. I'm dazed and confused.
I was just following this tutorial on how to make games. The time stamp where I slumped is in minute 23:00 out of 1 hour, 56 mins and 49 seconds of this video...
Thank you all!
The enlarged version is here:
Edit: The correct Javascript code so that you won't have the "Uncaught ReferenceError: (XXXXXXX) is not defined" error is:
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
c.fillStyle = this.color
c.fill()
}
}
class Projectile {
constructor(x, y, radius, color, velocity){
this.x = x
this.y = y
this.radius = radius
this.color = color
this.velocity = velocity
}
draw() {
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
c.fillStyle = this.color
c.fill()
}
}
const x = canvas.width / 2
const y = canvas.height / 2
const player = new Player (x, y, 30, 'blue')
player.draw()
addEventListener('click', (event) =>
{
const projectile = new Projectile (event.clientX, event.clientY, 5, 'red', null)
projectile.draw()
}
)
The const projectile must be inside the addEventListener function so that it won't throw an error....:-)
