JQuery animationszeit ermitteln

Hallo leute,

ich habe ein kleines Problem. Ich möchte beim klicken auf ein Div eine Animation starten, wenn man noch mal auf den div klickt, soll die animation beendet werden. Danach soll angezeigt werden, wieviele milisekunden zwischen ersten und zweiten klick vergangen sind. Folgenden code habe ich verwendet:

JavaScript:

    var time;
    var start = 0;
    var end = 0;
    $('.animationBar').click(function(){
        if($('.arrow').is(':animated')){
            $('.arrow').animate().stop();
            time = new Date();
            end = time.getTime();
        }else{
            time = new Date();
            start = time.getTime();
            $('.arrow').css('margin-left','0px');
            $('.arrow').animate({
                marginLeft: '+=199'
            }, 500,'linear', function() {
                time = new Date();
                end = time.getTime();
                $('.display').text(-1*(start-end));
            });
        }
        $('.display').text((end-start));
       
    });

es lauft also eine linie in einer bar von links nach rechts. Ich habe als animationsdauer 500 milisekunden eingestellt. also müsste bei mir nach der animation im display immer 500 stehen. jedoch kriege ich als ergebnis zwischen 502 und 510 und manchmal gibt es im browser kleine laggs und als ergebnis kriege ich 600+. meine fragen sind nun:

habe ich denn eine möglichkeit die zeit exakt herauszufinden?

und wieso ist die ausgabe größer als das erwartete ergebnis? habe ich an falschen stellen die zeit gespeichert?

MFG BlackScorp

abgesehen von dem  IMHO fehlenden Sinn dieser Zeiterfassung:

wie du selber festgestellt hast, ist die berechnung der zeit von der  auslastung  des rechners abhängig. und vorallem dein onComplete Callback startet ja nach 500 ms und dateobject muss auch noch erzeugt werden und zeit aus diesem ausgelesen werden und die referenz des divs geholt und bestückt werden. Wehe der browser hat in der zeit noch was anderes zu erledigen - alles eine frage der erwartungshaltung

abgesehen von dem  IMHO fehlenden Sinn dieser Zeiterfassung:

Soweit ich weiß, soll es für so ein "Wie stark schälst du zu" System sein. Also ein Balken der von 0% bis 100% oszilliert und stehen bleibt, wenn man ihn anklickt. Da wo er stehen bleibt, ist dann die Stärke des Schlages (oder Präzision etc)

Wäre sowas nicht besser mit einer Progressbar machbar? Da könnte man dann den Wert direkt abfragen. Oder man guckt einfach wie weit der effekt den balken gefüllt hat um den Wert zu ermitteln.

ja progressbar ist funny, ich kann doch nicht den wert der progressbar and ajax request schicken, dann könnte ja irgendjemand auf die idee kommen, den wert per firebug anzupassen.. desswegen dachte ich da an zeit ermittlung

Da das mit der Zeit nicht so genau hinhaut kannst du ja die beiden möglichkeiten kombinieren. Du sendest die Zeit und den Wert und prüfst ob die ungefähr zusammen passen. Aber manipulationsanfällig ist grundsätzlich alles was vom User kommt.

desswegen die zeit, wenn ich weis, wann die animation gestartet hat und bei einer geschwindigkeit x, wurde nach y millisekunden gestoppt, somit weis ich wo sich der balken gerade befindet.. eigentlich, jedoch kommt ausführungszeit dazu, eventuelle stopps(lags) usw usw. muss mir wohl was anderes einfallen lassen

Original von BlackScorp

ja progressbar ist funny, ich kann doch nicht den wert der progressbar and ajax request schicken, dann könnte ja irgendjemand auf die idee kommen, den wert per firebug anzupassen.. desswegen dachte ich da an zeit ermittlung

Theoretisch kann der User alles was du im Browser berechnest manipulieren. Im Notfall einfach die Requests direkt manipulieren. Es ist zwar wahrscheinlich nicht immer so einfach. Aber theoretisch kannst du nix, was der User dir schickt als "trusted" behandeln ;)

2 Lösungen die mir einfallen:

- Schieberegler/Eingabefeld machen wo man die Stärke beliebig einstellen kann, völlig Zeitunabhängig

- Abstufungen machen dass sich der Wert nur alle 100ms ändert. Also zwischen 400 und 499 nimmst die Stärke 4, bei 500 - 599 die Stärke 5

Exakt auf Millisekundenebene zu machen ist technisch wie gesagt wurde problematisch weil immer Abweichungen haben wirst je nach Hardware und auch für den Benutzer schwer, weil er nicht gezielt einstellen kann sondenr per Glück eher auf die richtie Stärke kommt.

naja es ist nicht nur die stärke,

meine idee war folgende: ich habe ein skill x der hat eine schwierigkeitsstufe von y. beim benutzen des skills taucht ein balken auf mit farbverläufen auf. Der verlauf geht von blau über grün nach rot und wieder zurück, jedes mal wird er zufällig dargestellt auf der leiste. damit der rote bereich (kritischer schaden) immer an einer anderen stelle ist. je höher die schwierigkeitsstufe des skillls, desto kleiner ist der rote bereich und die anderen bereiche auch.

