Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE

Und du möchtest jetzt das wir dir das machen?
also, das Wort 'HILFE' in der Überschrift ist überflüssig..
Ich kann noch nicht richtig nachvollziehen was du jetzt eigentlich erwartest oO
Soweit ich verstehe fragst du dich wie du abfragen kannst ob die taste schonmal gedrückt wurde..?

(Ich will dir hier kein Code vorbeten, da dein Lehrer das eh checkt wenn das nicht von dir selber kommt und du es ihm nicht erklären kannst)
Für dich selber bringt es dir mehr wenn du einfach mal eine EXPLIZITE Frage stellst!

Eine Funktion rufst du mit dem Funktionennamen(Parameter1,Parameter2..) auf, dass function kannst du dir dort sparen
Falls du nicht mit immediately Invoked Funktions, sondern Closures zurückgeben willst solltest du mal unter Closures googeln, aber
ich denke das ist nicht genau das was du suchst.

Du willst hier eher bereits vorher definierte Funktion aufrufen, was wie oben erwähnt gemacht wird. Zudem rate ich dir die Funktionen ganz oben in deinem Script
zu definieren, damit du sie schneller findest und auch auf andere Programmiersprachen vorbereitet bist. Den es funktioniert nicht in jeder Sprache so, dass du die Funktion erst im Nachhinein definieren kannst. Dies ist eine besondere Eigenschaft von Javascript die sich Hoisting nennt

Du benötigst hier eine Abfrage die immer wieder (ggf. rekursiv) prüft ob eine Taste gedrückt wurde. Wenn ja musst du prüfen ob es sich um jene handelt die eine gewisse Funktionsweise im Spiel ermöglichen sollen(Pfeil links/rechts) und dann dort die jeweilige Funktion aufrufen.

Schema:

RekursiveTimeoutfunktion ->

falls Tastendruck vorliegt ->
Prüfung ob daraus ein ereignis folgt ->
ausführung dieses Ereignises

<---- Selbstaufruf der Funktion(Rekursion)

mfg

Achja, hier ein Beispiel.. http://codepen.io/wolf-w/pen/mJyOJM?editors=001
Das ist nicht die coolste Lösung sondern eher quick and dirty aber es erfüllt seinen Zweck dir die benötigten Funktionen zu zeigen..

Ja, das ist ja kein großer act, wie gesagt, selbermachen ist trotzdem angesagt, ich denke es kommt dort alles vor was du brauchst..

Diese Methode zur Bewegung eines Objektes nennt sich in der Spieleprogrammierung auch velocity (z.Dt. Geschwindigkeit). Dabei geht es um die permanente Abfrage ob eine Geschwindigkeit in eine der 2 oder 3 möglichen Dimensionen stattfindet, also eine entsprechende Bewegung erzeugt werden soll.

In Javascript müsste man zusätzlich eine Funktion erstellen, welche diese Bewegung am DOM-Element erzeugt und sich selbstverständlich auch auf mehrere Objekte anwenden lässt ohne den Garbage Collector zu füllen. Letzteres ist in Javascript oft gar nicht so einfach wie es sein sollte.

Vernünftige Bewegung, Kollision, Animation ist ohne ein solides Basiswissen übrigens keinen Versuch wert, meiner Meinung nach sollte man in der Schule eventuell einfachere Dinge praktizieren. Ich entnahm aus deinem Code einfach mal das du nicht außerordentlich viel Durchblick besitzt. Das meine ich keineswegs negativ, der Code ist nur äußerst laienhaft, verstärkt durch grausame Einrückung (welche ich schon beseitigt habe).

Ich habe mich trotzdem mal an die Arbeit gemacht und ein kleines Beispiel dazu erstellt. Die erste Hürde ist die Möglichkeit zur Anwendung auf mehrere Objekte. Hierzu sind Klassen nötig, also wird simpel eine Klasse erstellt. Zur einfachen Instanziierung erstellt sich diese am Besten über eine Funktion. Möchte man nun ein Element übergeben sähe das wie folgt aus:

function player(element)
{
    this.element = element;
}




