HTML5 simulates flat throwing motion (simulating the flat throwing motion process of a small ball)_html5 tutorial skills

The object is thrown in the horizontal direction with a certain initial velocity. If the object is only affected by gravity, such a motion is called a horizontal throwing motion. The horizontal throwing motion can be regarded as the combined motion of uniform linear motion in the horizontal direction and free fall motion in the vertical direction. Since the net external force on an object in horizontal motion is a constant force, the motion of an object in horizontal motion is a uniform variable speed curve motion, and the trajectory of a horizontally thrown object is a parabola. The horizontal throwing motion is a curved motion. The time of the horizontal throwing motion is only related to the vertical height of the throwing point; the horizontal displacement of the object landing is related to time (vertical height) and horizontal initial velocity.

Copy code

The code is as follows:

<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; =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>