Home > Web Front-end > H5 Tutorial > HTML5 simulates flat throwing motion (simulating the flat throwing motion process of a small ball)_html5 tutorial skills

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

WBOY
Release: 2016-05-16 15:48:56
Original
2744 people have browsed it

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:


< head>

html5 cannonball
<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>






html5 simulation ball Flat throwing motion process.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template