DEV Community: hindrik40

Stuck with draw()

hindrik40 — Wed, 07 Jul 2021 16:00:09 +0000

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()

});

Stuck among slides

hindrik40 — Mon, 15 Mar 2021 12:41:40 +0000

`
//föra bilderna fram och tillbaka

//Funktion för att aktivera bildspelet

};
runSlideshow();
runFadeout();
runMoveImage();

function moveImage(image){
image.remove();
slideshow.prepend(image);
};
Stuck again I can't get my slideshow to go around It doesn't fade correctly and all three pics don't rotate. Any suggestion?? I do have text to my slides but the text doesn't fade away either.
`

Stuck in fetch JS

hindrik40 — Wed, 10 Mar 2021 10:26:33 +0000

Hello, I'm new to Javascript and I'm stuck with my JS code.
I used fetch to reach my info and got it when I console logit but can't place the pics on my Html page. The pics are stored in an Array and I think I should use a for each code but can't manage it.
See my JS code below. If someone could give me a hint I would be very grateful.
Thanks in advance Hindrik

const button = document.querySelector("button");
const header = document.querySelector("h2");
button.addEventListener("click", () => {
fetch("http://172.104.246.137:8083/")
.then(result => result.json())
.then(data => {
console.log(data);

});

});

});