Img in Jquery auf Tastendruck nach oben bewegen

[af2111]

Hallo,

ich möchte ein Spiel programmieren, bei dem der Charakter innerhalb einer bestimmten Zeit Münzen einsammeln muss. Leider bin ich bei der Steuerung der Figur durch Tastendruck nicht weitergekommen, da ich nicht weiss was die Css Eigenschaft oder der Jquery-Befehl für eine Bewegung nach oben ist. Das ist der Code:

   $(document).ready(function() {
    
    let sprite = $(".sprite");
    let xvonsprite = 0;
    let yvonsprite = 0;
    $(document).keydown(function(event) {
    if(event.key == "ArrowUp") {
        yvonsprite++;
     sprite.animate("bottom", "+1px");
    }
    });
    });

.playground {
    height: 400px;
    width: 70%;
    border: 10px solid black;
}
.sprite {
    position: absolute;
    margin-top: 200px;
    margin-left: 348.095px;
    width: 40px;
    height: 50px;
}

[JürgenB]

Hallo,

im diesem Beispiel wird ein Objekt zufällig per setInterval bewegt. Vielleicht ja eine Anregung für dich.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

im diesem Beispiel wird ein Objekt zufällig per setInterval bewegt. Vielleicht ja eine Anregung für dich.

Wohl keine gute. 10 Bilder pro Sekunde mögen für dieses Viech vielleicht genug sein, aber window.setInterval(function() {…}, 100) ist wohl nichts, was man für Animationen verwenden sollte. Ich halte das für ein ziemlich schlechtes Beispiel; es sollte weg!

Für Animationen ist requestAnimationFrame() Mittel der Wahl, jedenfalls bis 60 Bilder pro Sekunde. (Siehe dazu Ania Migas’ Talk Debugging UI Performance Issues ab 22:08; Folien ab 61.)

LLAP 🖖

[JürgenB]

Hallo Gunnar,

• das ist ein Beispiel für setInterval,

• die 10 Bilder pro Sekunde reichen, mehr würde nur CPU-Zeit verbraten.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

• das ist ein Beispiel für setInterval,

Ein schlechtes.

Der Punkt ist: Das sollte kein Beispiel für setInterval sein.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

würdest du als Beispiel etwas langsameres nehmen, z.B. einen Bildwechsler?

Wie würdest du eine Animation umsetzen, die mit 10 Durchläufen pro Sekunde laufen soll?

Gruß
Jürgen

[JürgenB]

Hallo Gunnar,

ich hab mir das Script jetzt noch mal genauer angesehen. Mit setInterval werden nur die „Eckpunkte“ des Random Walks gesetzt. Die eigentliche Animation erfolgt per css (.transition = "all linear 0.1s"), wobei die Animationsdauer auf die Intervalzeit angepasst ist. Ändere im Frickl mal beide Zeiten, das verändert nur die Geschwindigkeit der Fliege, die Animation bleibt flüssig. Daher finde ich immer noch, das dieses ein zumindestens brauchbares Beispiel für setInterval ist.

Gruß
Jürgen

[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