auch per zufall wird die animationsgeschwindigkeit für den balken angegeben. der balken fängt also sich zur seite zu bewegen und der spiele muss versuchen, den balken innerhalb des farbigen bereichs zu stoppen, am besten in der roten farbe um kritischen schaden anzurichten. wenn  er außerhalb des farbigen bereichs liegt, ferfehlt sein skill den gegner.

um die aktuelle position zu ermitteln, wäre am sichersten mit der zeit(meiner meinung nach). also wenn ich an den server nach dem stop der animation die zeitdifferenz zwischen start und stop der animation schicke, kann ich dann mit hilfe der animationsgeschwindigkeit die position des balken auf der serverseite ermitteln.

das war so der grund gedanke.. aber wie ich es sehe, ist es technisch nicht möglich... ich denke ich lass es einfach. mein ziel war es halt dass die spieler nicht durch das leveln besser wurden, sondern durch ihre persönliche reaktinszeit und glück...

Grundlegend find ich Deine Idee klasse! Das schafft wenigstens Abwechslung.

Jedoch eine Sache als Gedankenanstoss: Du möchtest es über die Zeit machen, um sicherzugehen, dass die Spieler nicht "bescheissen" und einfach direkt den Wert zuschicken.

Aber ich denke: Wer sich schon die Mühe macht und gefälschte Daten an den Server schickt, für den wird es dann auch nur noch eine kleine Fingerübung sein, aus den zur Verfügung stehenden Daten die optimale Zeit auszurechnen und diese dann abzuschicken.

Also: setz es doch einfach so um, dass du zufällig den Balken generierst und die Geschwindigkeit und lässt Dir dann an den Server zurückschicken, an welcher Stelle im Balken der User gestoppt hat. Also Position und nicht Zeit seit Animationsbeginn.

Original von darwolia

Also: setz es doch einfach so um, dass du zufällig den Balken generierst und die Geschwindigkeit und lässt Dir dann an den Server zurückschicken, an welcher Stelle im Balken der User gestoppt hat. Also Position und nicht Zeit seit Animationsbeginn.

Der Ansatz ist genauso wie der Zeitansatz manipulierbar. Ob du dir die optimale Zeit oder die optimale Position selbst ermittelst und zum Server schickst kommt ziemlich aufs Gleiche hinaus.

Sicher wäre dagegen nur wenn die Animation auf dem Server ebenfall laufen lässt und beim Click auf dem Server die Animation stoppst und auswertest. Dann hast aber das Problem dass zwischen Click und Serverauswertung Zeit dazwischen ist.

Daher als nettes Gimmick durchaus eine schöne IDee, aber sicher gestalten halte ich nicht für möglich, da es auf dem Client geschieht und alles am Client manipuliert werden kann.

wobei ich denke dass es schwerer ist die optimale zeit zu ermitteln wäre, vor allem, wel die optimale zeit oder die "soll position" des balken immer auf dem server bleibt, der "hacker" könnte die zeit nur erahnen weil er ja nur optisch den sollpunkt sieht. die position in pixel oder % auf dem balken würde ihm auch nichts bringen, durch die zufällige animationsgeschwindigkeit, zudem kann er den script nicht kurz anhalten, da ja die zeit ja nicht angehalten werden kann .ich denke dass mit der zeit ist schon sicher, jedoch hatte ich halt bis jetzt beim testen einige probleme, zb dass manchmal mein browser irgendwas im hintergrund macht und paar milisekunden laggt, der jquery script hatte auch seine ausführungszeit am ende gab es differenzen von 2-60 milisekunden, man denkt zwar , was sind denn 2-60 milisekunden, jedoch habe ich mal an der sollstelle (oder knapp drauf angehalten) und der server meinte dass es nicht der fall war, wegen 3 milisekunden..

also ich denke es ist sicher, jedoch wenn jemand ein langsamen pc hat, kann er größere laggs haben und auch wenn er optisch an der richtigen position anhällt, rechnet der server eine falsche zeit aus , weil ich nicht die möglichkeit habe laggzeit und ausführungszeit zu ermitteln , um die dann von der zeit des stopps abzuziehen..

Den optimalen Punkt sollte man sich aber recht fix ermitteln können.

"Hm, wenn das ding 415 sendet, mach ich den meisten Schaden, probieren wir mal 420, ok, mehr Schaden. probieren wir 430 -> weniger schaden. 425 also.

naja probieren geht ja nicht.. denn der optimale punkt ist jedesmal anders und die animationsgeschwindigkeit auch wenn ich mal was probieren will und schicke eine zeit an den server, vearbeitet der server die zeit, beim neuen ausprobieren, liegt der optimalpunkt schon an einer anderen stelle und da könnte man wieder nur probieren.. höchstens hat man ab und zu glück, aber anstatt auf glück zu hoffen , könnte man doch gleich "richtig" spielen