var player1 = new player(document.getElementById("player1"));

Für Bewegung und insbesondere für Collider sind einige Größen des Elementes Voraussetzung zu wissen. Richtige Collider gibt es in diesem Beispiel nicht, sie werden lediglich in der später erläuterten Update-Funktion simuliert. In Javascript ist es leider nicht sinnvoll und oft auch einfach unmöglich verschiedene Aufgaben auf unterschiedliche Klassen aufzuteilen, wie man es eigentlich gewohnt ist. Darum befindet sich auch fast alles in einer Klasse.

Die benötigten Größen sind die Abmessungen, die ursprüngliche Position im Koordinatensystem (hier in Pixeln), die Geschwindigkeit (velocity) und die Verschiebung zu den Seiten, wobei die letzteren beiden Werte initial auf 0 gesetzt werden. Jeder Wert wird äquivalent für jede Dimension angegeben. In dieser Szene gibt es nur 2 Dimensionen und zwar x und y.

Zusätzlich zu den Informationen über das zu bewegende Element braucht es noch Informationen über das Elternelement. In der Spieleprogrammierung spricht man beim Container z.B. eines Levels oder Abschnitts von Szenen, die Szene ist hier die einzige Ausnahme welche in einer seperaten Klasse angelegt wird, eine Referenz wird in die player-Klasse implementiert.

function scene(element)
{
    this.element = element;
    this.dimension =
    {
        x: this.element.offsetWidth,
        y: this.element.offsetHeight
    }
}




function player(element, scene)
{
    this.element = element;




    this.dimension =
    {
        x: this.element.offsetWidth,
        y: this.element.offsetHeight
    }




    this.position =
    {
        x: this.element.offsetLeft,
        y: this.element.offsetTop
    }




    this.translate =
    {
        x: 0,
        y: 0
    }




    this.velocity =
    {
        x: 0,
        y: 0
    }
}




var scene1 = new scene(document.getElementById("scene1"));
var player1 = new player(document.getElementById("player1"), scene1);

Jetzt lassen sich bereits mehrere DOM-Objekte als Szenen oder player definieren. Die Bezeichnung player ist leicht irreführend, da es sich eigentlich um simple Objekte handelt, da im Beispiel aber nur der Spieler vorkommt und ein Aufteilen in Player und Object Klassen wie bereits genannt nicht unbedingt praktikabel ist, beschränke ich mich hier mal auf die eigentlich nicht ganz korrekte Bezeichnung.

var scene1 = new scene(document.getElementById("scene1"));
var player1 = new player(document.getElementById("player1"), scene1);
var player2 = new player(document.getElementById("player2"), scene1);

Es fehlt die Animation an sich. Nun wäre dies wieder eine neue Klasse, klappt nicht gut, also in die player Klasse implementieren. Man käme nun theoretisch als erstes auf die Idee dafür die Interval oder Timeout-Funktion des window Objektes zu nutzen, das ist jedoch eine blöde Idee, da die Animation dann nicht mit der Bildwiederholungsrate des Anzeigegerätes synchronisiert wurde. Besser zu nutzen ist die requestAnimationFrame Methode.

Da sich die Animation in der player Klasse befindet und Referenzen dadurch recht schwierig zu erstellen sind, erstelle ich vorher eine nicht objektorientierte Referenz und nutze diese dann simpel in der Update Methode.

Die Methode an sich überprüft die Position des Objektes,die angegebene Geschwindigkeit und bewegt es dann in die entsprechende Richtung. Wie das funktioniert ist keine Zauberei sondern reine Mathematik. Wenn das Objekt den Rand der Szene erreicht wird die Geschwindigkeit auf 0 gesetzt, andere Collider sind hier nicht notwendig da es laut Spielprinzip nicht zu Kollisionen von Objekten (außer dem Geschoss) kommen muss. Es wird keine Angabe für links oder rechts benötigt. Positive Werte erzeugen Bewegung nach rechts/unten und negative nach links/oben.
Bsp.:
Translate: 50px
Velocity-x: -5px
Translate neu: 50px + (-5px) = 45px.

