html5模拟平抛运动(模拟小球平抛运动过程)_html5教程技巧

物体以一定的初速度沿水平方向抛出，如果物体仅受重力作用，这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体，由于所受的合外力为恒力，所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动 平抛运动的时间仅与抛出点的竖直高度有关；物体落地的水平位移与时间（竖直高度）及水平初速度有关。

复制代码

代码如下:

<script> <br>//box <br>var box_x=0; <br>var box_y=0; <br>var box_width=300; <br>var box_height=300; <br>//ball <br>var ball_x=10; <br>var ball_y=10; <br>var ball_radius=10; <br>var ball_vx=10; <br>var ball_vy=0; <br>//constant <br>var g=10;//note <br>var rate=0.9; <br>//bound <br>var bound_left=box_x ball_radius; <br>var bound_right=box_x box_width-ball_radius; <br>var bound_top=box_y ball_radius; <br>var bound_bottom=box_y box_height-ball_radius; <br>//context <br>var ctx; <br>function init() <br>{ <br>ctx=document.getElementById('canvas').getContext('2d'); <br>ctx.lineWidth=ball_radius; <br>ctx.fillStyle="rgb(200,0,50)"; <br>move_ball(); <br>setInterval(move_ball,100); <br>} <br>function move_ball() <br>{ <br>ctx.clearRect(box_x,box_y,box_width,box_height); <br>move_and_check(); <br>ctx.beginPath(); <br>ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true); <br>ctx.fill(); <br>ctx.strokeRect(box_x,box_y,box_width,box_height); <br>} <br>function move_and_check() <br>{ <br>var cur_ball_x=ball_x ball_vx; <br>var temp=ball_vy; <br>ball_vy=ball_vy g; <br>var cur_ball_y=ball_y ball_vy g/2; <br>if(cur_ball_x<bound_left) <br />{ <br />cur_ball_x=bound_left; <br />ball_vx=-ball_vx*0.9; <br />ball_vy=ball_vy*0.9; <br />} <br />if(cur_ball_x>bound_right) <br>{ <br>cur_ball_x=bound_right; <br>ball_vx=-ball_vx*0.9; <br>ball_vy=ball_vy*0.9; <br>} <br>if(cur_ball_y<bound_top) <br />{ <br />cur_ball_y=bound_top; <br />ball_vy=-ball_vy*0.9; <br />ball_vx=ball_vx*0.9; <br />} <br />if(cur_ball_y>bound_bottom) <br>{ <br>cur_ball_y=bound_bottom; <br>ball_vy=-ball_vy*0.9; <br>ball_vx=ball_vx*0.9; <br>} <br>ball_x=cur_ball_x; <br>ball_y=cur_ball_y; <br>} <br></script>

html5模拟小球平抛运动过程。