Home > Developer > JavaScript
Use canvas to draw the ball, the ground;
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)
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
<!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">
//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
(function(){
Let canvas= document.getElementById('canvas');
Let ctx = canvas.getContext('2d');
Draw(ctx);
})();
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(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);
});
}
/ / draw the ball and the ground
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. 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 ~
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