Benutzt wird das CSS transform Attribut mit translate, so verändert sich die reine CSS Position des Objektes nicht. Nach Ablauf der Funktion findet eine Rekursion mittels requestAnimationFrame statt, so wird laufend geprüft ob velocity gesetzt ist oder nicht, dementsprechend wird animiert oder gestoppt, sowohl für die x-als auch für die y-Achse. Interessant ist hier wegen Spielprinzips beim Spieler nur die x-Achse.

function player(element, scene)
{
    [...]




    var handle = this;




    function update()
    {
        handle.scene.dimension.x = handle.scene.element.offsetWidth;
        handle.scene.dimension.y = handle.scene.element.offsetHeight;




        if(handle.velocity.x > 0)
            if (handle.translate.x + handle.velocity.x + handle.position.x + handle.dimension.x >= handle.scene.dimension.x) {
                handle.velocity.x = 0;
                handle.translate.x = handle.scene.dimension.x - handle.dimension.x - handle.position.x - 1;
            }
            else
            {
                handle.translate.x += handle.velocity.x;
            }
        else if(handle.velocity.x < 0)
            if(handle.translate.x + handle. position.x + handle.velocity.x <= 0)
            {
                handle.velocity.x = 0;
                handle.translate.x = -handle.position.x;
            }
            else
            {
                handle.translate.x += handle.velocity.x;
            }
        if (handle.velocity.y > 0)
            if (handle.translate.y + handle.velocity.y + handle.position.y + handle.dimension.y >= handle.scene.dimension.y) {
                handle.velocity.y = 0;
                handle.translate.y = handle.scene.dimension.y - handle.dimension.y - handle.position.y;
            }
            else {
                handle.translate.y += handle.velocity.y;
            }
        else if (handle.velocity.y < 0)
            if (handle.translate.y + handle.position.y + handle.velocity.y <= 0) {
                handle.velocity.y = 0;
                handle.translate.y = -handle.position.y;
            }
            else {
                handle.translate.y += handle.velocity.y;
            }




        handle.element.style.transform = "translate(" + +handle.translate.x + "px, " + handle.translate.y + "px)";




        requestAnimationFrame(update);
    }        




    requestAnimationFrame(update);
}

User Input verarbeiten ist nun auch nicht mehr so schwer, einfach je nach Bedingung den Wert für velocity ändern. Dazu ist an der Stelle auch nicht viel zu erklären.

document.addEventListener("keypress", function (event) {
    if (event.charCode == 119 || event.charCode == 97 || event.charCode == 115 || event.charCode == 100 ||
        event.charCode == 87 || event.charCode == 65 || event.charCode == 83 || event.charCode == 68 ||
        event.keyCode <= 40 && event.keyCode >= 37
    )
        event.preventDefault();




    var lvl1 = 3;
    var lvl2 = 9;

    if (event.keyCode == 39 || event.charCode == 100 || event.charCode == 68)
        if (player1.velocity.x < 0)
            player1.velocity.x = 0;
        else if (player1.velocity.x == 0)
            player1.velocity.x = lvl1;
        else
            player1.velocity.x = lvl2;


    if (event.keyCode == 37 || event.charCode == 97 || event.charCode == 65)
        if (player1.velocity.x > 0)
            player1.velocity.x = 0;
        else if (player1.velocity.x == 0)
            player1.velocity.x = -lvl1;
        else
            player1.velocity.x = -lvl2;
});

Erstellt ohne jQuery oder andere Frameworks. Frameworks sind schön, helfen aber beim lernen <0.

Der ganze Kram kombiniert sieht dann irgendwie so aus: codepen.io velocity
Pfeiltasten links/rechts oder A/D benutzen um Bewegung nach links oder rechts zu erzeugen. Doppelt drücken erhöht die Geschwindigkeit, bei entgegengesetzter Richtung wird zunächst ein Stillstand erzeugt.

Solltest du hier jemals wieder rein gucken viel Spaß damit, bei Fragen kann ich auch gerne genauere Erläuterungen liefern.