JavaScript simulates freefall

Source: Internet
Author: User

2. Implementation analysis

Use canvas to draw the ball, the ground;

1. Falling process

Physical knowledge Review, the object falling process (regardless of loss) converted from gravitational potential energy to kinetic energy

Gravitational potential Energy Ep = MGH

Kinetic energy Ek = (mv^2)

Speed right 0 increased to GT

You need to calculate the y-coordinate of each render of the browser

y = (gt^2)

2. Rebound process

Kinetic energy converted into gravitational potential energy

The speed is gradually reduced until it is 0.

This is intended to set y = (t-t1) g (^2,T1) as the length of the drop or bounce consumption

But the actual appearance of the effect is not satisfactory, it should be the rebound displacement calculation error, after repeated thinking of no fruit (if the danale have a better way of achieving welcome comments to inform)

So I decided to save the displacement of the falling process in an array, and then remove the assignment

3. Code implementation
<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title>    <style>Body{padding:0;margin:0;Background-color:rgba (0, 0, 0, 1);        }#canvas{Display:Block;margin:10px Auto;        }    </style></Head><Body><CanvasID= "Canvas"width= "All"Height= "All">Your browser isn't support canvas</Canvas><Scripttype= "Text/javascript">    //Freefall h= (gt^2)/2 kinetic ek= (mv^2)/2 gravitational potential energy: Ep = MGHLet x= -, y= -,                 //Center coordinatesMinHeight=  -,             //Minimum Drop DisplacementMaxHeight= 446,            //Maximum Drop displacementdir= true; //dir True drop, false for bounce    (function() {Let canvas=document.getElementById ('Canvas'); Let CTX=Canvas.getcontext ('2d');    Draw (CTX);    })(); functionDraw (CTX) {Let currenttime= NewDate (). GetTime (); //start the number of milliseconds, turn back record once currenttimeLet arr_y= []; //sets the array of drop displacementsWindow.requestanimationframe (functioninit () {if(dir) {if(y>=maxheight) {dir= false; CurrentTime= NewDate (). GetTime (); }Else{y=y+Math.pow ((NewDate (). GetTime ()-currenttime)/1000,2) *10/2;                Arr_y.push (y); }            }Else{                if(y<=minheight) {dir= true; CurrentTime= NewDate (). GetTime (); }Else{y=Arr_y.splice (-1,1)[0] ||  -;            }} drawarc (Ctx,x,y);        Requestanimationframe (init);    }); }    //draw spheres and ground    functionDrawArc (ctx,x,y) {Ctx.clearrect (0, 0,  -,  -);        Ctx.beginpath (); Ctx.arc (x, Y, -,0, Math.PI*2); Ctx.fillstyle='#98adf0';        Ctx.fill (); ();        Ctx.beginpath (); Ctx.strokestyle= '#ffffff'; Ctx.moveto (0, -); Ctx.lineto ( -, -); Ctx.linewidth= 4;        Ctx.stroke ();        Ctx.closepath (); (); }</Script></Body></HTML>
4. Conclusion

Although it is only a simple drop and bounce, but in order to bounce the implementation of the displacement of the full cost of my 6 days (mainly to think about how to calculate the rebound displacement)

The main beginning of the idea has been focused on

Drop displacement (parabolic equation on open line)

y = (gt^2)

Think of the displacement of the rebound should be changed to the parabola along the x-axis to the right T1, to obtain

y = (a) g (T-T1) ^2

Interested students can try to see the effect

Browser rendering bounce effect is unsatisfactory, so has not come up with the calculation of the displacement method, so the use of arrays to implement

Welcome to Error Correction ~

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.