I have a problem with the draw function in my tutorial. I'm following a video where I will do a game on canvas. When I made the projectile function/class and tried to draw it on the screen, I failed to show up. I can see it in the console but not on the net. Do anyone 'have a suggestion on what could be wrong. The js code is below. I would appreciate feedback!
Here is the code:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth / 2;
canvas.height = window.innerHeight / 2;
//Klasser
// Klass player
class Player {
constructor(x, y, radius, word, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
this.word = word
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
ctx.strokeStyle = "red"
ctx.stroke()
}
}
class Projectile {
constructor(x, y, radius, color, velocity) {
this.x = x
this.radius = radius
this.color = color
this.velocity = velocity
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
}
}
const x = canvas.width / 2
const y = canvas.height / 2
const player = new Player(x, y, 30, "Hej", "blue", )
player.draw()
//Event listener
addEventListener('click', (event) => {
const projectile = new Projectile(event.clientX,
event.clientY,
5, 'red',
null)
console.log(projectile)
projectile.draw()
});
Top comments (0)