HTML5 による平投げモーションのシミュレーション (小さなボールの平投げモーションのプロセスをシミュレート)_html5 チュートリアル スキル

物体が重力のみの影響を受ける場合、物体を水平方向に一定の初速度で投げる運動を水平投げ運動といいます。水平投擲動作は、水平方向の等速直線運動と垂直方向の自由落下運動とを組み合わせた運動とみなすことができる。水平運動する物体にかかる正味の外力は一定の力であるため、水平運動する物体の運動は等速曲線運動となり、水平に投げられた物体の軌道は放物線となる。水平投擲動作は曲線的な動作であり、水平投擲動作の時間は投擲点の垂直高さにのみ関係し、物体の着地時の水平変位は時間（垂直高さ）と水平初速に関係する。

コードをコピーします

コードは次のとおりです。

>

<script> var box_x=0 ; <br>var box_y=0; <br>var box_height=300; <br>var ball_x=10; <br>var ball_vx=10; <br>var ball_vy=0; <br>//定数 <br>var g=10;//note <br>var rate=0.9; varbound_left=box_x ball_radius; <br>varbound_right=box_x box_width-ball_radius; <br>varbound_bottom=box_height-ball_radius; <br>var ctx; 🎜>関数 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>ctx.beginPath(); <br>ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true); .fill(); <br>ctx.ストロークRect(box_x,box_y,box_width,box_height); <br>関数 move_and_check() <br>{ <br>var cur_ball_x=ball_x ball_vx; =ball_vy; <br>ball_vy=ball_vy g; <br>var cur_ball_y=ball_vy g/2; <br>{ <br>cur_ball_x=bound_left; *0.9; <br>ball_vy=ball_vy*0.9; <br>if(cur_ball_x>bound_right) <br>ball_vx=-ball_vx*0.9; =ball_vy*0.9; <br>if(cur_ball_y<bound_top) <br />{ <br />cur_ball_y=bound_top; <br />ball_vx=ball_vx*0.9; >} <br />if(cur_ball_y>bound_bottom) <br>{ <br>cur_ball_y=bound_bottom; <br>ball_vx=ball_vx*0.9; <br>ball_x= cur_ball_x; <br>ball_y=cur_ball_y; <br></script>





html5 ボール投げ動作処理。