JavaScript Analog Freifall

Verwendung Canvas zeichnen Kugeln, Boden;

Physikalischen Wissens Review, Objekt Drop Prozess (unabhängig von Verlust) von potenzielle Energie in kinetische Energie umgewandelt.

Potenzielle Energie Ep = MGH

Kinetische Energie Ek = Mv (1/2) ^ 2

Geschwindigkeit rechts 0 Anstieg auf GT

Hier müssen Sie die Kugel-y-Koordinaten der einzelnen Darstellung des Browsers zu berechnen

Y = (1/2) Gt ^ 2

Kinetische Energie in potenzielle Energie umgewandelt

Die Geschwindigkeit ist langsam auf 0 reduziert.

Dies soll y = (1/2) g (T-T1) ^ 2, t1 als die Länge der Rebound oder Tropfen Verbrauch

Aber der eigentliche Effekt ist nicht zufriedenstellend, sollte die Zugstufe Verschiebung Berechnung ist falsch, nach wiederholten erfolglosen denken (wenn die Dana eine bessere Möglichkeit hat, Kommentar, informieren die willkommen zu erreichen)

Also wurde beschlossen, die Verschiebung des Drop-Prozesses in einem Array speichern, und dann die Zuordnung einzeln entfernen, wenn Sie wieder auf die Beine.

≪!    DOCTYPE html >< html Lang = "En" < Meta Charset = "UTF-8"            Die Polsterung: 0 _ Körper {die            Margin: 0;        Hintergrund-Farbe: Rgba (0, 0, 0, 1);            } #Canvas {Display: Block;        Margin: 10px Auto; ≪ / Style >< / Leiter >< Körper >< Leinwand Id = "Leinwand" Breite = "" Höhe = "> Ihr Browser ist nicht Suppor T Leinwand < / Leinwand >< script Type = "Text/Javascript" //Free Herbst H = (Gt ^ 2) / 2 kinetische Energie Ek = (Mv ^ 2) / 2 potenzielle Energie: Ep = MGH lassen Sie X = 30        0, Y = 60 / / Zentrum koordiniert MinHeight = 60, / / Minimum drop Verschiebung MaxHeight = 446, / / maximale Verschiebung fallen                 Dir = True;        Dir echte Drop, "false" für Bounce (Funktion () {Let Leinwand = document.getElementById ("Leinwand");        Lassen Sie CTX = canvas.getContext (2d);    Zeichnen Sie (CTX);    })();     Funktion zeichnen (CTX) {CurrentTime s = new Date (). GetTime ();                             Die Startnummer Millisekunde, reentrant Datensatz einmal CurrentTime Arr_y ließ = [];                     Setzt die Reihe von Tropfen Verschiebungen window.requestAnimationFrame (Funktion Init () {wenn (Dir) {wenn (y > = MaxHeight) {}                    Dir = False;                CurrentTime = new Date (). GetTime ();                    } Else {y = y + Math.pow (neues Datum (). GetTime ()-CurrentTime)/1000,2) * 10/2;                Arr_y.Push (y);                    {}} Else {wenn (y < = MinHeight) {Dir = True;                CurrentTime = new Date (). GetTime ();                } Else {y = arr_y.splice (-1,1) [0] || 60;            {}} DrawArc (Ctx, x, y);        RequestAnimationFrame (Init);    });        } //Draw Kugeln und Boden funktionieren DrawArc (Ctx, X, y) {ctx.clearRect (0, 0, 600, 600);        (Ctx.beginPath);        CTX.Arc (x,y,50,0,Math.PI*2);        CTX.fillStyle= "#98adf0";        (CTX.Fill);        (CTX.Save);        (Ctx.beginPath);        CTX.strokeStyle = "#ffffff";        Ctx.moveTo (0,500);        Ctx.lineTo (600.500);        Ctx.lineWidth = 4;        (CTX.Stroke);        (Ctx.closePath);    (CTX.Save); } ≪ / script >< / body >< / html >

Obwohl es nur ein einfacher fallen und springen, aber damit hüpfen die Verschiebung der Verwirklichung die vollen Kosten für meine 6 Tage (vor allem jeden Tag zu denken, wie die Sprungkraft Verschiebung zu berechnen)

Die zentrale Ausgangspunkt Idee befasst sich mit der

Drop-Verschiebung (parabolische Gleichung auf freier Strecke)

Y = (1/2) Gt ^ 2

Denken, dass die Verschiebung der Rebound geändert werden soll, um die Parabel entlang der x-Achse zu den richtigen t1 zu verschieben, zu erhalten

Y = (1/2) g (T-T1) ^ 2

Interessierte Studenten können versuchen, den Effekt zu sehen

Browser rendern Rebound-Effekt ist nicht zufriedenstellend, also nicht bei der Berechnung der Verschiebung Methode, also die Verwendung von Arrays zu gekommen ist

Willkommen Fehlerkorrektur ~