这篇文章主要讲解了“html5怎么模拟平抛运动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5怎么模拟平抛运动”吧!
物体以一定的初速度沿水平方向抛出,如果物体仅受重力作用,这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体,由于所受的合外力为恒力,所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动平抛运动的时间仅与抛出点的竖直高度有关;物体落地的水平位移与时间(竖直高度)及水平初速度有关。
代码如下:
& lt; html>
& lt; head>
& lt;元charset=utf-8>
& lt; title> html5炮弹& lt;/title>
& lt; script>
//
var box_x=0盒;
var box_y=0;
var box_width=300;
var box_height=300;球
//
var ball_x=10;
var ball_y=10;
var ball_radius=10;
var ball_vx=10;
var ball_vy=0;
//
恒定var g=10;//注意
var率=0.9;
//
绑定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;
//
var ctx上下文;
init()函数
{
ctx=. getelementbyid(& # 39;帆布# 39;).getContext (& # 39; 2 d # 39;);
ctx.lineWidth=ball_radius;
ctx.fillStyle=皉gb (200 0 50)“;;
move_ball ();
setInterval (move_ball, 100);
}
函数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,真的);
ctx.fill ();,
ctx.strokeRect (box_x box_y box_width, box_height);
}
函数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;
如果(cur_ball_x
cur_ball_x=bound_left;
ball_vx=-ball_vx * 0.9;
ball_vy=ball_vy * 0.9;
}
如果(cur_ball_x> bound_right)
{
cur_ball_x=bound_right;
ball_vx=-ball_vx * 0.9;
ball_vy=ball_vy * 0.9;
}
如果(cur_ball_y
cur_ball_y=bound_top;
ball_vy=-ball_vy * 0.9;
ball_vx=ball_vx * 0.9;
}
如果(cur_ball_y> bound_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;
}
& lt;/script>
& lt;/head>
& lt;身体>感谢各位的阅读,以上就是“html5怎么模拟平抛运动”的内容了,经过本文的学习后,相信大家对html5怎么模拟平抛运动这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!
