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> 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 />var bound_bottom=box_y box_height-ball_gius; <br />var bound_bottom=box_y box_height-ball_gius; init() <br />{ <br />ctx=document.getElementById('canvas').getContext('2d'); <br />ctx.lineWidth=ball_radius; <br />ctx.fillStyle="rgb(200,0rgb(200,0rgb(200,0 ,50)"; <br />move_ball(); <br />setInterval(move_ball,100); <br />} <br />function move_ball() <br />{ <br />ctx.clearRect(box_box,_🎜>{ <br />ctx.clearRect(box_box. 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_x=ball_x; <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_vy=ball_vy*0.9; <br />} <br />if(cur_ball_x>bound_right) <br />{ <br />cur_ball_x=bound_right; <br />ball_vx=-ball_vxxxxd; 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_vxx=vx00. 🎜>if(cur_ball_y>bound_bottom) <br />{ <br />cur_ball_y=bound_bottom; <br />ball_vy=-ball_vy*0.9; <br />ball_vx=ball_vxball_0.9; 🎜>ball_y=cur_ball_y; <br />} <br /></script>