How to realize the Simulation of flat throwing Motion by html5

This article Xiaobian for you to introduce in detail "html5 how to achieve the simulation of flat throwing motion", the content is detailed, the steps are clear, the details are handled properly, I hope that this "html5 how to achieve simulation of flat throwing motion" article can help you solve your doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

An object is thrown horizontally at a certain initial velocity. If the object is only affected by gravity, this motion is called a horizontal parabolic motion. The horizontal parabolic motion can be regarded as the combined motion of the uniform linear motion in the horizontal direction and the free fall motion in the vertical direction. For a body with flat parabolic motion, because the external force is a constant force, the motion is a uniform variable speed curve, and the trajectory of the flat parabolic body is a parabola. Horizontal motion is curvilinear motion the time of horizontal motion is only related to the vertical height of the throwing point, and the horizontal displacement of an object landing is related to time (vertical height) and horizontal initial velocity.

The code is as follows:

Html5 cannonball

/ / box

Var box_x=0

Var box_y=0

Var box_width=300

Var box_height=300

/ / ball

Var ball_x=10

Var ball_y=10

Var ball_radius=10

Var ball_vx=10

Var ball_vy=0

/ / constant

Var Group10 Placement Note

Var rate=0.9

/ / bound

Var bound_left=box_x+ball_radius

Var bound_right=box_x+box_width-ball_radius

Var bound_top=box_y+ball_radius

Var bound_bottom=box_y+box_height-ball_radius

/ / context

Var ctx

Function init ()

{

Ctx=document.getElementById ('canvas'). GetContext (' 2d')

Ctx.lineWidth=ball_radius

Ctx.fillStyle= "rgb (2000.50)"

Move_ball ()

SetInterval (move_ball,100)

}

Function move_ball ()

{

Ctx.clearRect (box_x,box_y,box_width,box_height)

Move_and_check ()

Ctx.beginPath ()

Ctx.arc (ball_x,ball_y,ball_radius,0,Math.PI*2,true)

Ctx.fill ()

Ctx.strokeRect (box_x,box_y,box_width,box_height)

}

Function move_and_check ()

{

Var cur_ball_x=ball_x+ball_vx

Var temp=ball_vy

Ball_vy=ball_vy+g

Var cur_ball_y=ball_y+ball_vy+g/2

If (cur_ball_xbound_right)

{

Cur_ball_x=bound_right

Ball_vx=-ball_vx*0.9

Ball_vy=ball_vy*0.9

}

If (cur_ball_ybound_bottom)

{

Cur_ball_y=bound_bottom

Ball_vy=-ball_vy*0.9

Ball_vx=ball_vx*0.9

}

Ball_x=cur_ball_x

Ball_y=cur_ball_y

}

After reading this, the article "how to simulate flat throwing motion with html5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.