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>
<html lang="en">
    <meta charset="UTF-8">
        Body {
            Padding: 0;
            Margin: 0;
            Background-color: rgba(0, 0, 0, 1);
            Display: block;
            Margin: 10px auto;
<canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas>
<script type="text/javascript">
    //Free fall H=(gt^2)/2 Kinetic energy Ek=(mv^2)/2 Gravitational potential energy: Ep = mgh
    Let x=300, y=60, //center coordinates
        minHeight = 60, //minimum drop displacement
        maxHeight = 446, //maximum drop displacement
        Dir = true; //dir true drops, false plays
        Let canvas= document.getElementById('canvas');
        Let ctx = canvas.getContext('2d');
    Function draw(ctx){
        Let currentTime = new Date().getTime(); //Start the number of milliseconds, fold back the record once time
        Let arr_y = []; //Set the array of drop displacements
        window.requestAnimationFrame(function init(){
                If(y >= maxHeight){
                    Dir = false;
                    currentTime = new Date().getTime();
                    y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;
                If(y <= minHeight){
                    Dir = true;
                    currentTime = new Date().getTime();
                    y = arr_y.splice(-1,1)[0] || 60;
    / / draw the ball and the ground
    Function drawArc(ctx,x,y){
        ctx.clearRect(0, 0, 600, 600);
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = 4;
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

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.