Kreise in Javascript bewegen (Klassen, move Methode)?
Hallo hätte eine bitte, könnte mir jemand bei dieser Aufgabe helfen?
Weiß jemand wie man die move Methode schreibt mit den 2 Parametern so das es funktioniert für alle Richtungen recht, link, hoch und runter?
Ganz unten ist ein Screenshot von dem was wir schon hatten unter der delete Methode muss nun die move Methode geschrieben werden!
1 Antwort
Für die Richtungen:
- left: X wird verringert.
- right: X wird erhöht.
- up: Y wird verringert.
- down: Y wird erhöht.
Bedeutet für den Ablauf:
- Überprüfen, ob der erste Parameter "left", "right", "up" oder "down" ist, falls nichts davon zutrifft entweder nichts tun oder eine Fehlermeldung ausgeben.
- Die Methode delete aufrufen.
- Die durch den ersten Parameter bezeichnete Koordinate um den Wert des zweiten Parameters in die ebenfalls durch den ersten Parameter bezeichnete Richtung verschieben.
- Die Methode draw aufrufen.
ok, verstehe hier ist der Code den ich jetzt mal probiert habe:
Nicht wundern lerne Javascript noch nicht lange falls sie sich denken was hat der den da gemacht!
move(way, distance) {
if (way == 'right') {
this.startX += distance;
} else if (way == 'left') {
this.startX -= distance;
} else if (way == 'down') {
this.startY += distance;
} else if (way == 'up') {
this.startY -= distance;
}
this.delete();
this.draw();
}
- Erst prüfen, ob "way" einen der vier zulässigen Werte enthält und falls nicht, den gesamten Vorgang abbrechen.
- Dann "delete" aufrufen.
- Dann, falls "way" den Inhalt "left" hat "distance" von X abziehen und X auf das Ergebnis dieser Subtraktion festlegen. Ebenso für die anderen drei jetzt noch möglichen Werte für "way".
- Zum Schluss "draw" aufrufen.
Du machst das ganze aber eher in der Reihenfolge 3., 2., 4. und lässt 1. völlig aus.
Im Grunde musst du also nur die Reihenfolge der Teilschritte korrigieren und Teilschritt 1 ergänzen.
ok,
Ich verstehe nur nicht bei ihrem neuem Punkt 3. wo sie geschrieben haben "und X auf das Ergebnis dieser Subtraktion festlegen", da stehe ich an. Und warum hatte ich den Punk 1 völlig ausgelassen, ich habe doch die Überprüfung auf die einzelnen Richtungen gemacht, oder?
Hier das was ich probiert habe:
move(way, distance) {
if (way == 'right') {
this.delete();
this.startX += distance;
this.draw();
} else if (way == 'left') {
this.delete();
this.startX -= distance;
this.draw();
} else if (way == 'down') {
this.delete();
this.startY += distance;
this.draw();
} else if (way == 'up') {
this.delete();
this.startY -= distance;
this.draw();
}
}
Nein leider nicht , ich denke er löscht den Kreis wieder an den neuen Koordinaten weg, weil die delete Methode enthält ja die x,y koordinaten und wenn die durch die Move Methode überschrieben werden steht ja in der delete methode auch die neuen Koordinaten drin, und löscht somit den neuen Kreis auch gleich.
Wenn das Sinn ergibt keine Ahnung
Hier steht mal der ganze Code, dann können Sie vielleicht den Fehler ja finden:
class Circle {
constructor (ctx, startX, startY, center, sangle, eangle, radius) {
this.startX = startX;
this.startY = startY;
this.length = length;
this.center = center;
this.sangle = sangle;
this.eangle = eangle;
this.radius = radius;
}
draw() {
ctx.beginPath();
ctx.arc(this.startX, this.startY, this.center, this.sangle, this.eangle, this.radius);
ctx.stroke();
ctx.globalCompositeOperation = 'source-over';
}
delete() {
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(this.startX, this.startY, this.center, this.sangle, this.eangle, this.radius);
ctx.fill();
ctx.stroke();
}
move (way, distance) {
if (way == 'right') {
this.delete();
this.startX += distance;
this.draw();
} else if (way == 'left') {
this.delete();
this.startX -= distance;
this.draw();
} else if (way == 'down') {
this.delete();
this.startY += distance;
this.draw();
} else if (way == 'up') {
this.delete();
this.startY -= distance;
this.draw();
}
}
}
btnDraw.onclick = function () {
const circle1 = new Circle(ctx, 250, 75, 50, 0, 2 * Math.PI);
const circle2 = new Circle(ctx, 380, 75, 50, 0, 2 * Math.PI);
const circle3 = new Circle(ctx, 510, 75, 50, 0, 2 * Math.PI);
circle1.draw();
circle2.draw();
circle3.draw();
};
btnRight1.onclick = function() {
const circleright1 = new Circle(ctx, 250, 75, 50, 0, 2 * Math.PI);
circleright1.move('right', 10);
};
btnLeft1.onclick = function() {
const circleleft1 = new Circle(ctx, 250, 75, 50, 0, 2 * Math.PI);
circleleft1.move('left', 10);
};
btnDown1.onclick = function() {
const circledown1 = new Circle(ctx, 250, 75, 50, 0, 2 * Math.PI);
circledown1.move('down', 10);
};
btnUp1.onclick = function() {
const circleup1 = new Circle(ctx, 250, 75, 50, 0, 2 * Math.PI);
circleup1.move('up', 10);
};
Hallo, klappt leider nicht so ganz! Liegt aber eher daran das ich es bestimmt falsch programmiert habe.
Wäre sehr nett von ihnen wenn sie vielleicht dieses kurzen Code Teil kurz schreiben könnten und ihn hier reinstellen.