JavaScript類比自由落體

來源:互聯網
上載者:User
1.

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

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

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

 

歡迎錯誤修正~

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • 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.