JavaScript類比自由落體

最後更新：2018-09-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

2.實現分析

利用Canvas畫圓球、地面；

1.下落過程

物理知識回顧，物體下落過程（不計損耗）由重力勢能轉換成動能

重力勢能 Ep = mgh

動能　　Ek = (1/2)mv^2

速度右0增加至gt

此間需要計算瀏覽器每次渲染的圓球y座標

y = (1/2)gt^2

2.反彈過程

動能轉化成重力勢能

速度是逐漸減少直至為0

本打算設定 y = (1/2)g(t-t1)^2，t1為下落或者反彈消耗的時間長度

但是實際呈現的效果卻不盡人意，應該是反彈位移計算有誤，經反覆思考無果（若哪位大拿有更好的實現方式歡迎評論告知）

所以決定將下落過程的位移儲存在一個數組裡，待反彈時再逐一取出賦值

3.代碼實現

<!DOCTYPE html><html lang="en"><head>    <meta charset="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><canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas><script type="text/javascript">    //自由落體 H=(gt^2)/2 動能 Ek=(mv^2)/2 重力勢能:Ep = mgh    let x=300,y=60,                 //圓心座標        minHeight = 60,             //最小下落位移        maxHeight = 446,            //最大下落位移        dir = true;                 //dir true下落，false為彈起    (function(){        let canvas= document.getElementById('canvas');        let ctx = canvas.getContext('2d');        draw(ctx);    })();    function draw(ctx){        let currentTime = new Date().getTime();     //開始毫秒數,折返記錄一次currentTime        let arr_y = [];                             //設定下落位移的數組        window.requestAnimationFrame(function init(){            if(dir){                if(y >= maxHeight){                    dir = false;                    currentTime = new Date().getTime();                }else{                    y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2;                    arr_y.push(y);                }            }else{                if(y <= minHeight){                    dir = true;                    currentTime = new Date().getTime();                }else{                    y = arr_y.splice(-1,1)[0] || 60;                }            }            drawArc(ctx,x,y);            requestAnimationFrame(init);        });    }    //繪製圓球和地面    function 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>

4.結語

雖然只是一個簡單的下落和彈起，但是為了彈起位移的實現整整花費本人6天的時間（主要是每天都思考怎麼計算彈起位移）

主要開始的思路一直關注在

下落位移（開口線上拋物線方程）

y = (1/2)gt^2

思考反彈的位移應該改是將拋物線沿x軸右移t1，得出

y = (1/2)g(t-t1)^2

有興趣的同學可以試試看看效果

瀏覽器渲染反彈的效果不盡人意，所以一直沒想出計算的位移方法，故使用數組實現

歡迎錯誤修正~

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More