JavaScript simulates freefall

Source: Internet
Author: User

1.

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) ||  -;            }} 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.save ();        Ctx.beginpath (); Ctx.strokestyle= '#ffffff'; Ctx.moveto (0, -); Ctx.lineto ( -, -); Ctx.linewidth= 4;        Ctx.stroke ();        Ctx.closepath ();    Ctx.save (); }</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 Keywords:
Related Article