Chute libre JavaScript Analog

Boules de toile d’utilisation pour dessiner, sol ;

Connaissances physiques Review, processus de chute d’objet (indépendamment de la perte) convertie en énergie cinétique de l’énergie potentiel gravitationnel

Énergie potentielle gravitationnelle Ep = MGH

L’énergie cinétique Ek = mv (1/2) ^ 2

Vitesse droite 0 augmentation de GT

Ici vous devez calculer les coordonnées y de billes de chaque rendu du navigateur

Y = gt (1/2) ^ 2

Énergie cinétique est convertie en énergie de potentiel gravitationnel

La vitesse est progressivement réduite à 0

Cela ne veut pas la valeur de y = (1/2) g (T-T1) ^ 2, t1, la longueur de la consommation chute ou de rebond

Mais l’effet réel n’est pas satisfaisant, devrait être le calcul des déplacements rebond ne va pas, après avoir réfléchi répété infructueux (si dont Dana a une meilleure façon d’atteindre le commentaire bienvenu à informer)

Ainsi, il a été décidé pour économiser le déplacement du processus goutte dans un tableau, puis supprimer l’affectation individuellement lorsque vous rebondissez.

≪ !    DOCTYPE html >< html lang = « fr » < meta charset = « UTF-8"            Le padding : 0 du corps _ {le            marge : 0 ;        Background-color : rgba (0, 0, 0, 1) ;            } #Canvas {display : block ;        Auto margin : 10px ; ≪ / Style >< / chef >< corps >< toile id = « Toile » width = « » hauteur = « > votre navigateur n’est pas suppor T toile < / toile >< script type = « text/javascript » //Free automne H = (gt ^ 2) / 2 énergie cinétique Ek = (mv ^ 2) / 2 des énergie potentielle gravitationnelle : Ep = MGH Let x = 30        0, Y = 60, / / centre coordonne minHeight = 60, / / Minimum drop déplacement maxHeight = 446, / / maximum baisse de déplacement                 Dir = true ;        Chute de vrai dir, false pour rebondir (function () {Let toile = document.getElementById (« toile ») ;        Laissez CTX = canvas.getContext (« 2d ») ;    Dessiner (CTX) ;    })();     Fonction Draw (CTX) {currentTime s = new Date (). getTime () ;                             Le premier numéro de milliseconde, le dossier réentrant lorsque currentTime let arr_y = [] ;                     Définit le tableau de window.requestAnimationFrame de déplacements de goutte (function init () {si (dir) {si (y > = maxHeight) {}                    Dir = false ;                CurrentTime = new Date (). getTime () ;                    } Else {y = y + Math.pow (nouvelle Date (). getTime ()-currentTime)/1000,2) * 10/2 ;                Arr_y.push (y) ;                    }} Else {si (y < = minHeight) {dir = true ;                CurrentTime = new Date (). getTime () ;                } Else {y = arr_y.splice (-1,1) [0] || 60 ;            DrawArc}} (Ctx, x, y) ;        RequestAnimationFrame (init) ;    });        } //Draw boules et sol fonction 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 >

Bien qu’il soit seulement un simple drop et rebondir, mais afin de rebondir le déplacement de la réalisation de la création de mes 6 jours (principalement tous les jours pour réfléchir à la manière de calculer le déplacement de rebond)

L’idée de départ principale a porté sur la

Chute de déplacement (équation parabolique sur la ligne ouverte)

Y = gt (1/2) ^ 2

Pensant que le déplacement de la reprise doit être modifié pour déplacer la parabole le long de l’axe des x vers la droite t1, pour obtenir

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

Les étudiants intéressés peuvent essayer de voir l’effet

Navigateur, rendant l’effet rebond n’est pas satisfaisante, donc n'est pas venu avec le calcul de la méthode de déplacement, donc l’utilisation de tableaux pour atteindre

Bienvenue à Correction d’erreur ~