Ankündigung

Einklappen
Keine Ankündigung bisher.

Div bewegen

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Schlafmuetz
    hat ein Thema erstellt Div bewegen.

    Div bewegen

    Hallo,

    ich versuche verzweifelt das div richtig bewegen zu können, jedoch ist wohl die animate funktion eine schlechte wahl, oder ich bin buchstäblich zu doof.

    PHP-Code:
    //bewegung
    $(document).ready(function() {
        $(
    document).keydown(function(event) {
            var 
    key String.fromCharCode(event.keyCode);
            
    key.toUpperCase();
                    switch(
    key) {

                case 
    "W":

                $(
    ".gameuser").css("background-image""url(/img/figur.png)");
                    $.
    getJSON"/ajax/ajax1.php?1=W", function( daten ) {
                        $( 
    ".gameuser" ).data("x"daten.x);
                        $( 
    ".gameuser" ).data("y"daten.y);
                        if(
    daten.laufbar == 1)
                        {
                            
    zoom = $("#gamesize").data("zoom");
                            
                            $(
    ".gameuser").stop(falsefalse);
                            
                            $( 
    ".gameuser" ).filter(":not(:animated)").animate({ "bottom": (daten.y*zoom-zoom)+"px""left": (daten.x*64-64)+"px" }, "1000");
                        
                        }
                    });
                break;
                case 
    "A":

                $(
    ".gameuser").css("background-image""url(/img/figur.png)");
                    $.
    getJSON"/ajax/ajax1.php?1=A", function( daten ) {
                        $( 
    ".gameuser" ).data("x"daten.x);
                        $( 
    ".gameuser" ).data("y"daten.y);
                        if(
    daten.laufbar == 1)
                        {
                            
    zoom = $("#gamesize").data("zoom");
                            $(
    ".gameuser").stop(falsefalse);
                            
                            $( 
    ".gameuser" ).filter(":not(:animated)").animate({ "bottom": (daten.y*zoom-zoom)+"px""left": (daten.x*64-64)+"px" }, "1000""linear" );
                            
                        }
                    });
                break;
                case 
    "D":
                $(
    ".gameuser").css("background-image""url(/img/figur.png)");
                    $.
    getJSON"/ajax/ajax1.php?1=D", function( daten ) {
                        $( 
    ".gameuser" ).data("x"daten.x);
                        $( 
    ".gameuser" ).data("y"daten.y);
                        if(
    daten.laufbar == 1)
                        {
                            
    zoom = $("#gamesize").data("zoom");
                            $(
    ".gameuser").stop(falsefalse);
                            
                            $( 
    ".gameuser" ).filter(":not(:animated)").animate({ "bottom": (daten.y*zoom-zoom)+"px""left": (daten.x*64-64)+"px" }, "1000""linear" );
                        
                        }
                    });
                break;
                case 
    "S":
                $(
    ".gameuser").css("background-image""url(/img/figur.png)");
                    $.
    getJSON"/ajax/ajax1.php?1=S", function( daten ) {
                        $( 
    ".gameuser" ).data("x"daten.x);
                        $( 
    ".gameuser" ).data("y"daten.y);
                        if(
    daten.laufbar == 1)
                        {
                            
    zoom = $("#gamesize").data("zoom");
                            $(
    ".gameuser").stop(falsefalse);
                            $( 
    ".gameuser" ).filter(":not(:animated)").animate({ "bottom": (daten.y*zoom-zoom)+"px""left": (daten.x*64-64)+"px" }, "1000""linear" );
                        }
                    });
                break;
                case 
    "I":
                    
    toggleDiv(inventar);
                break;
            }

        });

    }); 
    das wäre der code, man kann sie bewegen, das ist nicht das problem, sondern eher das das div springen tut bzw durch die karte hüpfen tut.
    Also wenn ich angenommen w drücke rennt oder slidet das div weiter als es soll es lässt sich auch durch den gegenpart s nur schwer bremsen bzw in die andere richtung bringen.

    wäre nett wenn mir wer hlefen kann.
    mfg

  • Schlafmuetz
    antwortet
    ihr wisst ja nicht alles was drin steht, aber ich verrate noch ein stück es ist node.js drin :P die datei heißt so... mehr nicht

    aber nun steh ich vor denkfehlern... wie mach ich es das wenn sich die figur dem rand nähert, das mitgescollt werden.

    Einen Kommentar schreiben:


  • rudygotya
    antwortet
    Ich würds wegwerfen und das nochmal machen. Such dir eine canvas2d engine, ein performantes Anwendungsframework und haks als gute Übung ab.

    Bewegungslogik gehört in den Client, die ajax calls sind brutaler overhead und per jquery animate hat das auch null performance.

    Einen Kommentar schreiben:


  • monolith
    antwortet
    Zitat von mermshaus Beitrag anzeigen
    Der Witz ist ja noch immer, dass einerseits Ajax bei jedem Event-Handler involviert ist (Latenz) und dass andererseits die Bewegungslogik („Wohin?“) überhaupt nicht im gezeigten Code zu sehen ist, weil sie serverseitig abgelegt ist.
    Ach oh je, da ist echt AJAX noch mit im Spiel... Was steht dann auf der anderen Seite, eine gemeine PHP-Application? Na wenn das mal gut geht. OPcache oder vergleichbares an? Was für ein Server? Ich male mir da gerade irgendwie die Performance-Hölle aus.

    Schlafmuetz eventuell würde es dir von Nutzen sein mal dein Konzept zur Kommunikation zwischen Client und Server (grob zusammengefasst) vorzustellen. Ich kenne dich nicht aber da du dich als Anfänger eingestuft hast habe ich böse Vorahnungen. Vielleicht läuft ja auch alles superperformant mit node.js oder sowas (kenne mich da selber nicht besonders aus, solche Echtzeitanwendungen habe ich noch nie umgesetzt) - dann Glückwunsch - oder es ist einfach nur PHP "ohne alles", dann gute Nacht.

    Einen Kommentar schreiben:


  • Schlafmuetz
    antwortet
    ja ich weis hab ich auch mit bekommen moma hab nun thottle drin ^^ debounce fast ja zusammen

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    nebenbei:
    thottle != debounce

    http://benalman.com/projects/jquery-...bounce-plugin/
    und praktisch:
    http://jsfiddle.net/amyseqmedia/dD99u/37/

    Einen Kommentar schreiben:


  • Kinger
    antwortet
    Sobald der Loop läuft, läuft das Spiel. Dann werden deine Frames gerendert. (Kennste ja bestimmt von PC-Spielen, FPS -> Frames per Second) Dann kann man auch Frame-Sicher animieren. Das ganze hat viele vorteile. Das aber nun hier zu erklären würde den Rahmen sprengen.

    Ich kann dir dazu aber folgenden Artikel empfehlen: Game-Loop

    Einen Kommentar schreiben:


  • Schlafmuetz
    antwortet
    ne ist richtig, stimmt schon(außer man liest nur und kopf schmilzt), jedoch ja weis nicht habs überflgen aber wozu dauerschleifen?!

    Einen Kommentar schreiben:


  • Kinger
    antwortet
    Du wirst aber schon bald vor ganz anderen Problemen stehen. (Je nachdem wie komplex das Game werden soll) Daher empfehle ich dir dich dennoch in das Thema reinzulesen. Dümmer wirst du dadurch auch nicht.

    Einen Kommentar schreiben:


  • Schlafmuetz
    antwortet
    du hast recht kinger so ist es. wobei ich aber gameloop nicht kenne jedoch mit throttle geht es schon sehr gut die figur zu bewegen

    Einen Kommentar schreiben:


  • Kinger
    antwortet
    monolith & mermshaus haben nicht ganz unrecht. Wenn ich das richtig interpretiere möchte der TE ein Game auf Basis von Sprites in JS schreiben. (Korrigiere mich wenn ich mich täusche)
    Da ist es natürlich angebrachter mit einem richtigen Game-Loop zu arbeiten. Im Netz findet man denn weitere Beschreibungen wie man Collisions abfängt, die Figur bewegt, KI, Game-State ... und und und. Vielleicht wäre das ja für dich der bessere Ansatz.

    Einen Kommentar schreiben:


  • Schlafmuetz
    antwortet
    weil das keyevent gefeuert wird und somit werden felder ja übersprungen, also wenn man w gedrückt hält wird halt ja nicht von feld zu feld sondern einfach welche überfolgen... mit dem throttlen gehts nun besser muss nur bissel den wert einstellen

    Einen Kommentar schreiben:


  • mermshaus
    antwortet
    Der Witz ist ja noch immer, dass einerseits Ajax bei jedem Event-Handler involviert ist (Latenz) und dass andererseits die Bewegungslogik („Wohin?“) überhaupt nicht im gezeigten Code zu sehen ist, weil sie serverseitig abgelegt ist. Dazu kommt dann die Frage: „Warum bewegt es sich komisch?“

    Vielleicht bin ich auch nur zu penibel.

    Einen Kommentar schreiben:


  • Schlafmuetz
    antwortet
    nein, kann man leider nicht.(alles schon versucht) ich hab es jetzt mal debounct und ja wie soll ich sagen, meine figur rennt nicht mehr wie wild, durch die kante. muss nur den wert einstellen und dann könnte es annehmbar sein

    Einen Kommentar schreiben:


  • monolith
    antwortet
    Sicher, dass das Problem nicht falsch angegangen wird? Ich werde mir nicht den Code vom Startpost durchlesen aber kann man das Problem nicht durch Stoppen der Animation beheben? http://api.jquery.com/stop/

    Einen Kommentar schreiben:

Lädt...
X