溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js實現自由落體效果的具體代碼，供大家參考，具體內容如下
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
有興趣的同學可以試試看看效果
瀏覽器渲染反彈的效果不盡人意，所以一直沒想出計算的位移方法，故使用數組實現
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
