Pracuje nad grą w canvas Pomyślałem sobie, że stworzę klasę Entity z której wszystkie inne obiekty klasy będą dziedziczyły i umieszczę w niej ctx, żebym mógł rysować inne obiekty.
class Entity {
constructor(color = 'blue', positionX = 200, positionY = 200, width = 100, height = 50) {
this.width = width;
this.height = height;
this.color = color;
this.positionX = positionX;
this.positionY = positionY;
this.myCanvas = document.createElement('canvas');
this.ctx = this.myCanvas.getContext('2d');
document.body.appendChild(this.myCanvas);
}
}
Z powyższej klasy dziedziczy wszystkie właściwości klasa Asteroids i faktycznie w konsoli występuje widzę właściwość ctx do rysowania na canvas
class Asteroid extends Entity {
constructor(color, positionX, positionY, width, height) {
super(color, positionX, positionY, width, height)
}
asteroidDraw = () => {
this.ctx.fillStyle = "red";
this.ctx.fillRect(this.positionX - 2, this.positionY - 2, 4, 4);
}
Poniżej zamieszczam konsole z chrma jako dowód że dana klasa odziedziczyła właściwość ctx
Asteroid {canvasDraw: ƒ, rand: ƒ, myCanvas: canvas, ctx: CanvasRenderingContext2D, myCanvasWidth: 1600, …}
asteroidDraw: () => {…}
canvasDraw: () => {…}
color: "blue"
ctx: CanvasRenderingContext2D {canvas: canvas, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
height: 50
myCanvas: canvas
myCanvasHeight: 420
myCanvasWidth: 1600
positionX: 200
positionY: 200
rand: (minS = 0, maxS = 240) => {…}
width: 100
__proto__: Entity
Pytanie brzmi dlaczego nie mogę jej użyć w metodzie asteroidDraw = () => { Nie mogę narysować tego kwadratu. Jeżeli jednak przekaże ctx w konstruktorze wszystko jest ok kwadrat się rysuję. Dziedziczenie ctx miało mi zapewnić że będę mógł narysować każdy obiekt i nie będę musiał pamiętać o przekazywaniu ctx za każdym razem w każdym obiekcie. Na marginesie chciałbym wiedzieć dlaczego skoro właściwość jest odziedziczona nie mogę jej użyć? Z góry dziękuje za wszystkie odpowiedzi (konstruktywne odpowiedzi).