本文小编为大家详细介绍“html5怎么实现模拟平抛运动”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5怎么实现模拟平抛运动”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
成都创新互联是一家专注于成都网站制作、网站建设与策划设计,宿州网站建设哪家好?成都创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:宿州等地区。宿州做网站价格咨询:13518219792
物体以一定的初速度沿水平方向抛出,如果物体仅受重力作用,这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体,由于所受的合外力为恒力,所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动 平抛运动的时间仅与抛出点的竖直高度有关;物体落地的水平位移与时间(竖直高度)及水平初速度有关。
代码如下:
//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 g=10;//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(200,0,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_x { cur_ball_x=bound_left; ball_vx=-ball_vx*0.9; ball_vy=ball_vy*0.9; } if(cur_ball_x>bound_right) { cur_ball_x=bound_right; ball_vx=-ball_vx*0.9; ball_vy=ball_vy*0.9; } if(cur_ball_y { cur_ball_y=bound_top; ball_vy=-ball_vy*0.9; ball_vx=ball_vx*0.9; } if(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; } 读到这里,这篇“html5怎么实现模拟平抛运动”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。
名称栏目:html5怎么实现模拟平抛运动
网页路径:http://kswsj.cn/article/gepphh.html