Spielfigur bewegen js Spiel?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, programmieren, JavaScript
12.03.2023, 08:44

So wie ich es verstanden habe, hast du zwei nebeneinanderliegende Kreise, wobei Kreis A zusätzlich eine andere y-Position hat, als Kreis B. Die Spielfigur soll nun von Kreis A in Kreis B linear verschoben werden.

An sich wäre es vorteilhaft, so ein Szenario auf einem canvas-Element (direkt mit der Canvas API oder einer Bibliothek wie p5.js) umzusetzen. Das aber nur als Nebenanmerkung.

Für eine lineare Bewegung bräuchtest du für die Interpolationspunkte jedenfalls die Steigung zwischen Kreiszentrum A und Kreiszentrum B. Es gilt:



Sobald du die Steigung kennst, kannst du die Koordinaten für jeden beliebigen Interpolationspunkt berechnen. Das sollte dir soweit aus dem Schulunterricht bereits bekannt sein.



Den y-Achsenabschnitt b kann man ermitteln, indem man bspw. die Koordinaten des Startpunkts in die Formel einsetzt und nach b umstellt.

Wie viele Interpolationspunkte du brauchst / haben möchtest, kannst du selbst entscheiden.

Du müsstest dir außerdem noch überlegen, wie die Bewegung getriggert und von wem sie durchgeführt werden soll.

Ich sehe da beispielsweise die Option, dass der Nutzer auf Kreis B klickt und die Spielfigur sich daraufhin eigenständig zu ihrem neuen Zielpunkt bewegt. Hierfür könnte man die setInterval-Funktion verwenden, die so oft wiederholt wird, bis der Zielpunkt erreicht wurde.

Strukturell einmal angedeutet:

function move(targetX, targetY) {
  if (/* player is at end position ... */) {
    clearInterval(timer);
    return;
  }

  // calculate and set new position ...
}

const target = // get target element ...
target.addEventListener("click", evt => {
  const targetX = // horizontal center of target ...
  const targetY = // vertical center of target ...
  const timer = setInterval(() => move(targetX, targetY), 50);
});

An der Stelle der Zielprüfung muss berücksichtigt werden, dass die Interpolationskoordinaten eine Nachkommastelle haben können. Da man direkten Wertvergleichen aufgrund von internen Rundungsfehlern nicht trauen kann, müsste man entweder beide Werte auf einen Zahlenbereich (min <= x <= max) prüfen oder vorweg die Werte einheitlich zu Ganzzahlen konvertieren/runden.

Eine weitere Lösungsoption, die die Bewegung startet, könnte durch das Drücken von Tasten (Tastatur/Maus) oder Mausereignisse (Drag & Drop, Mausbewegung) initiiert werden. In diesen Fällen müsstest du erst das jeweilige Event abfangen und im Event Handler prüfen, inwiefern sich die Figur nun bewegen soll (Richtung, vllt. auch das Tempo?).

Damit das Element für die Spielfigur in seiner Position gesetzt werden kann, würde ich es zunächst relativ zur linken oberen Ecke des Spielfeldes ausrichten.

HTML-Hierarchie (alle Elemente sind Blockelemente):

#board
  #circle-a
  #circle-b
  #player

CSS:

#board { position: relative }
#player { position: absolute }

Mit JavaScript könnte man nun mit den offset-Properties die Positionen der jeweiligen Elemente ermitteln.

Beispiel:

const player = document.getElementById("player");
const playerCenterX = player.offsetLeft + player.offsetWidth / 2;
const playerCenterY = player.offsetTop + player.offsetHeight / 2;

Eine neue Position kann in diesem Kontext für die Spielfigur folgendermaßen bestimmt werden:

player.style.left = 123 + "px";
player.style.top = 456 + "px";

Bei den Zahlen handelt es sich natürlich nur um Beispielwerte.

Weitere Informationen zu den jeweiligen Funktionen und Properties findest du wie gewohnt auf MDN.
Bexnet582
12.03.2023, 03:02

var figur = document.getElementById("figur");

var spielfeld = document.getElementById("spielfeld");

// Bewegt die Figur von links nach rechts

figur.style.left = spielfeld.offsetWidth - figur.offsetWidth + "px";

Dieser Code bewegt die Figur von der linken Seite des Spielfelds zur rechten Seite des Spielfelds. Der "left"-Wert der Figur wird auf die Breite des Spielfelds minus die Breite der Figur gesetzt, um die Figur an die rechte Seite des Spielfelds zu bewegen. Sie können diesen Code anpassen, um die Figur entlang einer Kurve oder auf einer Linie zu bewegen, indem Sie die trigonometrischen Funktionen oder die Bezier-Kurve verwenden.
regex9  12.03.2023, 06:18

Der Code würde die Figur bei Initialbedingungen weder in ihrer Position versetzen, noch bewegen. Hättest du die Antwort aufgrund eigener Erfahrung selbst verfasst, wüsstest du sicherlich, wieso.

0