Cześć!
Stworzyłem animację która działa tylko w określionych warunkach.
Metoda draw() jest regularnie wywoływana.
Domyślinie obrazek ma się poruszać w jednej osi do punktu limitX a potem wrócić na poprzednie miejsce i się zatrzymać.
Niestety animacja się nie zatrzymuje.
Próbowałem określić** velocityX** jako jakiś ułamek całej drogi ale wtedy problem również się pojawiał.
Nie wiem jak to naprawić:
export class Sweet {
constructor(name, x, y, width, row, column) {
this.name = name;
this.image = document.getElementById(name);
this.x = x;
this.y = y;
this.velocityX = 0;
this.velocityY = 0;
this.width = width;
this.limitY = null;
this.limitX = null;
this.startX = null;
this.startY = null;
this.animation = false;
}
draw() {
if (this.animation == "spinX") {
this.calculateSpinX();
}
c.drawImage(
this.image,
(this.x += this.velocityX),
(this.y += this.velocityY),
this.width,
this.width
);
}
calculateSpinX() {
if (this.x == this.limitX) {
this.velocityX = -this.velocityX;
}
if (this.velocityX == 0) {
this.startX = this.x;
const direction = this.limitX - this.x > 0 ? 1 : -1;
this.velocityX = 10 * direction;
} else if (this.x == this.startX) {
this.velocityX = 0;
this.animation = false;
}
}
}
Prametry animation i limitX przekazuje funkcja zewnętrzna.
Parametry x i y nie zawsze są liczbami całkowitymi.
Czy wiecie jak to naprawić ?
PS: Wiem że od takich rzeczy są biblioteki. W następnym projekcie na pewno jakiejś użyję :D.