Home > Developer > JavaScript
Use canvas to draw the ball, the ground;
1. Falling processPhysical 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 processKinetic 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.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 ~
JavaScript simulates freefall
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
