Img in Jquery auf Tastendruck nach oben bewegen

[Rolf B]

Hallo af2111,

du warst auf dem richtigen jQuery-Weg, aber hast zwei Fehler drin.

1. es gibt keinen jQuery-Aufruf .animate(eigenschaft, wert). Zumindest finde ich in der Dokumentation keinen. Der Aufruf will ein Objekt haben: .animate({ eigenschaft: wert }), d.h. in deinem Fall .animate({ bottom: "..." }).

2. Dein Handling der Sprite-Koordinaten ist bei Dir inkonsistent. Entweder willst Du absolute Sprite-Koordinaten setzen, dann musst Du die Position speichern, aus dem Tastendruck neu berechnen und dann eine absolute Angabe an .animate übergeben. Oder Du sagst jQuery, es soll eine Bewegung relativ zur aktuellen Position durchführen. Letzteres ist für Dich nicht wirklich passend, weil Du für Kollisionstests sowieso die absolute Position brauchst. D.h. du müsstest die Variablen xvonsprite und yvonsprite bei Tastendruck ändern und dann sprite.animate({bottom:yvonsprite, left:xvonsprite}, dauer, art) aufrufen.

Das ist aber suboptimal. Weil - du musst ja jQuery ein Objekt mitgeben. Warum also dieses Objekt nicht zum Speichern der Position verwenden? Also einfach ein Objekt erzeugen:

let spritePos = { bottom: 0, left: 0 };

Das updatest Du bei Tastendruck und übergibst es an animate.

Die animate-Methode braucht aber noch mindestens einen weiteren Parameter: die Animationsdauer. Die sollte nicht 0 sein, sonst ruckelt das Sprite wenn Du es um mehr als 1 bewegst. Ich habe 25 verwendet. Und die Animationsart, die solltest Du auf "linear" setzen.

Ich hab da mal was vorbereitet

Das ist aber keine brauchbare Ausgangsbasis für ein Spiel, da musst Du noch eine Menge Grundsatzarbeit für die Konzeption leisten. Und die Frage, wie man das auf einem Smartphone spielt, beantwortet sich da auch nicht

Rolf